Skip to content

Instantly share code, notes, and snippets.

@piwodlaiwo

piwodlaiwo/.block

Created March 9, 2018 18:15
Show Gist options
  • Save piwodlaiwo/5092da8471092fb7232ebf889d9fa2bb to your computer and use it in GitHub Desktop.
Save piwodlaiwo/5092da8471092fb7232ebf889d9fa2bb to your computer and use it in GitHub Desktop.
Download ZIP
US without Alaska and Hawaii
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<style>
.states :hover {
fill: red;
}
.state-borders {
fill: none;
stroke: #fff;
stroke-width: 0.5px;
stroke-linejoin: round;
stroke-linecap: round;
pointer-events: none;
}
</style>
<svg width="1000" height="500"></svg>
<script src="https://unpkg.com/d3@4"></script>
<script src="https://unpkg.com/topojson-client@3"></script>
<script>
var svg = d3.select("svg");
var path = d3.geoPath();
d3.json("https://d3js.org/us-10m.v1.json", function(error, us) {
if (error) throw error;
var neighbors = topojson.neighbors(us.objects.states.geometries);
var areas = topojson.feature(us, us.objects.states).features;
//loop by neighbors to remove Alaska and Hawaii (as they dont have neighbors)
neighbors.forEach(function(n,i) {
//console.log(Object.keys(n).length);
if(Object.keys(n).length==0){
areas.splice(i,1)
}
});
svg.append("g")
.attr("class", "states")
.selectAll("path")
.data(areas)
.enter().append("path")
.attr("d", path);
svg.append("path")
.attr("class", "state-borders")
.attr("d", path(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; })));
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment