parent
233d8a4e7f
commit
5375a858ef
@ -0,0 +1,18 @@
|
|||||||
|
circle {
|
||||||
|
r:5;
|
||||||
|
fill: black;
|
||||||
|
}
|
||||||
|
#container {
|
||||||
|
overflow: visible;
|
||||||
|
margin-bottom: 50px;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
margin: 20px 40px;
|
||||||
|
}
|
||||||
|
table, th, td {
|
||||||
|
border: 1px solid black;
|
||||||
|
}
|
||||||
|
th, td {
|
||||||
|
padding:10px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
@ -0,0 +1,53 @@
|
|||||||
|
const WIDTH = 800;
|
||||||
|
const HEIGHT = 600;
|
||||||
|
|
||||||
|
let instances;
|
||||||
|
let xScale, yScale;
|
||||||
|
const parseTime = d3.timeParse("%B %e, %Y");
|
||||||
|
const formatTime = d3.timeFormat("%B %e, %Y");
|
||||||
|
|
||||||
|
|
||||||
|
const render = () => {
|
||||||
|
const circles = d3.select('#points')
|
||||||
|
.selectAll('circle')
|
||||||
|
.data(instances, (datum) => {
|
||||||
|
return datum.id
|
||||||
|
});
|
||||||
|
circles.enter().append('circle');
|
||||||
|
|
||||||
|
d3.selectAll('circle')
|
||||||
|
.attr('cy', (datum, index) => {
|
||||||
|
return yScale(datum.ninety_day_outcomes);
|
||||||
|
});
|
||||||
|
|
||||||
|
d3.selectAll('circle')
|
||||||
|
.attr('cx', (datum, index) => {
|
||||||
|
return xScale(parseTime(datum.graduation_date));
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
window.onload = async ()=>{
|
||||||
|
d3.select('svg');
|
||||||
|
d3.select('svg')
|
||||||
|
.style('width', WIDTH)
|
||||||
|
.style('height', HEIGHT);
|
||||||
|
|
||||||
|
instances = await d3.json('/instances');
|
||||||
|
|
||||||
|
xScale = d3.scaleTime();
|
||||||
|
xScale.range([0,WIDTH]);
|
||||||
|
const xDomain = d3.extent(instances, (datum, index) => {
|
||||||
|
return parseTime(datum.graduation_date);
|
||||||
|
});
|
||||||
|
xScale.domain(xDomain);
|
||||||
|
|
||||||
|
yScale = d3.scaleLinear();
|
||||||
|
yScale.range([HEIGHT, 0]);
|
||||||
|
const yDomain = d3.extent(instances, (datum, index) => {
|
||||||
|
return datum.ninety_day_outcomes;
|
||||||
|
})
|
||||||
|
yScale.domain(yDomain);
|
||||||
|
|
||||||
|
render();
|
||||||
|
}
|
||||||
@ -1,11 +1,17 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title></title>
|
<title></title>
|
||||||
</head>
|
<script type="text/javascript" src="https://d3js.org/d3.v7.min.js"></script>
|
||||||
<body>
|
<script type="text/javascript" src="/app.js"></script>
|
||||||
<h1>Outcomes Tracker</h1>
|
<link rel="stylesheet" href="app.css">
|
||||||
<p>See how instances did in comparisson to others</p>
|
</head>
|
||||||
</body>
|
<body>
|
||||||
|
<h1>Outcomes Tracker</h1>
|
||||||
|
<p>See how instances did in comparisson to others</p>
|
||||||
|
<svg id="container">
|
||||||
|
<g id="points"></g>
|
||||||
|
</svg>
|
||||||
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Loading…
Reference in new issue