Built with blockbuilder.org
forked from anonymous's block: fresh block
license: mit |
Built with blockbuilder.org
forked from anonymous's block: fresh block
!DOCTYPE html> | |
<meta charset="utf-8"> | |
<title>Class 5</title> | |
<style> | |
body { | |
position: absolute; | |
margin: 0px; | |
font: 16px sans-serif; | |
} | |
svg { | |
background-color: #4682b4; | |
} | |
.info { | |
color: #000; | |
position: absolute; | |
top: 450px; | |
left: 800px; | |
} | |
path { | |
fill: #555555; | |
stroke: #aaaaaa; | |
} | |
path.quake { | |
fill: crimson; | |
} | |
</style> | |
<script src="https://d3js.org/d3.v4.min.js"></script> | |
<script src="//d3js.org/d3-tile.v0.0.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 layer1 = svg.append("g"); | |
var layer2 = svg.append("g"); | |
var info = d3.select("body").append("div") | |
.attr("class", "info"); | |
// NEW: Title | |
svg.append('text') | |
.attr('x', width / 2) | |
.attr('y', "1.5em") | |
.style('font-size', '1.5em') | |
.style('text-anchor', 'middle') | |
.text('Earthquakes in the last week') | |
var projection = d3.geoAlbersUsa(); | |
var path = d3.geoPath() | |
.projection(projection); | |
var Oklahoma = "https://raw.githubusercontent.com/deldersveld/topojson/master/countries/us-states/OK-40-oklahoma-counties.json" | |
d3.json(Oklahoma, function(error, Oklahoma) { | |
if (error) throw error; | |
var tiles = d3.tile() | |
.size([width, height]) | |
.scale(projection.scale() * tau) | |
.translate(projection([0, 0])) | |
(); | |
svg.selectAll("image") | |
.data(tiles) | |
.enter().append("image") | |
.attr("xlink:href", function(d) { return "http://" + "abc"[d[1] % 3] + ".tile.openstreetmap.org/" + d[2] + "/" + d[0] + "/" + d[1] + ".png"; }) | |
.attr("x", function(d) { return (d[0] + tiles.translate[0]) * tiles.scale; }) | |
.attr("y", function(d) { return (d[1] + tiles.translate[1]) * tiles.scale; }) | |
.attr("width", tiles.scale) | |
.attr("height", tiles.scale); | |
}); | |
//Earthquake map | |
var base = "https://gist.githubusercontent.com/pbogden/935370a5272acff2618b/raw/f4d102d819066bb21a0021b4cbab6502e86bf587/"; | |
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 + "ok.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) }); | |
var layer2 = svg.append("g"); | |
// 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); | |
var layer1 = svg.append("g"); | |
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> | |
</body> | |
</script> |