Added toggle to fills instead of bubbles with control

palewire · Nov 24, 2016 · d2ae163 · d2ae163
1 parent f83e0cb
commit d2ae163
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 25 deletions.
diff --git a/TODO.md b/TODO.md
@@ -7,3 +7,5 @@
 - [ ] Corum style squares
 - [ ] Link to code
 - [ ] Link to CSV files
+- [ ] Pretty up type switch toggle
+- [ ] Also toggle key when you click over to fills
diff --git a/static/css/app.css b/static/css/app.css
@@ -45,7 +45,6 @@ section.card .percentage {
   filter: url(#drop-shadow);
 }
 .county {
-    fill: #f8f8f8;
     stroke: #c7c7c7;
     stroke-width: .25px;
 }

diff --git a/static/js/app.js b/static/js/app.js
@@ -9,6 +9,18 @@ app.templates = {
     table: _.template(d3.select("#table-tmpl").html()),
     sources: _.template(d3.select("#sources-tmpl").html())
 };
+app.blue = "#047BC0";
+app.red = "#DC4E54";
+app.color = d3.scale.threshold()
+    .domain([0, 0.4, 0.45, 0.50, 0.55, 0.6, 1])
+    .range([
+        "#F4C2C2", // Baby pink
+        "#FF5C5C", // Indian red
+        "#FF5C5C", // Red
+        "#047BC0", // Blue
+        "#92A1CF", // Ceil
+        "#CCCCFF", // Lavender blue
+    ]);
 app.races = {
     2000: {
         "selector":  d3.select("#map-2000"),
@@ -138,6 +150,8 @@ app.createSvg = function (race) {
     return svg;
 };
 app.createBubbles = function (race) {
+    race.svg.selectAll(".county")
+      .attr("fill", "#f8f8f8");
     race.svg.append("g")
         .attr("class", "bubbles")
       .selectAll("circle")
@@ -267,6 +281,48 @@ app.createSources = function () {
     d3.select("section#sources")
       .html(app.templates.sources());
 };
+app.createSections = function () {
+    _.each(app.races, function (list, year) {
+        var race = app.races[year];
+        app.createHeadline(race);
+        app.createMap(race);
+        app.createResultCards(race);
+        app.createTable(race);
+    });
+};
+app.showFills = function () {
+    _.each(app.races, function (list, year) {
+        var race = app.races[year];
+        race.svg.select(".bubbles")
+          .selectAll("circle")
+          .style("fill-opacity", 0);
+        race.svg.selectAll(".county")
+          .attr("fill", function(d) {
+            var result = race.results[d.properties.GEOID];
+            return result.leader == 'dem' ? app.blue: app.red;
+          })
+          .attr("fill-opacity", 0.7);
+    });
+};
+app.showBubbles = function () {
+    _.each(app.races, function (list, year) {
+        var race = app.races[year];
+        race.svg.selectAll(".county")
+          .attr("fill", "#f8f8f8");
+          race.svg.select(".bubbles")
+            .selectAll("circle")
+            .style("fill-opacity", 0.7);
+    });
+};
+app.toggleType = function () {
+    var box = d3.select('#viz-type-checkbox');
+    var isChecked = box.property('checked');
+    if (isChecked) {
+        app.showBubbles();
+    } else {
+        app.showFills();
+    }
+};
 app.boot = function () {
     d3.select(window).on("resize", app.fitMaps);
     queue()
@@ -301,30 +357,9 @@ app.boot = function () {
           app.races[2012].results = results2012;
           app.races[2016].results = results2016;
 
-          app.createHeadline(app.races[2016]);
-          app.createHeadline(app.races[2012]);
-          app.createHeadline(app.races[2008]);
-          app.createHeadline(app.races[2004]);
-          app.createHeadline(app.races[2000]);
-
-          app.createMap(app.races[2016]);
-          app.createMap(app.races[2012]);
-          app.createMap(app.races[2008]);
-          app.createMap(app.races[2004]);
-          app.createMap(app.races[2000]);
-
-          app.createResultCards(app.races[2016]);
-          app.createResultCards(app.races[2012]);
-          app.createResultCards(app.races[2008]);
-          app.createResultCards(app.races[2004]);
-          app.createResultCards(app.races[2000]);
-
-          app.createTable(app.races[2016]);
-          app.createTable(app.races[2012]);
-          app.createTable(app.races[2008]);
-          app.createTable(app.races[2004]);
-          app.createTable(app.races[2000]);
-
+          app.createSections();
           app.createSources();
+
+          d3.select("#viz-type-checkbox").on("click", app.toggleType);
       });
 };
diff --git a/templates/index.html b/templates/index.html
@@ -20,6 +20,16 @@ <h1>How Iowa voted</h1>
                 Results from Iowa's 99 counties in the last five presidential elections
             </p>
         </header>
+        <section id="controls">
+            <div class="switch">
+                <label>
+                  Fills
+                  <input id="viz-type-checkbox" type="checkbox" checked>
+                  <span class="lever"></span>
+                  Bubbles
+                </label>
+            </div>
+        </section>
         <section id="maps">
             <section id="map-2016" class="cycle section"></section>
             <section id="map-2012" class="cycle section"></section>

diff --git a/templates/table.jst b/templates/table.jst
@@ -1,6 +1,7 @@
 <% var lastName = function(x) { var s = x.split(" "); return s[s.length-1]; } %>
 <% var numberWithCommas = function(x) { return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); } %>
 <% var toTitleCase = function(str) { if (str.toLowerCase() == "o'brien") { return "O'Brien"; } else { return str.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();}); }} %>
+
 <center><a class="waves-effect waves-light btn show" id="btn-<%= hed %>">Show more results +</a></center>
 <table class="bordered" id="table-<%= hed %>" style="display:none;">
     <tr>