map with label


  • administrators

    <!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>
    

  • administrators