Skip to content

Instantly share code, notes, and snippets.

@rambler
Created April 24, 2015 04:47
Show Gist options
  • Save rambler/666b73b1dd8081d8bba5 to your computer and use it in GitHub Desktop.
Save rambler/666b73b1dd8081d8bba5 to your computer and use it in GitHub Desktop.
Homeless By State, 2014 vs Estimated Population (m5)
state census homeless percent_homeless
Alabama 4849377 4561 0.0009405331860154407
Alaska 736732 1784 0.002421504699130756
Arizona 6731484 10495 0.0015590915762408407
Arkansas 2966369 2936 0.0009897622311991529
California 38802500 113952 0.002936717994974551
Colorado 5355866 10028 0.001872339599235679
Connecticut 3596677 4450 0.0012372531645182484
Delaware 935614 901 0.0009630039738610153
Florida 19893297 41542 0.0020882410793947328
Georgia 10097343 16521 0.0016361730011548582
Hawaii 1419561 6918 0.0048733376022587266
Idaho 1634464 2104 0.001287272157722654
Illinois 12880580 13107 0.001017578400972627
Indiana 6596855 5971 0.0009051282770350417
Iowa 3107126 3122 0.0010047870604539373
Kansas 2904021 2783 0.0009583264032870286
Kentucky 4413457 5089 0.0011530643665498498
Louisiana 4649676 4606 0.0009906066573240801
Maine 1330089 2726 0.002049486914033572
Maryland 5976407 7856 0.0013145021749690073
Massachusetts 6745408 21237 0.003148364042619809
Michigan 9909877 12227 0.001233819551948021
Minnesota 5457173 8377 0.001535043877113663
Mississippi 2994079 2226 0.000743467356739752
Missouri 6063589 7282 0.0012009389158796878
Montana 1023579 1745 0.0017048024627312596
Nebraska 1881503 3026 0.0016082886926037322
Nevada 2839099 10556 0.003718080982734311
New Hampshire 1326813 1376 0.0010370715390940546
New Jersey 8938175 11671 0.0013057475379481829
New Mexico 2085572 2746 0.0013166651642810702
New York 19746227 80590 0.0040812860097273265
North Carolina 9943964 11491 0.0011555753822117619
North Dakota 739482 1258 0.0017011908335835084
Ohio 11594163 11823 0.0010197372591708432
Oklahoma 3878051 4191 0.0010806974946951445
Oregon 3970239 12164 0.0030637954037527715
Pennsylvania 12787209 15333 0.0011990888707613992
Rhode Island 1055173 1190 0.001127777151234916
South Carolina 4832482 5057 0.0010464601834005796
South Dakota 853175 885 0.001037301843115422
Tennessee 6549352 9415 0.0014375467985229683
Texas 26956958 28495 0.001057055473395774
Utah 2942902 3081 0.0010469257895777706
Vermont 626562 1559 0.0024881815367034706
Virginia 8326289 7020 0.0008431127000275874
Washington 7061530 18442 0.0026116153298222904
West Virginia 1850326 2013 0.0010879163995966116
Wisconsin 5757564 6055 0.0010516600423373496
Wyoming 584153 757 0.0012958933704012477
District of Columbia 658893 7748 0.011759117185946731
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Transition Delays</title>
<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
<style type="text/css">
body {
background-color: white;
font-family: Helvetica, Arial, sans-serif;
}
h1 {
font-size: 24px;
margin: 0;
}
p {
font-size: 14px;
margin: 10px 0 0 0;
}
svg {
background-color: white;
}
circle:hover {
fill: orange;
}
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
</style>
</head>
<body>
<h1>Homeless population in the USA, 2014</h1>
<script type="text/javascript">
var w = 700;
var h = 600;
var padding = [ 20, 10, 50, 80 ]; //Top, right, bottom, left
var xScale = d3.scale.linear()
.range([ padding[3], w - padding[1] - padding[3] ]);
var yScale = d3.scale.linear()
.range([ padding[0], h - padding[2] ]);
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.tickFormat(function(d) {
return (+d/1000)+"K";
});
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left")
.tickFormat(function(d) {
return (+d/1000)+"K";
});
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
d3.csv("combined.csv", function(data) {
xScale.domain([
d3.min(data, function(d) {
return +d.census;
}),
d3.max(data, function(d) {
return +d.census;
})
]);
yScale.domain([
d3.max(data, function(d) {
return +d.homeless;
}),
d3.min(data, function(d) {
return +d.homeless;
})
]);
var circles = svg.selectAll("circle")
.data(data)
.enter()
.append("circle");
circles.attr("cx", function(d) {
return xScale(d.census);
})
.attr("cy", function(d) {
return yScale(d.homeless);
})
.attr("r", 0.1)
.attr("fill", "steelblue")
.append("title")
.text(function(d) {
return d.state + ": " + (parseFloat(d.percent_homeless)*100).toFixed(2) + "% homeless";
});
circles.sort(function(a, b) {
return d3.ascending(+a.census, +b.census);
})
.transition()
.delay(function(d, i) {
return i * 4;
})
.duration(500)
.attr("r", 4);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + (h - padding[2] + 10) + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + (padding[3] - 10) + ",0)")
.call(yAxis);
svg.append("text")
.attr("class", "x label")
.attr("text-anchor", "end")
.attr("x", w)
.attr("y", h - 6)
.text("Estimated Population");
svg.append("text")
.attr("class", "y label")
.attr("text-anchor", "end")
.attr("y", 6)
.attr("dy", ".75em")
.attr("transform", "rotate(-90)")
.text("Homeless population");
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment