demo_unitedStatesMap_d3

demo_unitedStatesMap_d3/project.json

+{
+	"title": "United States Map w/ d3.js",
+	"index": 20170317,
+	"type": "Demo"
+}

demo_unitedStatesMap_d3/py/compute.py

+import csv
+import json
+
+# There's no need for any Python here.

demo_unitedStatesMap_d3/res/exampleData.csv

+Latitude,Longitude
+-86.908,40.425

demo_unitedStatesMap_d3/web/index.html

+{% extends "static/templates/projectBase.html" %}
+{% block projectContent %}
+
+<script src="http://d3js.org/topojson.v1.min.js"></script>
+
+<style>
+.states {
+  fill: white;
+  stroke: black;
+}
+</style>
+
+<h2>United States Map</h2>
+<div id="chart"></div>
+
+<script src="web/vis.js"></script>
+
+{% endblock %}

demo_unitedStatesMap_d3/web/vis.js

+"use strict";
+
+/* Boilerplate jQuery */
+$(function() {
+  d3.csv("res/exampleData.csv", function (data) {
+    visualize(data);
+  });
+});
+
+/* Visualize the data in the visualize function */
+var visualize = function(data) {
+  console.log(data);
+
+  // == BOILERPLATE ==
+  var margin = { top: 50, right: 50, bottom: 50, left: 50 },
+     width = 900 - margin.left - margin.right,
+     height = 930 - margin.top - margin.left;
+
+  var svg = d3.select("#chart")
+              .append("svg")
+              .attr("width", width + margin.left + margin.right)
+              .attr("height", height + margin.top + margin.bottom)
+              .style("width", width + margin.left + margin.right)
+              .style("height", height + margin.top + margin.bottom)
+              .append("g")
+              .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
+
+  // Loads the map structure
+  d3.json("res/us.json", function(error, us) {
+     // Create the map projection to convert (lat, lon) -> point
+     var projection = d3.geoAlbersUsa();
+     var path = d3.geoPath()
+      .projection(projection);
+
+    // Draw the map
+    svg.append("path")
+       .attr("class", "states")
+       .datum(topojson.feature(us, us.objects.states))
+       .attr("d", path);
+
+
+    // Draw circles on the map
+    svg.selectAll("cities")
+    .data(data)
+    .enter()
+    .append("circle")
+    .attr("cx", function (d) {
+      // Using "Latitude" and "Longitude" from the CSV file:
+      var loc = [ d["Latitude"], d["Longitude"] ];
+      return projection(loc)[0];
+    })
+    .attr("cy", function (d) {
+      // Using "Latitude" and "Longitude" from the CSV file:
+      var loc = [ d["Latitude"], d["Longitude"] ];
+      return projection(loc)[1];
+    })
+    .attr("r", 50)
+    .attr("fill", "blue");
+  });
+
+
+};