D3 Examples - Time-based Data

Time-based Data
This code example is the result of the Module 6's exercise from the course “Data Visualization and Infographics with D3,” taught by Alberto Cairo and Scott Murray, and offered through the Knight Center for Journalism in the Americas at UT Austin.
It is a line chart that represents hours of the day of March 20, 2015 along the x axis using d3.time.scale() and values of the magnitude of earthquakes on the y axis using d3.scale.linear().
The underlying dataset was filtered to only include earthquakes that occurred in California, so the graph shows earthquakes during the course of the day, separated by magnitude.
Hovering over the dots reveals a tooltip with information of the exact time, magnitude, and geographic region.
xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link href='//fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
    <title>Exercise 6 - Time-based Data</title>
    <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
    <style type="text/css">
​
      body {
        font-family: 'Open Sans', sans-serif;
      }
​
      .wrapper {
        position: relative;
        background-color: rgba(226, 226, 226, 0.6);
        width: 940px;
      }
​
      header {
        width: 940px;
        padding-bottom: 20px;
      }
​
      h2 {
        width: 940px;
        margin: 0 20px 5px 20px;
        padding-top: 10px;
        color: #969696;
      }
​
      span {
        font-size: 12px;
      }
​
      p {
        margin: 5px 20px;
        color: #969696;
        font-size: 14px;
        line-height: 1.1em;
      }
​
      aside {
        position: absolute;
        width: 180px;
        left: 740px;
      }
​
      aside.legend {
        top: 140px;
      }
​
      aside.meta {
        bottom: 30px;
      }
​
      aside p {
        font-size: 12px;
      }
​
      a {
        color: #969696;
      }
​
      text {
        fill: #969696;
      }
​
      .legend line:first-of-type {
        stroke: #2ca02c;
        stroke-width: 3;
      }
​
      .legend line:last-of-type {
        stroke: #9467bd;
        stroke-width: 3;
      }
​
      .axis path {
        stroke: #969696;
        fill: none;
        shape-rendering: crispEdges;
      }
​
      .axis line {
        fill: none;
        stroke: #969696;
      }
​
      .axis text {
        font-size: 10px;
      }
​
      text.label {
        font-size: 12px;
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <header>
        <h2>Seismic Events in California on March 20, 2015</h2>
        <p>The line chart shows at what time the earthquake occured and its
          <a href="https://earthquake.usgs.gov/learn/glossary/?term=magnitude" target="_blank">
            magnitude
          </a>
        .</p>
        <aside class="legend">
          <p>Magnitude:</p>
          <svg width="180" height="80">
            <g transform="translate(20, 5)">
            <line x1="0" y1="10" x2="30" y2="10" />
            <text x="35" y="15">1.5 - 2.9</text>
            <line x1="0" y1="40" x2="30" y2="40" />
            <text x="35" y="45">0.0 - 1.4</text>
            </g>
          </svg>
        </aside>
        <aside class="meta">
        <p>The data was taken from a
          <a href="https://earthquake.usgs.gov/earthquakes/feed/v1.0/csv.php" target="_blank">
            real-time feed
          </a>
          (including hourly, daily, weekly, and monthly feeds) provided by the website of
          <a href="https://earthquake.usgs.gov/" target="_blank">
            US Geological Survey (USGS).
          </a>
          It is a subset filtered by the geographic region to represent the events that occured
          in California.
        </p>
      </aside>
​
      </header>
    </div>
    <script type="text/javascript">
      var margin,
        width,
        height,
        timeFormat,
        xScale,
        yScale,
        xAxis,
        yAxis,
        line,
        svg,
        circles,
        xAxisGroup,
        yAxisGroup
        ;
​
      margin = {
        top: 20,
        right: 20,
        bottom: 30,
        left: 40
      };
​
      width = 760 - margin.left - margin.right;
      height = 400 - margin.top - margin.bottom;
​
      timeFormat = d3.time.format("%H:%M");
​
      xScale = d3.time.scale()
                .range([0, width - margin.right]);
​
      yScale = d3.scale.linear()
                .range([height, 0]);
​
      xAxis = d3.svg.axis()
                .scale(xScale)
                .orient("bottom")
                .ticks(15)
                .tickFormat(timeFormat);
​
      yAxis = d3.svg.axis()
                .scale(yScale)
                .orient("left");
​
​
      line = d3.svg.line()
        .x(function(d) {
          return xScale(new Date(d.time));
        })
        .y(function(d) {
          return yScale(d.mag);
        });
​
      svg = d3.select(".wrapper")
        .append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
​
​
      d3.csv("earthquakes_all_day.csv", function(data) {
​
        var california_earthquakes,
          r1,
          r2,
          r3,
          circlesR1,
          circlesR2
          ;
​
        california_earthquakes = data.filter(function(d) {
          return d.place.indexOf("California") !== -1;
        });
​
        // Magnitude Range 1
        r1 = california_earthquakes.filter(function(d) {
          return d.mag >= 0 && d.mag < 1.5;
        });
​
        // Magnitude Range 2
        r2 = california_earthquakes.filter(function(d) {
          return d.mag >= 1.5 && d.mag < 3;
        });
​
        // Magnitude Range 3
        r3 = california_earthquakes.filter(function(d) {
          return d.mag >= 3;
        });
​
        xScale.domain(d3.extent(california_earthquakes, function(d) {
          return new Date(d.time);
        })).nice();
​
        yScale.domain(d3.extent(california_earthquakes, function(d) {
          return +d.mag;
        })).nice();
​
        svg.data([r1])
          .append("path")
          .attr("class", "line")
          .attr("d", line)
          .attr("fill", "none")
          .attr("stroke", "#9467bd")
          .attr("stroke-width", 2);
​
        svg.data([r2])
          .append("path")
          .attr("class", "line")
          .attr("d", line)
          .attr("fill", "none")
          .attr("stroke", "#2ca02c")
          .attr("stroke-width", 2);
​
        svg.data([r3])
          .append("path")
          .attr("class", "line")
          .attr("d", line)
          .attr("fill", "none")
          .attr("stroke", "#1f77b4")
          .attr("stroke-width", 2);
​
        circlesR1 = svg.selectAll("circle.r1")
          .data(r1)
          .enter()
          .append("circle");
​
        circlesR1.attr("cx", function(d) {
            return xScale(new Date(d.time));
          })
          .attr("cy", function(d) {
            return yScale(d.mag);
          })
          .attr("class", "r1")
          .attr("r", 3)
          .attr("fill", "#9467bd")
          .attr("stroke", "rgb(229, 229, 229)")
          .attr("stroke-width", "1")
          .append("title")
          .text(function(d) {
            return "Time: " + timeFormat(new Date(d.time)) + "\nMagnitude: " + d.mag + 
            "\nLocation: " + d.place;
          });
​
        circlesR2 = svg.selectAll("circle.r2")
          .data(r2)
          .enter()
          .append("circle");
​
        circlesR2.attr("cx", function(d) {
            return xScale(new Date(d.time));
          })
          .attr("cy", function(d) {
            return yScale(d.mag);
          })
          .attr("class", "r2")
          .attr("r", 3)
          .attr("fill", "#2ca02c")
          .attr("stroke", "rgb(229, 229, 229)")
          .attr("stroke-width", "1")
          .append("title")
          .text(function(d) {
            return "Time: " + timeFormat(new Date(d.time)) + "\nMagnitude: " + d.mag +
              "\nLocation: " + d.place;
          });
​
        xAxisGroup = svg.append("g")
          .attr("class", "x axis")
          .attr("transform", "translate(0, " + (height) + ")")
          .call(xAxis);
​
        yAxisGroup = svg.append("g")
          .attr("class", "y axis")
          .attr("transform", "translate(0,0)")
          .call(yAxis)
          .append("text")
          .attr("class", "label")
          .attr("transform", "rotate(-90)")
          .attr("x", "-4")
          .attr("dy", "1.1em")
          .style("text-anchor","end")
          .text("Magnitude");
      });
​
    </script>
​
  </body>
</html>
​
    