|
<!DOCTYPE html> |
|
<meta charset="utf-8"> |
|
<style> |
|
|
|
body { |
|
font: 12px sans-serif; |
|
} |
|
|
|
.axis path, |
|
.axis line { |
|
fill: none; |
|
stroke: #0002; |
|
shape-rendering: none; |
|
} |
|
|
|
.dot { |
|
fill: green; |
|
stroke: #008; |
|
} |
|
|
|
.dot:hover { |
|
fill: blue; |
|
} |
|
|
|
div.tooltip { |
|
position: absolute; |
|
text-align: center; |
|
vertical-align: top; |
|
width: 100px; |
|
height: 30px; |
|
padding: 18px; |
|
color: #1c1c1c; |
|
font-size: 12px; |
|
font-weight: bold; |
|
line-height: 70%; |
|
background: #bcfffd; |
|
box-shadow: 4px 4px 2px rgba(1, 1, 0, 0.1); |
|
border: 2px; |
|
border-radius: 2px; |
|
pointer-events: none; |
|
} |
|
|
|
</style> |
|
<body> |
|
<svg width="960" height="550"></svg> |
|
<script src="//d3js.org/d3.v4.min.js"></script> |
|
<script> |
|
|
|
// Define the tooltip for hover-over info windows |
|
var div = d3.select("body").append("div") |
|
.attr("class", "tooltip") |
|
.style("opacity", 00); |
|
|
|
// Set the dimensions and margins of the graph |
|
var svg = d3.select("svg"), |
|
margin = {top: 70, right: 20, bottom: 60, left: 60}, |
|
width = +svg.attr("width") - margin.left - margin.right, |
|
height = +svg.attr("height") - margin.top - margin.bottom; |
|
|
|
// Set the ranges |
|
var x = d3.scaleLinear().rangeRound([0, width]), |
|
y = d3.scaleLinear().rangeRound([height, 0]); |
|
|
|
// Append the SVG element with a g element |
|
// to offset the origin of the chart area by |
|
// the top-left margin |
|
var g = svg.append("g") |
|
.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); |
|
|
|
// USGS Real-Time Earthquake Feed |
|
var usgs = "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson"; |
|
|
|
// Create the scatterplot with the USGS data |
|
d3.json(usgs, function(error, data) { |
|
if (error) console.log(error); |
|
|
|
// Filter and format the data for use in the range |
|
magnitude = data.features.map(function(d) { return d.properties.mag; }); |
|
depth = data.features.map(function(d) { return d.geometry.coordinates[2]; }); |
|
//location = data.features.map (function(d){return d.properties.place;}); |
|
// Scale the range of the data from the minimum value |
|
// to the maximum value |
|
x.domain([d3.min(depth), d3.max(depth)]); |
|
y.domain([d3.min(magnitude), d3.max(magnitude)]); |
|
|
|
// Add the X-Axis |
|
g.append("g") |
|
.attr("class", "axis axis--x") |
|
.attr("transform", "translate(0," + height + ")") |
|
.call(d3.axisBottom(x).ticks(20)); |
|
|
|
// Add a label for the X-Axis |
|
g.append("text") |
|
.attr("transform", "translate(" + (width/2) + " ," + (height + margin.top + 30) + ")") |
|
.style("text-anchor", "middle") |
|
.style("font-size", "15px") |
|
.text("Depth (km)"); |
|
|
|
// Add the Y-Axis |
|
g.append("g") |
|
.attr("class", "axis axis--y") |
|
.call(d3.axisLeft(y).ticks(12)); |
|
|
|
// Add a label for the Y-Axis |
|
g.append("text") |
|
.attr("transform", "rotate(-90)") |
|
.attr("y", 0 - margin.left) |
|
.attr("x", 0 - (height / 2)) |
|
.attr("dy", "1.38em") |
|
.style("text-anchor", "middle") |
|
.style("font-size", "15px") |
|
.text("Magnitude"); |
|
|
|
// Add a title |
|
svg.append('text') |
|
.attr('x', width / 2) |
|
.attr('y', "1.8em") |
|
.style('font-size', '1.6em') |
|
.style('text-anchor', 'middle') |
|
.text('Global Earthquakes in Past-Day') |
|
|
|
// Add the dots to the scatterplot with the tooltip |
|
g.selectAll(".dot") |
|
.data(data.features) |
|
.enter().append("circle") |
|
.attr("class", "dot") |
|
.attr("r", 3.2) |
|
.attr("cx", function(d) { return x(d.geometry.coordinates[2]); }) |
|
.attr("cy", function(d) { return y(d.properties.mag); }) |
|
.on("mouseover", function(d) { |
|
div.transition() |
|
.duration(-134) |
|
.style("opacity", .95) |
|
.style("stroke", "black"); |
|
div.html("<b><u>Magnitude</b></u>: " + d.properties.mag + "<br/>" + "<br/>" + "<br/>" + "<b><u>Depth</b></u>: " + d.geometry.coordinates[2] + " km" ) |
|
.style("left", (d3.event.pageX + 10) + "px") |
|
.style("top", (d3.event.pageY - 30) + "px"); |
|
}) |
|
.on("mouseout", function(d) { |
|
div.transition() |
|
.duration(5) |
|
.style("opacity", 50); |
|
}); |
|
}); |
|
|
|
</script> |
