Water Consumption In New York City

<!DOCTYPE html>
<head>
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://d3js.org/d3-scale.v1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>

.dot {
    fill: #66d2ff;
    stroke: #57b6dd;
    cursor: help;
    opacity: 0.5;
  }

.dot:hover {
    fill: white;
  }

.tooltip {
    position: absolute;
    text-align: left;
    padding: 8px;
    font: 12px sans-serif;
    background: white;
    border: 1px solid #57b6dd;
    border-radius: 10px;
    pointer-events: none;
    margin-top: 25px;
    margin-left: 25px;
    font-size: 12px;
  }

.label {
    font-size: 12px;
  }

</style>

</head>
<body>

data.data.forEach(function(dataSet) {
      let newDataSet = {};

newDataSet.year = parseInt(dataSet[8]);
      newDataSet.population = parseInt(dataSet[9]);
      newDataSet.millionGallonsPerDay = parseInt(dataSet[10]);
      newDataSet.gallonsPerPersonPerDay = parseInt(dataSet[11]);

dataObject.push(newDataSet);
    });

// Set the dimensions and margins of the graph
    var margin = { top: 20, right: 70, bottom: 20, left: 70 };
    var width = 960 - margin.left - margin.right;
    var height = 420 - margin.top - margin.bottom;

// Chart Labels
    xLabel = "Average gallons of water / Per person, per day";
    yLabel = "New York City / Population";

// Set the ranges
    var x = d3.scaleLinear().range([0, width]);
    var y = d3.scaleLinear().range([height, 0]);

// append the svg obgect to the body of the page
    // appends a 'group' element to 'svg'
    // moves the 'group' element to the top left margin
    var svg = d3
      .select(".chart")
      .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 + ")");

// Add a ToolTip
    var toolTip = d3
      .select("body")
      .append("div")
      .attr("class", "tooltip")
      .style("opacity", 0);

// Cache ToolTip Template
    var toolTipTemplate = _.template(d3.select("#template").html());

// Scale the range of the data
    x.domain([
      d3.min(dataObject, function(d) {
        return d.year;
      }) - 2,
      d3.max(dataObject, function(d) {
        return d.year;
      }) + 2
    ]);

y.domain([
      d3.min(dataObject, function(d) {
        return d.population;
      }) - 150000,
      d3.max(dataObject, function(d) {
        return d.population;
      }) + 150000
    ]);

// Calculate Circle Radius
    var r = d3
      .scaleLinear()
      .domain([
        d3.min(dataObject, function(d) {
          return d.gallonsPerPersonPerDay;
        }),
        d3.max(dataObject, function(d) {
          return d.gallonsPerPersonPerDay;
        })
      ])
      .range([5, 25]);

// Draw Circles
    svg
      .selectAll(".dot")
      .data(dataObject)
      .enter()
      .append("circle")
      .attr("class", "dot")
      .attr("r", function(d) {
        return r(d.gallonsPerPersonPerDay);
      })
      .attr("cx", function(d) {
        return x(d.year);
      })
      .attr("cy", function(d) {
        return y(d.population);
      })
      .on("mouseover", function(d) {
        toolTip
          .html(
            toolTipTemplate({
              year: d.year,
              population: d3.format(",.2s")(d.population),
              millionGallonsPerDay:
                d3.format(",")(d.millionGallonsPerDay) + "M",
              gallonsPerPersonPerDay: d.gallonsPerPersonPerDay
            })
          )
          .style("opacity", 0)
          .style("left", d3.event.pageX + "px")
          .style("top", d3.event.pageY + "px");

toolTip.style("opacity", 1);
      })
      .on("mousemove", function(d) {
        toolTip
          .style("left", d3.event.pageX + "px")
          .style("top", d3.event.pageY + "px");
      })
      .on("mouseout", function(d) {
        toolTip.style("opacity", 0);
      });

// Add the X Axis
    svg
      .append("g")
      .attr("transform", "translate(0," + height + ")")
      .attr("class", "axisYears")
      .call(d3.axisBottom(x).tickFormat(d3.format("y")));

svg
      .append("text")
      .attr("class", "label")
      .attr("text-anchor", "end")
      .attr("x", width)
      .attr("y", height - 6)
      .text(xLabel);

// Add the Y Axis
    svg.append("g").attr("class", "axisPopulation").call(d3.axisLeft(y));

svg
      .append("text")
      .attr("class", "label")
      .attr("text-anchor", "end")
      .attr("y", 6)
      .attr("dy", ".75em")
      .attr("transform", "rotate(-90)")
      .text(yLabel);
  }
);
</script>

<h1>Water Consumption In New York City</h1>
<p>A brief history of water consumption in New York City Water Supply System (Based on New York City Census population).</p>
<div class="chart"></div>
</body>
</html>

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

https://d3js.org/d3-scale.v1.min.js

https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js