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>
-
-
Here is the zip level GeoJSON:
https://github.com/OpenDataDE/State-zip-code-GeoJSONHere 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+DataShape 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.htmlAnother working converter:
https://ogre.adc4gis.com/
-
make d3 responsible: https://eyeseast.github.io/visible-data/2013/08/26/responsive-d3/