D3 Examples - How does surface water pH vary over time in Elliott Bay?

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Surface water pH</title>
    <script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
    <style type="text/css">
      
      body {
        background-color: #eeeeee;
      }
​
      svg {
        background-color: white;
        border: 1px solid gray;
      }
      
      svg rect {
        fill: black;
      }
​
    </style>
  </head>
  <body>
​
    <script type="text/javascript">
      var framewidth = 960;
      var frameheight = 500;
      
      // left chart first
      var chartwidth = framewidth / 2 - 2; // -2 to make space for the border
      var chartheight = frameheight - 2;
      var leftSVG = d3.select("body")
            .append("svg")
            .attr("width", chartwidth)
            .attr("height", chartheight)
      d3.csv("buoy_data_by_time.csv", function(data) {  
        console.log("Data by time loaded!")
        console.log("First 6 rows:")
        for (i=0; i<6; i++) {
          console.log(data[i])
        }
        var leftBars = leftSVG.selectAll("rect")
                              .data(data)
                              .enter()
                              .append("rect")
                              .attr("x", 0)
                              .attr("height", (chartheight / data.length))
                              .attr("y", function(d,i) {
                                return i * (chartheight/data.length);
                              })
                              .attr("width", function(d) {
                                return (d.top_pH-7.77) * chartwidth * 40;
                              })
                              .append("title")
                              .text(function(d) {
                                return "Average surface pH at "+d.Time+": "+Number(d.top_pH).toFixed(3);
                              });
        })
      var leftTitle = leftSVG.append("text")
                              .attr("y", 20)
                              .attr("x", chartwidth - 200)
                              .text("Average pH by time of day");
​
      // now right hand chart
      var rightSVG = d3.select("body")
            .append("svg")
            .attr("width", chartwidth)
            .attr("height", chartheight);
      
      d3.csv("buoy_data_by_day.csv", function(data) { 
        console.log("Data by date loaded!")
        console.log("First 6 rows:")
        for (i=0; i<6; i++) {
          console.log(data[i])
        }
        var rightCols = rightSVG.selectAll("rect")
                              .data(data)
                              .enter()
                              .append("rect")
                              .attr("y", function(d) {
                                if (d === 0) { return chartheight; }
                                else {
                                  return chartheight - ((d.top_pH-7.6) * chartheight * 1.4);
                                }
                              })
                              .attr("width", (chartwidth / data.length))
                              .attr("x", function(d,i) {
                                return i * (chartheight/data.length);
                              })
                              .attr("height", chartheight)
                              .append("title")
                              .text(function(d) {
                                return "Average surface pH on "+d.Date+": "+Number(d.top_pH).toFixed(3);
                              }); 
          })    
          var rightTitle = rightSVG.append("text")
                                  .attr("y", 20)
                                  .attr("x", chartwidth - 200)
                                  .text("Average pH by day");
​
​
    </script>
​
  </body>
</html>
    