Basic US map using D3 and topojson. Each state gets colored and neighbors should never be the same color. Also has some mousein/mouseout functions for highlighting the state your cursor is over
forked from ericcoopey's block: D3 US Map with Hover
Last active
July 14, 2017 15:04
-
-
Save thadk/7e60f9a020aee8fa50ace7b65c41fd71 to your computer and use it in GitHub Desktop.
Liberia Map with Hover
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| license: mit |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| .states { | |
| stroke: #000; | |
| fill-opacity: .7; | |
| } | |
| .symbol { | |
| fill: steelblue; | |
| fill-opacity: .8; | |
| stroke: #fff; | |
| } | |
| .labs { | |
| fill: #444; | |
| pointer-events: none; | |
| font-family: "Helvetica","Arial"; | |
| font-weight: bold; | |
| paint-order:"stroke"; | |
| stroke: #cfe0e7; | |
| stroke-width: .18; | |
| stroke-opacity": .9; | |
| stroke-linecap": butt; | |
| stroke-linejoin: miter; | |
| } | |
| </style> | |
| <body> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <script src="https://d3js.org/topojson.v3.min.js"></script> | |
| <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-queue/3.0.7/d3-queue.js"></script> | |
| <script> | |
| function wrap(text, width) { | |
| text.each(function() { | |
| var text = d3.select(this), | |
| words = text.text().split(/\s+/).reverse(), | |
| word, | |
| line = [], | |
| lineNumber = 0, | |
| lineHeight = 1.1, // ems | |
| y = text.attr("y"), | |
| dy = parseFloat(text.attr("dy")), | |
| tspan = text.text(null).append("tspan").attr("x", 0).attr("y", y).attr("dy", dy + "em"); | |
| while (word = words.pop()) { | |
| line.push(word); | |
| tspan.text(line.join(" ")); | |
| if (tspan.node().getComputedTextLength() > width) { | |
| line.pop(); | |
| tspan.text(line.join(" ")); | |
| line = [word]; | |
| tspan = text.append("tspan").attr("x", -18).attr("y", y).attr("dy", ++lineNumber * lineHeight + dy + "em").text(word); | |
| } | |
| } | |
| }); | |
| } | |
| var width = 635, | |
| height = 600; | |
| var radius = d3.scaleSqrt() | |
| .domain([0, 1e6]) | |
| .range([0, 10]); | |
| var projection = d3.geoMercator() | |
| .scale(width / 0.027 / Math.PI) | |
| //.scale(100) | |
| .translate([width / 0.36, height / 2.68855296]) | |
| .rotate([0, 0, 35]) | |
| // var projection = d3.geoMercator() | |
| // .scale(width / 0.45 / Math.PI) | |
| // .scale(500) | |
| // .translate([width / 500, height / 840]) | |
| // .rotate([74 + 30 / 60, -38 - 50 / 60]) | |
| var path = d3.geoPath() | |
| .projection(projection) | |
| var color = d3.scaleOrdinal(d3.schemeCategory10); | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width) | |
| .attr("height", height); | |
| d3.queue() | |
| .defer(d3.json, "latestverion.json") | |
| .defer(d3.json, "county-labels-2.json") | |
| .defer(d3.json, "https://www.staging2.liberianobserver.com/wp-json/wp/v2/county?per_page=100") | |
| .await(ready); | |
| function ready(error, us, labels,wordpress) { | |
| var countries = topojson.feature(us, us.objects.latestverion).features, | |
| neighbors = topojson.neighbors(us.objects.latestverion.geometries); | |
| // Compute the feature bounds and centroid | |
| // var bounds = d3.geoBounds(countries), | |
| // center = d3.geoCentroid(countries); | |
| // // Compute the angular distance between bound corners | |
| // var distance = d3.geoDistance(bounds[0], bounds[1]), | |
| // scale = height / distance / Math.sqrt(2); | |
| // Update the projection scale and centroid | |
| // projection.scale(scale).center(center); | |
| svg.selectAll("states") | |
| .data(countries) | |
| .enter().insert("path", ".graticule") | |
| .attr("class", "states") | |
| .attr("d", path) | |
| .style("fill", function(d, i) { | |
| return color(d.color = d3.max(neighbors[i], function(n) { return countries[n].color; }) + 1 | 0); | |
| }) | |
| .on('mouseover', function(d, i) { | |
| console.log(wordpress) | |
| var currentState = this; | |
| d3.select(this). | |
| style('fill-opacity', 1); | |
| }) | |
| .on('mouseout', function(d, i) { | |
| d3.selectAll('path') | |
| .style( | |
| 'fill-opacity',0.7 | |
| ); | |
| }) | |
| .on('click', function(d, i) { | |
| console.log('yo', this); | |
| }); | |
| /* Calculated using https://github.com/andrewharvey/geojson-polygon-labels and tweaked*/ | |
| svg.selectAll(".labs") | |
| .data(labels.features) | |
| .enter().append("text") | |
| .attr("class", "labs") | |
| .attr("transform", function(d) { return "translate(" + projection(d.geometry.coordinates) + ")"; }) | |
| .attr("dy", "-0.15em") | |
| .attr("dx", "-0.85em") | |
| .text(function(d,i) { return (d.properties.CCNAME).toString(); }) | |
| .call(wrap, 60); | |
| } | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment