mahuntington
/
outcomes-tracker
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add instances to highlight

Browse Source
master
Matt Huntington 2 years ago
parent e06e55d556
commit 932a0f6f87
2 changed files with 39 additions and 10 deletions
Show Stats Download Patch File Download Diff File

15
public/app.js
Unescape View File

@ -2,6 +2,7 @@ const WIDTH = 800;
const HEIGHT = 600; const HEIGHT = 600;
let instances; let instances;
const selectedInstances = [];
let xScale, yScale; let xScale, yScale;
const parseTime = d3.timeParse("%B %e, %Y"); const parseTime = d3.timeParse("%B %e, %Y");
const formatTime = d3.timeFormat("%B %e, %Y"); const formatTime = d3.timeFormat("%B %e, %Y");
@ -63,9 +64,23 @@ const createAxes = () => {
.call(leftAxis); .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 ()=>{ window.onload = async ()=>{
instances = await d3.json('/instances'); instances = await d3.json('/instances');
setupGraph(); setupGraph();
createAxes(); createAxes();
renderPoints(); renderPoints();
createFormSubmissionHandler();
} }

34
public/index.html
Unescape View File

@ -10,16 +10,30 @@
<body> <body>
<h1>Outcomes Tracker</h1> <h1>Outcomes Tracker</h1>
<p>See how instances did in comparisson to others</p> <p>See how instances did in comparisson to others</p>
<dl> <section>
<dt>X-Axis:</dt> <h2>The Graph</h2>
<dd>Graduation Date</dd> <dl>
<dt>Y-Axis:</dt> <dt>X-Axis:</dt>
<dd>Percentage of graduates that got a job within 90 days of graduation.</dd> <dd>Graduation Date</dd>
</dl> <dt>Y-Axis:</dt>
<svg id="container"> <dd>Percentage of graduates that got a job within 90 days of graduation.</dd>
<svg> </dl>
<g id="points"></g> <svg id="container">
<svg>
<g id="points"></g>
</svg>
</svg> </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> </body>
</html> </html>

Write Preview
Loading…
Cancel
Save