Class6

Built with blockbuilder.org

forked from anonymous's block: Class6

<!DOCTYPE html>
<meta charset="utf-6">
<style>

body {
  font: 12px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #0002;
  shape-rendering: none;
}

.dot {
  fill: orchid;
  stroke: #008;
}
  
.dot:hover {
  fill: lightGreen;
}
  
div.tooltip {   
  position: absolute;     
  text-align: center;
  vertical-align: top;   
  width: 100px;                  
  height: 25px;                 
  padding: 18px; 
  color: #6d6d6d;          
  font-size: 12px;
  font-weight: bold;
  line-height: 70%;
  background: #bcfffd;
  box-shadow: 4px 4px 2px rgba(0, 0, 0, 0.4);
  border: 2px;  
  border-radius: 2px;  
  pointer-events: none;                  
} 
  
</style>
<body>
<svg width="960" height="500"></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: 20, 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_week.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]; });
  
  // 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(10));
  
  // 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", ".75em")
    .style("text-anchor", "middle")
    .style("font-size", "15px")
    .text("Magnitude");
  
  // Add a title using D3.js
svg.append("text")
  .attr("x", (width / 2))
  .attr("y", (height / 18))
  .attr("text-anchor", "middle")
  .style("font-size", "32px")
  .style("font-family", "sans-serif")
  .attr("fill", "white")
  .text("Earthquakes in Last 7 Days by Magnitude");

// 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>Mag</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(10)
          .style("opacity", 30);
      });
});

</script>

https://d3js.org/d3.v4.min.js