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
@ -1,11 +1,17 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-	<meta charset="UTF-8">
-	<title></title>
-</head>
-<body>
-	<h1>Outcomes Tracker</h1>
-	<p>See how instances did in comparisson to others</p>
-</body>
+	<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>