Map of all M2.5+ earthquakes of the last 24h.
Tectonic plate boundaries extracted from arcgis.com
Map of all M2.5+ earthquakes of the last 24h.
Tectonic plate boundaries extracted from arcgis.com
var width = 960, | |
height = width / 2; | |
var opacity = d3.scale.linear() | |
.domain([0, 24*3600*1000]) | |
.range([1, 0.5]); | |
var radius = d3.scale.pow() | |
.domain([0, 10]) | |
.range([0, 75]); | |
var projection = d3.geo.naturalEarth() | |
.translate([width/2, height/2]) | |
.scale(150/900*width); | |
var path = d3.geo.path() | |
.projection(projection); | |
var graticule = d3.geo.graticule(); | |
var svg = d3.select("#map") | |
.attr("width", width) | |
.attr("height", height); | |
svg.append("path") | |
.datum(graticule.outline) | |
.attr("class", "water") | |
.attr("d", path); | |
svg.append("g") | |
.attr("class", "graticule") | |
.selectAll("path") | |
.data(graticule.lines) | |
.enter().append("path") | |
.attr("d", path); | |
var focus = svg.append("text") | |
.attr("class", "focus"); | |
d3.json("world-110m.json", function(error, world) { | |
svg.insert("path", ".graticule") | |
.datum(topojson.object(world, world.objects.land)) | |
.attr("class", "land") | |
.attr("d", path); | |
svg.insert("path", ".graticule") | |
.datum(topojson.mesh(world, world.objects.countries, function(a, b) { return a.id !== b.id; })) | |
.attr("class", "borders") | |
.attr("d", path); | |
}); | |
d3.json('tectonics.json', function(err, data) { | |
svg.insert("path", ".graticule") | |
.datum(topojson.object(data, data.objects.tec)) | |
.attr("class", "tectonic") | |
.attr("d", path); | |
}); | |
d3.json('http://www.corsproxy.com/earthquake.usgs.gov/earthquakes/feed/geojson/2.5/day', function(err, data) { | |
var quakes = svg.append("g") | |
.attr("class", "quakes") | |
.selectAll(".quake") | |
.data(data.features.reverse()) | |
.enter().append("g") | |
.attr("class", "quake") | |
.attr("transform", function(d) { | |
return "translate(" + projection(d.geometry.coordinates)[0] + "," + projection(d.geometry.coordinates)[1] + ")"; | |
}) | |
.attr("opacity", function(d) { | |
return opacity(Date.now() - d.properties.time) | |
}) | |
.on("mouseover", function() { | |
focus.style("opacity", 1); | |
}) | |
.on("mouseout", function() { | |
focus.style("opacity", 0); | |
}) | |
.on("mousemove", function(d) { | |
var o = projection(d.geometry.coordinates); | |
focus | |
.text(d.properties.mag + ' ' + moment(+d.properties.time).calendar()) | |
.attr("dy", +20) | |
.attr("text-anchor", "middle") | |
.attr("transform", "translate(" + o[0] + "," + o[1] + ")" ); | |
}); | |
quakes.append("circle") | |
.attr("r", 2) | |
.style("fill", function(d) { | |
return "rgb(222, 45, 38)"; // color( +d.geometry.coordinates[2] ); | |
}); | |
setInterval(function() { | |
quakes.append("circle") | |
.attr("r", 0) | |
.style("stroke", function(d) { | |
return "rgb(222, 45, 38)"; // color( +d.geometry.coordinates[2] ); | |
}) | |
.style("stroke-width", 2) | |
.transition() | |
.ease("linear") | |
.duration(function(d) { return 125*radius(d.properties.mag); }) | |
.attr("r", function(d) { return radius(d.properties.mag); }) | |
.style("stroke-opacity", 0) | |
.style("stroke-width", 0) | |
.remove(); | |
}, 1000); | |
}); |
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="utf-8"> | |
<title></title> | |
<link href="style.css" media="screen" rel="stylesheet" type="text/css" /> | |
</head> | |
<body> | |
<!-- Content begin --> | |
<svg id="map"></svg> | |
<!-- Content end --> | |
<!-- Dependencies begin--> | |
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.0.0/moment.min.js"></script> | |
<!-- d3 --> | |
<script src="http://d3js.org/d3.v3.min.js"></script> | |
<script src="http://d3js.org/d3.geo.projection.v0.min.js"></script> | |
<script src="http://d3js.org/topojson.v0.min.js"></script> | |
<!-- Dependencies end--> | |
<script src="app.js" type="text/javascript"></script> | |
</body> | |
</html> |
body { | |
font: 10px sans-serif; | |
} | |
.water { | |
fill: #a4bac7; | |
} | |
.graticule { | |
fill: none; | |
stroke: #fff; | |
stroke-width: .5px; | |
} | |
.graticule :nth-child(2n+16) { | |
stroke-dasharray: 2,2; | |
} | |
.graticule :nth-child(-2n+15) { | |
stroke-dasharray: 2,2; | |
} | |
.tectonic { | |
fill: none; | |
stroke: #000; | |
opacity: 0.5; | |
} | |
.land { | |
fill: #d7c7ad; | |
stroke: #766951; | |
} | |
.borders { | |
fill: none; | |
stroke: #a5967e; | |
} | |
.quake { | |
fill: rgba(0,0,0,0); | |
stroke-width: 1.5px; | |
} |