map with label

梵总

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="https://rawgit.com/susielu/d3-annotation/master/d3-annotation.min.js"></script>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js"
      integrity="sha512-90vH1Z83AJY9DmlWa8WkjkV79yfS2n2Oxhsi2dZbIv0nC4E6m5AbH8Nh156kkM7JePmqD6tcZsfad1ueoaovww=="
      crossorigin="anonymous"
    ></script>
    <style type="text/css">
      /* On mouse hover, lighten state color */
      /* path:hover {
        fill-opacity: 0.7;
      } */

      div.markets {
        fill-opacity: 0.8;
      }

      /* Style for Custom Tooltip */
      div.tooltip {
        position: absolute;
        text-align: center;
        width: 60px;
        height: 28px;
        padding: 2px;
        font: 12px sans-serif;
        background: white;
        border: 0px;
        border-radius: 8px;
        pointer-events: none;
      }

      /* Legend Font Style */
      body {
        font: 11px sans-serif;
      }

      /* Legend Position Style */
      .legend {
        position: absolute;
        left: 800px;
        top: 350px;
      }
    </style>
  </head>
  <body>
    <button id="select-vq">VQ Markets</button>
    <button id="select-wtw">WTW Markets</button>
    <button id="select-aon">AON Markets</button>
    <button id="select-mercer">MERCER Markets</button>
    <button id="hide-markets">Hide Markets</button>

    <script type="text/javascript">
      /*  This visualization was made possible by modifying code provided by:

            Scott Murray, Choropleth example from "Interactive Data Visualization for the Web"
            https://github.com/alignedleft/d3-book/blob/master/chapter_12/05_choropleth.html

            Malcolm Maclean, tooltips example tutorial
            http://www.d3noob.org/2013/01/adding-tooltips-to-d3js-graph.html

            Mike Bostock, Pie Chart Legend
            http://bl.ocks.org/mbostock/3888852  */

      "use strict";

      //Width and height of map
      var width = 960;
      var height = 500; // D3 Projection

      var projection = d3
        .geoAlbersUsa()
        // .albersUsa()
        .translate([width / 2, height / 2]) // translate to center of screen
        .scale([1000]); // scale things down so see entire US
      // Define path generator

      var path = d3
        .geoPath() // path generator that will convert GeoJSON to SVG paths
        .projection(projection); // tell path generator to use albersUsa projection
      // Define linear scale for output

      var color = d3
        .scaleLinear()
        .range([
          "rgb(213,222,217)",
          "rgb(69,173,168)",
          "rgb(84,36,55)",
          "rgb(217,91,67)",
        ]);
      var legendText = [
        "Cities Lived",
        "States Lived",
        "States Visited",
        "Nada",
      ]; //Create SVG element and append map to the SVG

      var svg = d3
        .select("body")
        .append("svg")
        .attr("width", width)
        .attr("height", height); // Append Div for tooltip to SVG

      var div = d3
        .select("body")
        .append("div")
        .attr("class", "tooltip")
        .style("opacity", 0);
      var layer1 = svg.append("g");
      var layer2 = svg.append("g");
      var layer3 = svg.append("g"); // Load GeoJSON data and merge with states data

      var offsets = {
        VT: [0, 50],
        NH: [15, 35],
        MA: [20, 25],
        RI: [28, 20],
        CT: [35, 10],
        NJ: [34, 20],
        DE: [33, 30],
        MD: [47, 35],
        DC: [49, 21],
      };

      d3.json("us-states-abbr.json", function (statejson) {
        layer1
          .selectAll("path")
          .data(statejson.features)
          .enter()
          .append("path")
          .attr("d", path)
          .style("stroke", "#cc0000")
          .style("stroke-width", "1")
          .style("fill", "none");

        var smalllStates = statejson.features.filter((item) =>
          _.has(offsets, item.properties.abbr)
        );

        smalllStates.forEach((item) => {
          var x = path.centroid(item)[0];
          var y = path.centroid(item)[1];

          var abbr = item.properties.abbr;

          var offset = offsets[abbr];

          var annotations = [
            {
              note: {
                label: abbr,
              },
              x: x,
              y: y,
              dy: offset[0],
              dx: offset[1],
            },
          ];

          // Add annotation to the chart
          const makeAnnotations = d3.annotation().annotations(annotations);
          svg.append("g").call(makeAnnotations);
        });

        var bigStates = statejson.features.filter(
          (item) => !_.has(offsets, item.properties.abbr)
        );

        svg
          .append("g")
          .attr("class", "states-names")
          .selectAll("text")
          .data(bigStates)
          .enter()
          .append("svg:text")
          .text(function (d) {
            return d.properties.abbr;
          })
          .attr("x", function (d) {
            console.log(path.centroid(d));
            return path.centroid(d)[0];
          })
          .attr("y", function (d) {
            return path.centroid(d)[1];
          })
          .attr("text-anchor", "middle")
          .attr("fill", "black");
      });

      // const annotations = [
      //   {
      //     note: {
      //       label: "Here is the annotation label",
      //       title: "Annotation title",
      //     },
      //     x: 562,
      //     y: 143,
      //     dy: 200,
      //     dx: 200,
      //   },
      // ];

      // // Add annotation to the chart
      // const makeAnnotations = d3.annotation().annotations(annotations);
      // svg.append("g").call(makeAnnotations);

      var items = ["#cc0000", "#00cc00", "#0000cc"];
      // d3.json("mercerMarkets.json", function (vqs) {
      //   vqs.forEach(function (vq) {
      //     var nlayer = svg.append("g").attr("class", "markets");
      //     // var color = items[Math.floor(Math.random() * items.length)];
      //     var color = vq.color;
      //     var file = vq.file;
      //     d3.json(file, function (json) {
      //       var features = [json];
      //       nlayer
      //         .selectAll("path")
      //         .data(features)
      //         .enter()
      //         .append("path")
      //         .attr("class", "markets")
      //         .attr("d", path)
      //         .style("stroke", "#ccc")
      //         .style("stroke-width", "1")
      //         .style("fill", color)
      //         .style("opacity", "0.8");
      //     });
      //   });
      // });
      document
        .getElementById("select-vq")
        .addEventListener("click", function () {
          svg.selectAll(".markets").remove();
          d3.json("vqMarkets.json", function (vqs) {
            vqs.forEach(function (vq) {
              var nlayer = svg.append("g").attr("class", "markets");
              var color = vq.color;
              var file = vq.file;
              d3.json(file, function (json) {
                var features = [json];
                nlayer
                  .selectAll("path")
                  .data(features)
                  .enter()
                  .append("path")
                  .attr("d", path)
                  .style("stroke", "#ccc")
                  .style("stroke-width", "1")
                  .style("fill", color);
              });
            });
          });
        });

      document
        .getElementById("hide-markets")
        .addEventListener("click", function () {
          svg.selectAll(".markets").remove();
        });
      document
        .getElementById("select-wtw")
        .addEventListener("click", function () {
          svg.selectAll(".markets").remove();
          d3.json("wtwMarkets.json", function (vqs) {
            vqs.forEach(function (vq) {
              var nlayer = svg.append("g").attr("class", "markets");
              var color = vq.color;
              var file = vq.file;

              d3.json(file, function (json) {
                var features = [json];
                nlayer
                  .selectAll("path")
                  .data(features)
                  .enter()
                  .append("path")
                  .attr("d", path)
                  .style("stroke", "#ccc")
                  .style("stroke-width", "1")
                  .style("fill", color);
              });
            });
          });
        });

      document
        .getElementById("select-aon")
        .addEventListener("click", function () {
          svg.selectAll(".markets").remove();
          d3.json("aonMarkets.json", function (vqs) {
            vqs.forEach(function (vq) {
              var nlayer = svg.append("g").attr("class", "markets");
              var color = vq.color;
              var file = vq.file;
              d3.json(file, function (json) {
                var features = [json];
                nlayer
                  .selectAll("path")
                  .data(features)
                  .enter()
                  .append("path")
                  .attr("d", path)
                  .style("stroke", "#ccc")
                  .style("stroke-width", "1")
                  .style("fill", color);
              });
            });
          });
        });

      document
        .getElementById("select-mercer")
        .addEventListener("click", function () {
          svg.selectAll(".markets").remove();
          d3.json("mercerMarkets.json", function (vqs) {
            vqs.forEach(function (vq) {
              var nlayer = svg.append("g").attr("class", "markets");
              var color = vq.color;
              var file = vq.file;
              d3.json(file, function (json) {
                var features = [json];
                nlayer
                  .selectAll("path")
                  .data(features)
                  .enter()
                  .append("path")
                  .attr("d", path)
                  .style("stroke", "#ccc")
                  .style("stroke-width", "1")
                  .style("fill", color);
              });
            });
          });
        });
    </script>
  </body>
</html>

梵总

https://www.d3-graph-gallery.com/graph/custom_annotation.html

梵总

Here is the zip level GeoJSON:
https://github.com/OpenDataDE/State-zip-code-GeoJSON

Here is the state level GeoJSON:
https://raw.githubusercontent.com/PublicaMundi/MappingAPI/master/data/geojson/us-states.json

梵总

Shape file
https://www.baruch.cuny.edu/confluence/display/geoportal/ESRI+USA+Data

Shape to GeoJSON:

Tutorial: https://www.statsilk.com/maps/convert-esri-shapefile-map-geojson-format
Pay version: https://mygeodata.cloud/converter/shp-to-geojson
Best free version: https://mapshaper.org/
Somehow it does not work well for zip3 shape, but it helps covert large GeoJSON to the smaller version

梵总

All data:
http://census.ire.org/data/bulkdata.html

Another working converter:
https://ogre.adc4gis.com/

梵总

make d3 responsible: https://eyeseast.github.io/visible-data/2013/08/26/responsive-d3/