D3 Examples - US GeoJson & Wafflehouses

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    
     * {
            font-family: "Helvetica Neue";
        }
​
        p,
        text {
            font-size: 0.85em;
        }
​
        svg {
            background: white;
            stroke-linejoin: round;
            stroke-linecap: round;
        }
​
        .state {
            fill: #e3e3e3;
            stroke: steelblue;
            stroke-width: 2;
        }
  </style>
</head>
​
<body>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
    var svg = d3.select("body").append("svg")
      .attr("width", 960)
      .attr("height", 500)
 
     var margin = { top: 50, left: 50, right: 50, bottom: 200 },
         width = 1000 - margin.left - margin.right;
           height = 800 - margin.top - margin.bottom;
​
   svg 
    .attr("height", height + margin.top + margin.bottom)
    .attr("width", width + margin.left + margin.right)
    .append("g")
    .attr("transform", "translate(" + margin.left + ", " + margin.top + ")");
  /* 
        Read in geojson
        Read in wafflehouses.dsv
  */
 
  d3
    .queue()
    .defer(d3.json, "us-states.json") //
    .defer(d3.csv, "wafflehouses.csv")
    .await(ready);
​
  /* 
       Create new projection geoAlbersUSA
       and zoom in a certain amount (scale)
  */
  var projection = d3
    .geoAlbersUsa()
    .translate([width / 2, height / 2])
    .scale(1000);
  //create path (geoPath) using projection
  var path = d3.geoPath().projection(projection);
  //var graticule = d3.geoGraticule();
​
  function ready(error, data, wafflehouses) {
    console.log(data);
    console.log(wafflehouses);
​
    svg
      .selectAll("path")
      .data(data.features)
      .enter()
      .append("path")
      .attr("class", "state")
      .attr("d", path);
​
    svg
      .selectAll(".wafflehouse")
      .data(wafflehouses)
      .enter()
      .append("circle")
      .attr("class", "wafflehouse")
      .attr("r", 2)
      .attr("cx", function(d) {
        //let projection = d3.geoAlbersUsa();
        let coords = projection([d.lng, d.lat]);
        console.log(coords);
        return coords[0];
      })
      .attr("cy", function(d) {
        //let projection = d3.geoAlbersUsa();
        let coords = projection([d.lng, d.lat]);
        return coords[1];
      });
  }
   
  </script>
</body>
​
    