City labels are in

TODO.md

@@ -1,4 +1,3 @@
-- [ ] City labels
 - [ ] Hover effects
 - [ ] Mini multiples for each candidate
 - [ ] Corum style squares

app.py

@@ -8,10 +8,5 @@ def index():
     return render_template('index.html')
 
 
-@app.route("/test/")
-def test():
-    return render_template('test.html')
-
-
 if __name__ == "__main__":
     app.run(debug=True)

data/iowa.cities.prj

@@ -0,0 +1 @@
+GEOGCS["GCS_WGS_1984",DATUM["D_WGS_1984",SPHEROID["WGS_1984",6378137,298.257223563]],PRIMEM["Greenwich",0],UNIT["Degree",0.017453292519943295]]

data/iowa.cities.qpj

@@ -0,0 +1 @@
+GEOGCS["WGS 84",DATUM["WGS_1984",SPHEROID["WGS 84",6378137,298.257223563,AUTHORITY["EPSG","7030"]],AUTHORITY["EPSG","6326"]],PRIMEM["Greenwich",0,AUTHORITY["EPSG","8901"]],UNIT["degree",0.0174532925199433,AUTHORITY["EPSG","9122"]],AUTHORITY["EPSG","4326"]]

templates/index.css

@@ -44,9 +44,23 @@ section.leaderboard .dem {
 .bubbles .dem {
     fill: #047BC0;
 }
+.city,
+.city-label {
+    fill: #444;
+}
+text {
+    font-family: "Roboto", sans-serif;
+    font-size: 11px;
+    pointer-events: none;
+}
 .btn {
     margin-bottom: 20px;
 }
 table.bordered tr:last-of-type {
     border-bottom: none;
 }
+@media (max-width: 720px) {
+    .city-label, .city {
+        display: none;
+    }
+}

templates/index.js

@@ -141,6 +141,32 @@ app.createBubbles = function (race) {
             return app.radius(county.margin);
         });
 };
+app.createCities = function (race) {
+    race.svg.append("g")
+        .attr("class", "cities")
+      .selectAll(".city")
+        .data(app.json.cities)
+      .enter().append("circle")
+        .attr("transform", function(d) { return "translate(" + app.path.centroid(d) + ")"; })
+        .attr("r", 2)
+        .attr("class", "city")
+        .attr("data-name", function (d) { return d.properties.NAME; });
+
+    race.svg.append("g")
+        .attr("class", "city-labels")
+      .selectAll(".city-label")
+        .data(app.json.cities)
+      .enter().append("text")
+        .attr("class", "city-label")
+        .attr("transform", function(d) { return "translate(" + app.projection(d.geometry.coordinates) + ")"; })
+        .attr("dy", "0.22rem")
+        .text(function(d) { return d.properties.NAME; });
+
+    race.svg.selectAll(".city-label")
+        .attr("dx", function(d) { return d.geometry.coordinates[0] > -93.15 ? "0.4rem" : "-0.4rem"; })
+        .style("text-anchor", function(d) { return d.geometry.coordinates[0] > -93.15 ? "start" : "end"; });
+
+};
 app.createHeadline = function (race) {
     var hed = race.selector.append("h3")
       .text(race.hed);
@@ -151,6 +177,7 @@ app.createHeadline = function (race) {
 app.createMap = function (race) {
     race.svg = app.createSvg(race);
     app.createBubbles(race);
+    app.createCities(race);
     app.fitMaps();
 };
 app.createTable = function (race) {
@@ -178,17 +205,19 @@ app.boot = function () {
     queue()
       .defer(d3.json, "/static/json/iowa-counties.geojson")
       .defer(d3.json, "/static/json/iowa-state.geojson")
+      .defer(d3.json, "/static/json/iowa-cities.geojson")
       .defer(d3.json, "/static/json/2000.json")
       .defer(d3.json, "/static/json/2004.json")
       .defer(d3.json, "/static/json/2008.json")
       .defer(d3.json, "/static/json/2012.json")
       .defer(d3.json, "/static/json/2016.json")
-      .await(function(error, counties, state, results2000, results2004, results2008, results2012, results2016) {
+      .await(function(error, counties, state, cities, results2000, results2004, results2008, results2012, results2016) {
           if (error) throw error;
 
           app.json = {
               counties: counties.features,
-              state: state.features[0]
+              state: state.features[0],
+              cities: cities.features
           };
 
           app.radius = app.createRadius(_.flatten(