Last active
March 30, 2017 18:14
-
-
Save Ryshackleton/52c97ff17236c2accccdadc47b122228 to your computer and use it in GitHub Desktop.
Maptime Seattle Earthquake Map
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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