Populating table on the right with each neighborhood select

nickmcclellan · Jan 10, 2014 · ba1e806 · ba1e806
1 parent be8b653
commit ba1e806
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 14 deletions.
diff --git a/css/style.css b/css/style.css
@@ -4,6 +4,9 @@ body, h1, h2, h3, h4, h5 {
 h1, h2, h3, h4, h5 {
   font-weight: bold;
 }
+.align-right { text-align: right; }
+.align-left { text-align: left; }
+
 .posrel { position: relative; }
 .posabs { position: absolute; }
 .posfixed { position: fixed; }
@@ -56,6 +59,7 @@ h1, h2, h3, h4, h5 {
   z-index: 5;
 }
 
+/* map */
 svg {
   fill: #FFF;
 }

diff --git a/index.html b/index.html
@@ -73,22 +73,22 @@ <h2 id="#selection-title">#selection-title</h2>
           <div class="panel-heading">
             <h3 class="panel-title">#attributes</h3>
           </div>
-          <table class="table table-hover">
-            <tr>
-            <td>Population (total)</td>
-            <td>0</td>
+          <table id="pop-info" class="table table-hover">
+            <tr data-type="population_total">
+              <td>Population (total)</td>
+              <td class="count align-right">0</td>
             </tr>
-            <tr>
-            <td>Population (under 18)</td>
-            <td>0</td>
+            <tr data-type="population_under_18">
+              <td>Population (under 18)</td>
+              <td class="count align-right">0</td>
             </tr>
-            <tr>
-            <td>Single mother familes</td>
-            <td>0</td>
+            <tr data-type="single_mother_families">
+              <td>Single mother familes</td>
+              <td class="count align-right">0</td>
             </tr>
-            <tr>
-            <td>Children in poverty</td>
-            <td>0</td>
+            <tr data-type="children_in_poverty">
+              <td>Children in poverty</td>
+              <td class="count align-right">0</td>
             </tr>
           </table>
         </div>

diff --git a/js/visualization.js b/js/visualization.js
@@ -179,7 +179,6 @@ function drawChoropleth(){
     choropleth_data.forEach(function(d) {
       all_data[d.gis_id] = d;
       choropleth_data[d.gis_id] = +d.population_total;
-console.log(d);
     });
 
     g.select("#neighborhoods")
@@ -279,4 +278,14 @@ function clicked(d) {
       .duration(750)
       .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")scale(" + k + ")translate(" + -x + "," + -y + ")")
       .style("stroke-width", 1.5 / k + "px");
+
+  var $popbox = $('#pop-info'),
+      highlighted = all_data[d.properties.gis_id];
+
+  $popbox.siblings('.panel-heading').find('.panel-title').html(highlighted.NBH_NAMES);
+
+  $.each($popbox.find('tr'), function(k, row){
+    $(row).find('.count').html(highlighted[$(row).attr('data-type')]);
+  });
+
 }