Skip to content

Instantly share code, notes, and snippets.

@thadk

thadk/.block

Last active July 14, 2017 15:04
Show Gist options
  • Save thadk/7e60f9a020aee8fa50ace7b65c41fd71 to your computer and use it in GitHub Desktop.
Save thadk/7e60f9a020aee8fa50ace7b65c41fd71 to your computer and use it in GitHub Desktop.
Download ZIP
Liberia Map with Hover
Raw
.block
license: mit
Raw
README.md

D3 US Map with Hover

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

Display the source blob
Display the rendered blob
Raw
county-labels-2.geojson
{"type":"FeatureCollection","features":[{"type":"Feature","properties":{"_area":1921252667.4201603,"OBJECTID_1":1,"OBJECTID":1,"CCNAME":"Bomi","COUNT_":273,"SUM_TOTAL":84119,"SUM_MALE":42940,"SUM_FEMALE":41179,"SUM_HH":0,"FIRST_CCOD":"03","Area":737.110961321,"Acres":471752.891295,"Hectares":190911.621792,"Density":114,"Shape_Leng":737.110944144,"Shape_Le_1":267998.805685,"Shape_Area":1909116220.77},"geometry":{"type":"Point","coordinates":[-10.833128426111855,6.729591516886678]}},{"type":"Feature","properties":{"_area":8761815430.992508,"OBJECTID_1":2,"OBJECTID":2,"CCNAME":"Bong","COUNT_":927,"SUM_TOTAL":333481,"SUM_MALE":164859,"SUM_FEMALE":168622,"SUM_HH":69810,"FIRST_CCOD":"06","Area":3358.80721508,"Acres":2149645.16628,"Hectares":869930.534705,"Density":99,"Shape_Leng":3358.807138,"Shape_Le_1":644857.648994,"Shape_Area":8699305325.64},"geometry":{"type":"Point","coordinates":[-9.504006042137847,6.937614456736974]}},{"type":"Feature","properties":{"_area":9903339885.944155,"OBJECTID_1":3,"OBJECTID":3,"CCNAME":"Gbarpolu","COUNT_":148,"SUM_TOTAL":83388,"SUM_MALE":43906,"SUM_FEMALE":39482,"SUM_HH":14533,"FIRST_CCOD":45,"Area":3797.96471717,"Acres":2430707.08534,"Hectares":983672.257928,"Density":22,"Shape_Leng":3797.96463007,"Shape_Le_1":617668.420463,"Shape_Area":9836722576.8},"geometry":{"type":"Point","coordinates":[-10.245517331107575,7.436813830571268]}},{"type":"Feature","properties":{"_area":7900427941.643772,"OBJECTID_1":4,"OBJECTID":4,"CCNAME":"Grand Bassa","COUNT_":468,"SUM_TOTAL":221693,"SUM_MALE":110913,"SUM_FEMALE":110780,"SUM_HH":47440,"FIRST_CCOD":"09","Area":3028.66546195,"Acres":1938353.60402,"Hectares":784423.873133,"Density":73,"Shape_Leng":3028.66539291,"Shape_Le_1":616960.09296,"Shape_Area":7844238721.47},"geometry":{"type":"Point","coordinates":[-9.913727152966624,6.1589510756510215]}},{"type":"Feature","properties":{"_area":4755610265.456942,"OBJECTID_1":5,"OBJECTID":5,"CCNAME":"Cape Mount","COUNT_":278,"SUM_TOTAL":127076,"SUM_MALE":65679,"SUM_FEMALE":61397,"SUM_HH":23950,"FIRST_CCOD":12,"Area":1825.09357842,"Acres":1168064.5353,"Hectares":472698.946647,"Density":70,"Shape_Leng":1825.09353586,"Shape_Le_1":444888.258559,"Shape_Area":4726989460.79},"geometry":{"type":"Point","coordinates":[-11.10712301382338,7.174287218903513]}},{"type":"Feature","properties":{"_area":10804968936.16906,"OBJECTID_1":6,"OBJECTID":6,"CCNAME":"Grand Gedeh","COUNT_":176,"SUM_TOTAL":125258,"SUM_MALE":64994,"SUM_FEMALE":60264,"SUM_HH":18143,"FIRST_CCOD":15,"Area":4142.10501103,"Acres":2650957.74929,"Hectares":1072804.53932,"Density":30,"Shape_Leng":4142.1049146,"Shape_Le_1":716717.423286,"Shape_Area":10728045387.1},"geometry":{"type":"Point","coordinates":[-8.130277497826443,5.98478494685569]}},{"type":"Feature","properties":{"_area":3877879615.2479057,"OBJECTID_1":7,"OBJECTID":7,"CCNAME":"Grand Kru","COUNT_":130,"SUM_TOTAL":57913,"SUM_MALE":29648,"SUM_FEMALE":28265,"SUM_HH":8969,"FIRST_CCOD":18,"Area":1486.48543367,"Acres":951354.46086,"Hectares":384999.490991,"Density":39,"Shape_Leng":1486.48539854,"Shape_Le_1":320852.662737,"Shape_Area":3849994915.1},"geometry":{"type":"Point","coordinates":[-8.286836033230204,4.828659526451308]}},{"type":"Feature","properties":{"_area":9936506267.094515,"OBJECTID_1":8,"OBJECTID":8,"CCNAME":"Lofa","COUNT_":501,"SUM_TOTAL":276863,"SUM_MALE":133611,"SUM_FEMALE":143252,"SUM_HH":49642,"FIRST_CCOD":21,"Area":3809.68263078,"Acres":2438206.57987,"Hectares":986707.19569,"Density":73,"Shape_Leng":3809.68254387,"Shape_Le_1":725082.810709,"Shape_Area":9867071953.42},"geometry":{"type":"Point","coordinates":[-9.866909157679915,8.104590810139424]}},{"type":"Feature","properties":{"_area":2572594456.553381,"OBJECTID_1":9,"OBJECTID":9,"CCNAME":"Margibi","COUNT_":431,"SUM_TOTAL":209923,"SUM_MALE":105840,"SUM_FEMALE":104083,"SUM_HH":45095,"FIRST_CCOD":24,"Area":986.506108102,"Acres":631366.419981,"Hectares":255504.925159,"Density":213,"Shape_Leng":986.506085652,"Shape_Le_1":395671.907561,"Shape_Area":2555049248.82},"geometry":{"type":"Point","coordinates":[-10.283291644997348,6.651024300661962]}},{"type":"Feature","properties":{"_area":2286679008.318562,"OBJECTID_1":10,"OBJECTID":10,"CCNAME":"Maryland","COUNT_":171,"SUM_TOTAL":135938,"SUM_MALE":70855,"SUM_FEMALE":65083,"SUM_HH":19254,"FIRST_CCOD":27,"Area":876.763440953,"Acres":561130.833695,"Hectares":227081.591814,"Density":155,"Shape_Leng":876.763420444,"Shape_Le_1":313673.486985,"Shape_Area":2270815908.99},"geometry":{"type":"Point","coordinates":[-7.78486674004538,4.800743952994893]}},{"type":"Feature","properties":{"_area":1869234527.2808907,"OBJECTID_1":11,"OBJECTID":11,"CCNAME":"Montserrado","COUNT_":2250,"SUM_TOTAL":1118241,"SUM_MALE":549733,"SUM_FEMALE":568508,"SUM_HH":232585,"FIRST_CCOD":30,"Area":716.987395392,"Acres":458873.757883,"Hectares":185699.621416,"Density":1560,"Shape_Leng":716.987378735,"Shape_Le_1":393082.596747,"Shape_Area":1856996209.73},"geometry":{"type":"Point","coordinates":[-10.914999068151829,6.31125082800729]}},{"type":"Feature","properties":{"_area":11501457362.06781,"OBJECTID_1":12,"OBJECTID":12,"CCNAME":"Nimba","COUNT_":781,"SUM_TOTAL":462026,"SUM_MALE":230113,"SUM_FEMALE":231913,"SUM_HH":80734,"FIRST_CCOD":33,"Area":4408.43252718,"Acres":2821408.03747,"Hectares":1141783.32366,"Density":105,"Shape_Leng":4408.43242348,"Shape_Le_1":744975.828669,"Shape_Area":11417833214.2},"geometry":{"type":"Point","coordinates":[-8.742340143349232,6.913613345752466]}},{"type":"Feature","properties":{"_area":5087818816.191281,"OBJECTID_1":13,"OBJECTID":13,"CCNAME":"River Gee","COUNT_":108,"SUM_TOTAL":66789,"SUM_MALE":34863,"SUM_FEMALE":31926,"SUM_HH":9822,"FIRST_CCOD":42,"Area":1950.79306137,"Acres":1248512.52432,"Hectares":505255.092748,"Density":34,"Shape_Leng":1950.79301605,"Shape_Le_1":456441.152965,"Shape_Area":5052550930.6},"geometry":{"type":"Point","coordinates":[-7.696569260311589,5.310292069867986]}},{"type":"Feature","properties":{"_area":5569107361.449777,"OBJECTID_1":14,"OBJECTID":14,"CCNAME":"Rivercess","COUNT_":152,"SUM_TOTAL":71509,"SUM_MALE":37224,"SUM_FEMALE":34285,"SUM_HH":13981,"FIRST_CCOD":36,"Area":2134.53912055,"Acres":1366110.46985,"Hectares":552845.292863,"Density":34,"Shape_Leng":2134.53907094,"Shape_Le_1":475552.603784,"Shape_Area":5528452910.97},"geometry":{"type":"Point","coordinates":[-9.41681975080545,5.778064430263641]}},{"type":"Feature","properties":{"_area":9725449451.303009,"OBJECTID_1":15,"OBJECTID":15,"CCNAME":"Sinoe","COUNT_":218,"SUM_TOTAL":102391,"SUM_MALE":54767,"SUM_FEMALE":47624,"SUM_HH":15829,"FIRST_CCOD":39,"Area":3727.47947849,"Acres":2385596.35319,"Hectares":965416.592315,"Density":27,"Shape_Leng":3727.47939072,"Shape_Le_1":509328.598324,"Shape_Area":9654165890.06},"geometry":{"type":"Point","coordinates":[-8.774123721134835,5.300991990087627]}}]}
Display the source blob
Display the rendered blob
Raw
county-labels-2.json
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Display the source blob
Display the rendered blob
Raw
county-labels.json
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Display the source blob
Display the rendered blob
Raw
county07_14.json
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Raw
index.html
<!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/[email protected]/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>
Display the source blob
Display the rendered blob
Raw
latestverion.json
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Display the source blob
Display the rendered blob
Raw
LBR_adm1.json
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Display the source blob
Display the rendered blob
Raw
map.json
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Display the source blob
Display the rendered blob
Raw
us-state-centroids.json
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment