D3 Examples - US Topo & Wafflehouses

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://unpkg.com/topojson-client@3"></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;
        }
​
        .county {
            fill: #e3e3e3;
            stroke: #333;
            stroke-width: 0.5;
        }
​
        .nation {
            fill: none;
            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: 50 },
        width = 1000 - margin.left - margin.right;
        height = 800 - margin.top - margin.bottom;
​
  svg
    .select("#map")
    .append("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 us.topojson
        Read in capitals.csv 
  */
  var path = d3.geoPath().projection(null);
​
  d3
    .queue()
    .defer(d3.json, "https://unpkg.com/us-atlas@1/us/10m.json") //  
                        // "https://d3js.org/us-10m.v1.json")
    .defer(d3.csv, "wafflehouses.csv")
    .await(ready);
​
 
​
  function ready(error, data, wafflehouses) {
    console.log(data);
​
  
​
    console.log(wafflehouses);
​
  /*
    svg
      .append("path")
      .attr("class", "county")
      .attr(
        "d",
        path(
          topojson.mesh(data, data.objects.counties, function(a, b) {
            return a !== b && ((a.id / 1000) | 0) === ((b.id / 1000) | 0);
          })
        )
      );
​
    svg
      .append("path")
      .attr("class", "state")
      //.attr("stroke-width", 0.5)
      .attr(
        "d",
        path(
          topojson.mesh(data, data.objects.states, function(a, b) {
            return a !== b;
          })
        )
      );
    svg
      .append("path")
      .attr("class", "nation")
      .attr("d", path(topojson.feature(data, data.objects.nation)));
  */
   /*
    svg
      .selectAll(".wafflehouse")
      .data(wafflehouses)
      .enter()
      .append("circle")
      .attr("class", "wafflehouse")
      .attr("r", 2)
      .attr("cx", function(d) {
        let projection = d3
          .geoAlbersUsa()
          .translate([width / 2 + 70, height / 2 - 35]);
        let coords = projection([d.lng, d.lat]);
        console.log(coords);
        return coords[0];
      })
      .attr("cy", function(d) {
        let projection = d3
          .geoAlbersUsa()
          .translate([width / 2 + 70, height / 2 - 32]);
        let coords = projection([d.lng, d.lat]);
        return coords[1];
      });
     */
  }
​
  </script>
</body>
​
    