Bravo to Philip for his block. This version is only slighly modified.
Changes:
There are two sections where you could consider working with the data (exercising the array methods discussed in class). I've indicated them with comments. For example, you could filter the earthquake data and/or the countries -- both are available as arrays. You should also try experimenting with the CSS, to change the styling of the map.
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <title>filupmybowl v2</title> | |
| <style> | |
| body { | |
| position: absolute; | |
| margin: 0px; | |
| } | |
| svg { | |
| background-color: #4682b4; | |
| } | |
| .info { | |
| font-family: sans-serif; | |
| color: #000; | |
| position: absolute; | |
| top: 450px; | |
| left: 50px; | |
| } | |
| </style> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.js"></script> | |
| <body> | |
| <script> | |
| var width = 960; | |
| var height = 500; | |
| // Projection | |
| var projection = d3.geo.mercator(); | |
| // Path | |
| var path = d3.geo.path().projection(projection); | |
| // Building container/canvas - needed to draw the visualization | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width) | |
| .attr("height", height); | |
| var layer2 = svg.append("g"); | |
| var layer1 = svg.append("g"); | |
| // Get country data | |
| var url = "https://gist.githubusercontent.com/pbogden/8c6bcd912f9edebab99d/raw/countries.json"; | |
| d3.json(url, plotCountries); | |
| // Get earthquake data | |
| var quakes = "http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_month.geojson"; | |
| d3.json(quakes, plotQuakes); | |
| // Plot the earthquakes | |
| function plotQuakes(error, data){ | |
| if (error) console.log(error); | |
| console.log(data); | |
| // Put your code here (if you want to manipulate the earthquakes) | |
| // Bind the earthquake data | |
| var group = layer1.selectAll("g") | |
| .data(data.features) | |
| .enter(); | |
| // Plot the earthquakes | |
| group.append("path") | |
| .attr("d", path) | |
| .attr("class", "area") | |
| .attr("fill", "red"); | |
| // Label the earthquakes | |
| group.append("text") | |
| .attr("x", function (d) { return path.centroid(d)[0]; }) | |
| .attr("y", function (d) { return path.centroid(d)[1]; }) | |
| .text(function(d) { return d.properties.mag;}); | |
| } | |
| // Plot the countries | |
| function plotCountries(error, json) { | |
| // Create array of GeoJSON features -- this defines the global variable "data" | |
| data = json.objects.ne_50m_admin_0_countries.geometries | |
| .map(function(d) { return topojson.feature(json, d); }); | |
| // Put your code here (if you want to manipulate the countries) | |
| // Plot the features | |
| layer2.selectAll("path") | |
| .data(data) | |
| .enter() | |
| .append("path") | |
| .attr("d", path) | |
| .attr("stroke", "black") | |
| .attr("fill", "grey"); | |
| } | |
| </script> |