| license: mit |
Built with blockbuilder.org
forked from li01012's block: may4thproject1.0
geojson for Texas https://raw.githubusercontent.com/TNRIS/tx.geojson/master/counties/tx_counties.geojson
https://raw.githubusercontent.com/TNRIS/tx.geojson/master/counties/tx_counties.geojson
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <title>class-02 demo</title> | |
| <style> | |
| .line { | |
| fill: none; | |
| stroke: black; | |
| stroke-width: 1px; | |
| } | |
| rect { | |
| fill: none; | |
| stroke: black; | |
| stroke-width: 1px; | |
| } | |
| path.quake, circle.quake { | |
| fill: crimson; | |
| fill-opacity: 0.4; | |
| } | |
| path.counties, path.county-border { | |
| fill: none; | |
| stroke: #000; | |
| stroke-opacity: .2; | |
| } | |
| path.state { | |
| fill: none; | |
| stroke: #000; | |
| } | |
| </style> | |
| <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; | |
| var height = 500; | |
| var smallest = 2.5; // threshold magnitude | |
| var data = null; // global variable | |
| // Set the map projection centered on Oklahoma | |
| var projection = d3.geoAlbersUsa() | |
| .scale(7543) | |
| .translate([702, -186]); | |
| var path = d3.geoPath() | |
| .pointRadius(5) | |
| .projection(projection); | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width) | |
| .attr("height", height); | |
| var layer1 = svg.append("g"); | |
| var layer2 = svg.append("g"); | |
| var url = https://raw.githubusercontent.com/TNRIS/tx.geojson/master/counties/tx_counties.geojson"; | |
| var usgs = "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_week.geojson"; | |
| // Read and plot the earthquake data | |
| var url = base + "quakes.json"; | |
| d3.json(url, plotQuakes); | |
| //d3.json(usgs, plotQuakes); | |
| // Read and plot the state & county boundaries | |
| d3.json(base + "tx.json", plotState); | |
| function plotQuakes(error, json) { | |
| if (error) console.log(error); | |
| // Assign the json to a global so we can manipulate it in the console | |
| data = json; | |
| // Filter the small earthquakes | |
| var features = data.features.filter(function(d) { return (+ d.properties.mag >= smallest) }); | |
| // Plot the earthquakes | |
| layer2.selectAll("path.quake") | |
| .data(features) | |
| .enter().append("path") | |
| .attr("class", "quake") | |
| .attr("d", path) | |
| } | |
| function plotState(error, ok) { | |
| if (error) console.log(error); | |
| var objects = ok.objects.ok; | |
| var all = topojson.merge(ok, objects.geometries); | |
| layer1.append("path") | |
| .datum(all) | |
| .attr("class", "state") | |
| .attr("d", path); | |
| layer1.append("path") | |
| .datum(topojson.mesh(ok, objects, function(a, b) { return a !== b; })) | |
| .attr("class", "county-border") | |
| .attr("d", path); | |
| } | |
| </script> |