xxxxxxxxxx
<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>
https://d3js.org/d3.v4.min.js