Skip to content

Instantly share code, notes, and snippets.

@harrisoncramer

harrisoncramer/.block

Last active January 9, 2018 03:27
Show Gist options
  • Save harrisoncramer/aa0a90dc346dded3aa8d5049965b28b5 to your computer and use it in GitHub Desktop.
Save harrisoncramer/aa0a90dc346dded3aa8d5049965b28b5 to your computer and use it in GitHub Desktop.
Download ZIP
Homeless Population in NYC (Line)
Raw
.block
license: gpl-3.0
Raw
homelessPopulation2.csv
year population families personsInFamilies children adultsInFamilies singleAdults singleMen singleWomen averageShelter
2017 60717 15145 45439 22695 22744 15278 11311 3967 433
2016 60042 14981 45837 23213 22642 14205 10340 3865 423
2015 58541 14031 45367 23692 21675 13174 9777 3397 439
2014 55745 13375 44259 23687 20346 11502 8613 2889 441
2013 50926 12126 39926 21279 18647 11000 8206 2794 405
2012 44402 10658 34301 17986 16315 10101 7522 2579 359
2011 38470 9460 29039 15317 13722 9431 6739 2409 313
2010 36960 9711 28578 14788 13790 8382 6065 2317 263
2009 36329 9614 28942 15069 13873 7387 5342 2045 274
2008 33285 8639 26640 14129 12511 6645 4873 1772 335
Raw
index.html
<!doctype html>
<html>
<head>
<title>Interactive Tree Map</title>
<meta charset="utf-8" />
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<script src="https://d3js.org/d3.v4.min.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
</body>
<script>
var parseDate = d3.timeParse("%Y");
function homelessLine() {
var margin = {left: 70, right: 50, top: 60, bottom: 80};
var height = 500 - margin.top - margin.bottom;
var width = 500 - margin.right - margin.left
var parseDate = d3.timeParse("%Y");
// GET + FORMAT DATA
d3.csv("homelessPopulation2.csv", function(data){
data.year = parseDate(data.year);
data.population = +data.population;
return data}, function(error, data){
if (error) throw error;
var yScale = d3.scaleLinear()
.domain([0, d3.max(data, function(d){return d.population})])
.rangeRound([height, 0])
.nice()
var xScale = d3.scaleTime()
.domain(d3.extent(data, function(d){ return d.year}))
.rangeRound([0,width]);
var yAxis = d3.axisLeft(yScale).ticks(5).tickPadding(5);
var xAxis = d3.axisBottom(xScale).ticks(d3.timeYear.every(2))
var svg = d3.select("body").append('svg')
.attr('width', width + margin.right + margin.left)
.attr('height', height + margin.bottom + margin.top)
.style("background-color","lightgrey")
var chartGroup = svg.append("g")
.attr("width",width)
.attr("transform", "translate("+margin.left+","+margin.top+")");
// Define Variables for the Grid
var tickCount;
var y2Pos;
tickCount = 10;
y2Pos = (0)
// Draw the Grid
chartGroup.selectAll("line.horizontalGrid").data(yScale.ticks(10)).enter().append("line")
.attr("x1", width)
.classed("horizontalGrid", true)
.attr("x2", 0)
.attr("y1", function(d){return yScale(d)})
.attr("y2", function(d){return yScale(d)})
.attr("fill","none")
.attr("stroke","darkgrey")
.attr("stroke-width","1px");
chartGroup.selectAll("line.verticalGrid").data(xScale.ticks(tickCount)).enter().append("line")
.attr("y1", height)
.classed("verticalGrid", true)
.attr("y2", y2Pos)
.attr("x1", function(d){return xScale(d)})
.attr("x2", function(d){return xScale(d)})
.attr("fill","none")
.attr("stroke","darkgrey")
.attr("stroke-width","1px");
// Attach the Axes
chartGroup.append("g")
.attr("class","Xaxis")
.call(xAxis)
.attr("transform","translate(0,"+height+")")
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-.8em")
.attr("dy", ".15em")
.attr("transform", "rotate(-65)");
chartGroup.append("g")
.attr("class","Yaxis")
.call(yAxis)
.selectAll("text")
.style("text-anchor", "middle")
.attr("dy", "-1em")
.attr("transform", "rotate(-90)");
// Define the Lines
var line = d3.line()
.x(function(d){return xScale(d.year)})
.y(function(d){return yScale(d.population)})
.curve(d3.curveBasis);
var line2 = d3.line()
.x(function(d){return xScale(d.year)})
.y(function(d){return yScale(d.children)})
.curve(d3.curveBasis);
var line3 = d3.line()
.x(function(d){return xScale(d.year)})
.y(function(d){return yScale(d.singleWomen)})
.curve(d3.curveBasis);
var line4 = d3.line()
.x(function(d){return xScale(d.year)})
.y(function(d){return yScale(d.singleMen)})
.curve(d3.curveBasis);
var line5 = d3.line()
.x(function(d){return xScale(d.year)})
.y(function(d){return yScale(d.adultsInFamilies)})
.curve(d3.curveBasis);
// Attach the Line ('path')
chartGroup.append("path")
.attr("d", line(data))
.attr('class','line')
.classed("homelessLine",true);
chartGroup.append("path")
.attr("d", line2(data))
.attr('class','line2')
.classed("homelessLine",true);
chartGroup.append("path")
.attr("d", line3(data))
.attr('class','line3')
.classed("homelessLine",true);
chartGroup.append("path")
.attr("d", line4(data))
.attr('class','line4')
.classed("homelessLine",true);
chartGroup.append("path")
.attr("d", line5(data))
.attr('class','line5')
.classed("homelessLine",true);
chartGroup.append("text")
.attr("y", -45)
.attr("x", (height/2)- height)
.attr("text-anchor", "middle")
.attr("transform", "rotate(-90)")
.style("font-size", "13px")
.style("text-decoration", "underline")
.text("Total Number of Homeless");
chartGroup.append("text")
.attr("y", (height) + margin.top)
.attr("x", (width/2))
.attr("text-anchor", "middle")
.style("font-size", "13px")
.style("text-decoration", "underline")
.text("Year");
var title = svg.append("text")
.attr("x", 250)
.attr("y", (margin.top / 2))
.attr("text-anchor", "middle")
.style("font-size", "20px")
.style("text-decoration", "underline")
.text("Homeless Population in New York City")
.style("font-family","Raleway")
d3.select("g.Yaxis g.tick").remove()
d3.selectAll("g.tick text").style("font-size","10px")
});
}
homelessLine();
</script>
</html>
Raw
styles.css
.line {
fill: none;
stroke: red;
stroke-width: 2px;
}
.line2 {
stroke: #969FFD;
}
.line3 {
stroke: #7173BF;
}
.line4 {
stroke: #262640;
}
.line5 {
stroke: #4B4C7F;
}
.homelessLine {
stroke-width: 4px;
fill: none;
}
text {
font-family: "Raleway", sans-serif
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment