display points

2 years ago · 5375a858ef
parent 233d8a4e7f
commit 5375a858ef
3 changed files with 85 additions and 8 deletions
--- a/public/app.css
+++ b/public/app.css
@ -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;
 }
--- a/public/app.js
+++ b/public/app.js
@ -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();
 }
--- a/public/index.html
+++ b/public/index.html
@ -3,9 +3,15 @@
 	<head>
 		<meta charset="UTF-8">
 		<title></title>
 		<script type="text/javascript" src="https://d3js.org/d3.v7.min.js"></script>
 		<script type="text/javascript" src="/app.js"></script>
 		<link rel="stylesheet" href="app.css">
 	</head>
 	<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>