Working with TopoJSON and d3.js projections for mapping geospatial data.
forked from mbostock's block: U.S. Counties TopoJSON
forked from almccon's block: d3 + TopoJSON
forked from almccon's block: d3 + TopoJSON
license: gpl-3.0 |
Working with TopoJSON and d3.js projections for mapping geospatial data.
forked from mbostock's block: U.S. Counties TopoJSON
forked from almccon's block: d3 + TopoJSON
forked from almccon's block: d3 + TopoJSON
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<style> | |
path { | |
fill: #ccc; | |
stroke: #fff; | |
stroke-width: .5px; | |
} | |
path:hover { | |
fill: #ddd; | |
} | |
</style> | |
<body> | |
<script src="//d3js.org/d3.v4.min.js"></script> | |
<script src="//d3js.org/topojson.v1.min.js"></script> | |
<script src="https://d3js.org/d3-interpolate.v0.9.min.js"></script> | |
<script src="https://d3js.org/d3-color.v0.5.min.js"></script> | |
<script src="https://d3js.org/d3-scale-chromatic.v0.3.min.js"></script> | |
<script> | |
var width = 960, | |
height = 500; | |
var projection = d3.geoAlbersUsa() | |
var path = d3.geoPath(projection); | |
var svg = d3.select("body").append("svg") | |
.attr("width", width) | |
.attr("height", height); | |
var url = "https://gist.githubusercontent.com/mbostock/4090846/raw/d534aba169207548a8a3d670c9c2cc719ff05c47/us.json" | |
var tornado_url = "https://gist.githubusercontent.com/almccon/fe3bc0328b0ed0b0e1fcdfc09b63b9af/raw/7eab26fee34977c42cb39bb951f2e19572153dff/tornado_1.geojson"; | |
d3.json(url, function(error, topology) { | |
d3.json(tornado_url, function(error, tornados) { | |
if (error) throw error; | |
console.log("topojson", topology) | |
var geojson = topojson.feature(topology, topology.objects.states); | |
console.log("geojson", geojson) | |
svg.append("g").selectAll("path") | |
.data(geojson.features) | |
.enter().append("path") | |
.attr("d", path); | |
console.log("tornados", tornados); | |
var colorScale = d3.scaleSequential(d3.interpolateRdYlBu); | |
var yearScale = d3.scaleLinear() | |
.domain([1950,2018]) | |
.range([0,1]) | |
svg.append("g").selectAll("path") | |
.data(tornados.features) | |
.enter() | |
.filter(function(d) { | |
return (d.properties.mag > 1); | |
}) | |
.append("path") | |
.attr("opacity",0.0001) | |
.transition() | |
.delay(function(d){ | |
return 5000*yearScale(+d.properties.yr); | |
}) | |
.attr("d", path) | |
.style("stroke", function(d) { | |
return colorScale(yearScale(+d.properties.yr)); | |
}) | |
.transition().duration(1000) | |
.attr("opacity",1) | |
.transition() | |
.delay(function(d){ | |
return 4000; | |
}) | |
.filter(function(d){ return +d.properties.yr < 2000;}) | |
.transition().duration(1000) | |
.attr("opacity",0.0001) | |
.style("display","none") | |
}); | |
}); | |
</script> |