Built with blockbuilder.org
Created
August 21, 2017 21:22
-
-
Save Fasani/c880866bd39e42527ccc78a7e6793fe4 to your computer and use it in GitHub Desktop.
Water Consumption In New York City
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| license: mit |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> | |
| <style> | |
| body { | |
| font-family: Arial; | |
| } | |
| h1 { | |
| font-size: 16px; | |
| margin-bottom: 0; | |
| } | |
| p { | |
| font-size: 12px; | |
| } | |
| .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> | |
| <script id="template" type="text/template"> | |
| Year:<strong> <%= year %></strong></br> | |
| Gallons per person per day:<strong> <%= gallonsPerPersonPerDay %></strong></br> | |
| <hr/> | |
| Population:<strong> <%= population %></strong></br> | |
| Total gallons per day:<strong> <%= millionGallonsPerDay %></strong><br/> | |
| </script> | |
| <script> | |
| // Data from https://data.cityofnewyork.us/Environment/Water-Consumption-In-The-New-York-City/ia2d-e54m | |
| d3.json( | |
| "https://data.cityofnewyork.us/api/views/ia2d-e54m/rows.json?accessType=DOWNLOAD", | |
| function(error, data) { | |
| let dataObject = []; | |
| 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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment