Skip to content

Instantly share code, notes, and snippets.

@Fasani

Fasani/.block

Last active August 25, 2017 21:51
Show Gist options
  • Save Fasani/ede1c5ae6d918f2efe111ed857bc4927 to your computer and use it in GitHub Desktop.
Save Fasani/ede1c5ae6d918f2efe111ed857bc4927 to your computer and use it in GitHub Desktop.
Download ZIP
Water Consumption In New York City v2
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<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://unpkg.com/[email protected]/dist/simple-statistics.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;
}
.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;
}
.line {
stroke: red;
stroke-width: 1;
fill: none;
stroke-dasharray: 5,5;
}
</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 = 540 - 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);
//Generate Linear regression data
var lrdata = dataObject.map(function(v, i) {
return [i, v.population];
});
var lr = ss.linearRegressionLine(ss.linearRegression(lrdata));
//lr-line
var lrline = d3
.line()
.x(function(d) {
return x(d.year);
})
.y(function(d, i) {
return y(lr(i));
});
svg
.append("path")
.data([dataObject])
.attr("class", "line")
.attr("d", lrline);
}
);
</script>
<h1>Water Consumption In New York City</h1>
<p>A brief history of water consumption in the 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