diff --git a/public/app.css b/public/app.css
index e69de29..dfc03a6 100644
--- 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;
+}
diff --git a/public/app.js b/public/app.js
index e69de29..aa1029e 100644
--- 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();
+}
diff --git a/public/index.html b/public/index.html
index 7e008fb..a74971e 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,11 +1,17 @@
-
-
-
-
-
- Outcomes Tracker
- See how instances did in comparisson to others
-
+
+
+
+
+
+
+
+
+ Outcomes Tracker
+ See how instances did in comparisson to others
+
+