Skip to content

Instantly share code, notes, and snippets.

@sanandak

sanandak/README.md

Forked from benelsen/README.md
Created Apr 18, 2016
Embed
What would you like to do?
M2.5+ earthquakes during the last 24h

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;
}
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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
You can’t perform that action at this time.