add instances to highlight

2 years ago · 932a0f6f87
parent e06e55d556
commit 932a0f6f87
2 changed files with 39 additions and 10 deletions
--- a/public/app.js
+++ b/public/app.js
@ -2,6 +2,7 @@ const WIDTH = 800;
 const HEIGHT = 600;
 let instances;
 const selectedInstances = [];
 let xScale, yScale;
 const parseTime = d3.timeParse("%B %e, %Y");
 const formatTime = d3.timeFormat("%B %e, %Y");
@ -63,9 +64,23 @@ const createAxes = () => {
 		.call(leftAxis);
 }
 const createFormSubmissionHandler = () => {
 	d3.select('form').on('submit', (event)=>{
 		event.preventDefault();
 		const instanceID = parseInt(d3.select('input[type="text"]').property('value'))
 		selectedInstances.push(instanceID);
 		const list = d3.select('ul');
 		list.html('');
 		for(instance of selectedInstances){
 			list.append('li').html(instance)
 		}
 	});
 }
 window.onload = async ()=>{
 	instances = await d3.json('/instances');
 	setupGraph();
 	createAxes();
 	renderPoints();
 	createFormSubmissionHandler();
 }
--- a/public/index.html
+++ b/public/index.html
@ -10,6 +10,8 @@
 	<body>
 		<h1>Outcomes Tracker</h1>
 		<p>See how instances did in comparisson to others</p>
 		<section>
 			<h2>The Graph</h2>
 			<dl>
 				<dt>X-Axis:</dt>
 				<dd>Graduation Date</dd>
@ -21,5 +23,17 @@
 					<g id="points"></g>
 				</svg>
 			</svg>
 		</section>
 		<section>
 			<h2>Choose Instances To Highlight</h2>
 			<form>
 				<input type="text" placeholder="Insance ID"/>
 				<input type="submit"/>
 			</form>
 		</section>
 		<section>
 			<h2>Highlighted Instances</h2>
 			<ul></ul>
 		</section>
 	</body>
 </html>