diff --git a/public/app.css b/public/app.css
index 2f55cbc..076d70d 100644
--- a/public/app.css
+++ b/public/app.css
@@ -1,21 +1,22 @@
circle {
- r:5;
- fill: black;
+ r:5;
+ fill: black;
}
-circle.highlighted {
+circle.highlighted{
fill:red;
+ r:10;
}
#container {
- overflow: visible;
- margin-bottom: 50px;
+ overflow: visible;
+ margin-bottom: 50px;
}
body {
- margin: 20px 40px;
+ margin: 20px 40px;
}
table, th, td {
- border: 1px solid black;
+ border: 1px solid black;
}
th, td {
- padding:10px;
- text-align: center;
+ padding:10px;
+ text-align: center;
}
diff --git a/public/app.js b/public/app.js
index f12a35b..eb3276a 100644
--- a/public/app.js
+++ b/public/app.js
@@ -33,13 +33,7 @@ const renderPoints = () => {
})
d3.selectAll('circle').on('click', (event, datum) => {
- d3.select('tbody td:nth-child(1)').html(datum.instance_id);
- d3.select('tbody td:nth-child(2)').html(datum.course);
- d3.select('tbody td:nth-child(3)').html(datum.graduation_date);
- d3.select('tbody td:nth-child(4)').html(datum.total_students);
- d3.select('tbody td:nth-child(5)').html(`${datum.dropped} (${Math.floor(datum.dropped/datum.total_students*100)}%)`);
- d3.select('tbody td:nth-child(6)').html(datum.graduates);
- d3.select('tbody td:nth-child(7)').html(`${datum.ninety_day_outcomes} (${Math.floor(datum.ninety_day_outcomes/datum.graduates*100)}%)`);
+ highlightInstance(datum.instance_id);
});
}
@@ -80,22 +74,32 @@ const createAxes = () => {
.call(leftAxis);
}
+const highlightInstance = (instanceID) => {
+ selectedInstances.push(instanceID);
+ for(instance of instances){
+ if(instance.instance_id == instanceID){
+ if(!instance.highlighted){
+ instance.highlighted = true
+ const tbody = d3.select('tbody');
+ const tr = tbody.append('tr');
+ tr.append('td').html(instance.instance_id);
+ tr.append('td').html(instance.course);
+ tr.append('td').html(instance.graduation_date);
+ tr.append('td').html(instance.total_students);
+ tr.append('td').html(`${instance.dropped} (${Math.floor(instance.dropped/instance.total_students*100)}%)`);
+ tr.append('td').html(instance.graduates);
+ tr.append('td').html(`${instance.ninety_day_outcomes} (${Math.floor(instance.ninety_day_outcomes/instance.graduates*100)}%)`)
+ }
+ }
+ }
+ renderPoints()
+}
+
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)
- }
- for(instance of instances){
- if(instance.instance_id == instanceID){
- instance.highlighted = true
- }
- }
- renderPoints()
+ highlightInstance(instanceID);
});
}
diff --git a/public/index.html b/public/index.html
index e24f52b..274f5f4 100644
--- a/public/index.html
+++ b/public/index.html
@@ -31,10 +31,6 @@
-
- Highlighted Instances
-
-
Instance Details
@@ -50,15 +46,7 @@
-
- |
- |
- |
- |
- |
- |
- |
-
+