Class 6-MT

<!DOCTYPE html>
<meta charset="utf-8">
<style> /* set the CSS */
.line {
  fill: blue;
  stroke: red;
  stroke-width: 2px;
}
  .grid line {
  stroke: lightgrey;
  stroke-opacity: 0.7;
  shape-rendering: crispEdges;
}

.grid line {
  stroke: lightgrey;
  stroke-opacity: 0.7;
  shape-rendering: crispEdges;
}

.grid path {
  stroke-width: 0;
}
  
</style>
<body>

<script src="https://d3js.org/d3.v4.min.js"></script>

});
  
  // Scale the range of the data
  x.domain(d3.extent(data, function(d) { return d.time; }));
  y.domain([0, d3.max(data, function(d) { return d.mag; })]);
  // Add the valueline path.
  svg.append("path")
      .data([data])
      .attr("class", "line")
      .attr("d", valueline);
  
   // Add the scatterplot
  svg.selectAll("dot")
      .data(data)
    .enter().append("circle")
      .attr("r", 2.5)
  
      .attr("cx", function(d) { return x(d.time); })
      .attr("cy", function(d) { return y(d.mag); });
  
  // Add the X Axis
    svg.append("g")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x));
  
 // text label for the x axis
  svg.append("text")             
      .attr("x", 480 )
      .attr("y",  420 )
      .style("text-anchor", "middle")
      .text("Date/Time");
             
  // Add the Y Axis
  svg.append("g")
      .call(d3.axisLeft(y));
  // text label for the y axis
   svg.append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 0 - margin.left)
      .attr("x",0 - (height / 2))
      .attr("dy", "1em")
      .style("text-anchor", "middle")
      .text("Magnitude"); 
  
  // add a title
  svg.append("text")
      .attr("x", (width / 2))				
      .attr("y", 0 - (margin.top / 2))
      .attr("text-anchor", "middle")	
      .style("font-size", "20px") 
      .style("text-decoration", "underline") 	
      .text("Scatterplot of Magnitude vs Date/Time of Earthquakes last week");
  
  // add the X gridlines
  svg.append("g")			
      .attr("class", "grid")
      .attr("transform", "translate(0," + height + ")")
      .call(make_x_gridlines()
          .tickSize(-height)
          .tickFormat("")
      )

// add the Y gridlines
  svg.append("g")			
      .attr("class", "grid")
      .call(make_y_gridlines()
          .tickSize(-width)
          .tickFormat("")
      )

});
  
</script>
</body>

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