Skip to content

Instantly share code, notes, and snippets.

@Ryshackleton Ryshackleton/index.html
Last active Mar 30, 2017

Embed
What would you like to do?
Maptime Seattle Earthquake Map
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- using D3 version 4-->
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/topojson.v2.min.js"></script>
<!-- could add CSS inside the <style> tags -->
<style>
</style>
</head>
<body>
<script>
var width = window.innerWidth,
height = window.innerHeight;
// define the map projection
var projection = d3.geoEquirectangular() // in D3 version 3 this will be:
.scale(height / Math.PI)
.translate([width / 2, height / 2]);
// set up the SVG
var svg = d3.select("body")
.append("svg");
svg.attr("width", width)
.attr("height", height)
.style("border","3px solid black")
.style("background-color","lightblue");
var todaysQuakesFeed =
"https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson";
// send a JSON request to the earthquake feed,
d3.json(todaysQuakesFeed, function(parsedJSON){ //-- result of the parsing is in parsedJSON
svg.selectAll("circle")
.data(parsedJSON.features) //-- notice that we refer to .features: an array just like before!
.enter().append("circle")
.attr("cx", function(d) { //-- this 'd' refers to A FEATURE in the array
var x = projection( d.geometry.coordinates ) [0];
return x;
})
.attr("cy", function(d) { //-- this 'd' refers to A FEATURE in the array
var y = projection( d.geometry.coordinates ) [1];
return y;
})
.transition()
.duration(500)
.delay(function(d,i){ return i * 100; })
.ease(d3.easeElastic)
.attr("r", function(d){ return d.properties.mag > 0 ? 1.5 * d.properties.mag : 0; } )
.attr("r", function(d){ return d.properties.mag > 0 ? 1.5 * d.properties.mag : 0; } )
.style("fill", "rgb(255, 255, 0)")
.style("stroke", "black")
.style("stroke-width", 1)
.style("opacity", 0.5);
});
function drawCountryBoundaries() {
// define the path generator (this should really be at the top)
var path = d3.geoPath()
.projection(projection);
// send a JSON request to get the world boundaries
var worldBoundariesURL = "https://ryshackleton.github.io/d3_maptime/data/world-topo-min.json";
d3.json(worldBoundariesURL, function(world) {
// create a group <g> element at the front of the SVG
// (this ensures that our country boundaries will be below everything else)
var g = d3.select("svg") // select the svg
.insert("g",":first-child") // insert a group element at the top of svg
.attr("id","country-boundaries"); // give the group an id for reference
// Draw the world map boundaries on the <g> element
g.selectAll("path")
.data(topojson.feature(world,world.objects.countries).features)
.enter().append("path")
.attr("d", path ) // ask d3.geoPath() to define the SVG drawing path
.style("fill","#e5e5e5")
.style("stroke","#333")
.style("stroke-linejoin","round");
});
}
drawCountryBoundaries();
</script>
</body>
</html>
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.