D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
MTClass
Full window
Github gist
class 3 - states // source http://jsbin.com/liqono
<!DOCTYPE html> <meta charset="utf-8"> <title>class 3 - states</title> <style> body { position: absolute; margin: 0px; } svg { background-color: #4682b4; } .info { font-family: sans-serif; color: #000; position: absolute; top: 450px; left: 800px; } path { fill: #555555; stroke: #aaaaaa; } </style> <h3>Map Showing Earthquakes in US</h3> <script src="https://d3js.org/d3.v4.min.js"></script> <script src="https://d3js.org/topojson.v2.min.js"></script> <body> <script> var width = 960, height = 500; var data; // declare a global variable var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height) .on("mousemove", mousemoved); var layer = svg.append('g'); var layer2 = svg.append('g'); var info = d3.select("body").append("div") .attr("class", "info"); var projection = d3.geoAlbersUsa(); var path = d3.geoPath() .projection(projection); var pathQuake = d3.geoPath() .pointRadius(5) .projection(projection); var usgs = "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_week.geojson"; d3.json(usgs, plotQuakes); function plotQuakes(error, data) { if (error) console.log(error); // Filter the small earthquakes var features = data.features; // Plot the earthquakes layer2.selectAll("path.quake") .data(features) .enter().append("path") .attr("class", "quake") .style('fill','crimson') .attr("d", path) } // If you use this URL, you won't need your own copy of the data. var url = "https://umbcvis.github.io/classes/class-03/us.json" d3.json(url, plotStates); function plotStates(error, json) { // Create array of GeoJSON features -- this defines the global variable "data" data = json.objects.us.geometries.map(function(d) { return topojson.feature(json, d); }) // Put your code here // Plot the features layer.selectAll("path") .data(data) .enter() .append("path") .attr("d", path); } function mousemoved() { info.text(formatLocation(projection.invert(d3.mouse(this)), projection.scale())); } function formatLocation(p, k) { var format = d3.format("." + Math.floor(Math.log(k) / 2 - 2) + "f"); return (p[1] < 0 ? format(-p[1]) + "°S" : format(p[1]) + "°N") + " " + (p[0] < 0 ? format(-p[0]) + "°W" : format(p[0]) + "°E"); } var map; function initMap() { map = new google.maps.Map(document.getElementById('map'), { zoom: 2, center: new google.maps.LatLng(2.8,-187.3), mapTypeId: 'terrain' }); // Create a <script> tag and set the USGS URL as the source. var script = document.createElement('script'); // This example uses a local copy of the GeoJSON stored at // https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp script.src = 'https://developers.google.com/maps/documentation/javascript/examples/json/earthquake_GeoJSONP.js'; document.getElementsByTagName('head')[0].appendChild(script); } // Loop through the results array and place a marker for each // set of coordinates. window.eqfeed_callback = function(results) { for (var i = 0; i < results.features.length; i++) { var coords = results.features[i].geometry.coordinates; var latLng = new google.maps.LatLng(coords[1],coords[0]); var marker = new google.maps.Marker({ position: latLng, map: map }); } } </script>
https://d3js.org/d3.v4.min.js
https://d3js.org/topojson.v2.min.js