Skip to content

Instantly share code, notes, and snippets.

@natemiller

natemiller/SF_EvictionNoticesPer1000Household_Total_Wide.csv

Last active December 8, 2015 07:29
Show Gist options
  • Save natemiller/820e2d5eff590077280b to your computer and use it in GitHub Desktop.
Save natemiller/820e2d5eff590077280b to your computer and use it in GitHub Desktop.
Download ZIP
SF Eviction Multiline Plot Per 1000 Households - d3.js
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>SF Eviction Notices 1997-2015</title>
<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
<style type="text/css">
body {
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
background-color: white;
padding: 50px;
}
h1 {
margin-left: 50px;
}
p {
max-width: 1000px;
margin-left: 50px;
}
figure {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 40px;
margin-right: 40px;
}
figcaption {
padding: 5px;
font-family: ;
font-size: 0.8em;
font-weight: 700;
border: none;
background: transparent;
word-wrap:normal;
text-align: center;
}
em {
color: black;
font-weight: bold;
font-style: italic;
}
em1 {
color: darkred;
font-weight: bold;
font-style: italic;
}
svg {
background-color: white;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.x.axis path {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.line {
fill: none;
stroke: steelblue;
stroke-width: 1.5px;
}
.highlight { stroke: #fc0; }
</style>
</head>
<body>
<figure>
<img src = "http://media1.fdncms.com/sfexaminer/imager/evictions/u/original/2627321/evictions_mural.jpg" width = "1000" height = "547" alt=""/>
<figcaption style="text-align:left">PHOTO CREDIT: MIKE KOOZMIN/THE S.F. EXAMINER, November 15, 2013 </figcaption>
</figure>
<h1> SF Eviction Notices from 1997 - 2015,<em1> a first look</em1></h1>
<p>Mouse over the lines or the neighborhood names to see in what <em>years</em> and in what San Francisco <em>neighborhoods</em> the number of eviction notices has been the greatest. Were the high eviction rates (<em1>or at least</em1> eviction notice rates) in the Mission simply the result more total households in the Mission?</p>
<p style="font-size:80%">Eviction notice data from <a href="https://data.sfgov.org/Housing-and-Buildings/Eviction-Notices/5cei-gny5">data.sfgov.org</a> and households per neighborhood data from US Census ACS 5-year Average (2008-2013)</p>
<body>
<script type="text/javascript">
var margin = {top: 20, right: 250, bottom: 50, left: 70},
width = 1200 - margin.left - margin.right,
height = 700 - margin.top - margin.bottom;
var parseDate = d3.time.format("%Y").parse;
var x = d3.time.scale()
.range([0, width]);
var y = d3.scale.linear()
.range([height-5, 0]);
var curve = d3.scale.ordinal();
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var line = d3.svg.line()
.defined(function(d) { return !isNaN(d.TotalEviction); })
.interpolate("monotone")
.x(function(d) { return x(d.Year); })
.y(function(d) { return y(d.TotalEviction); });
var svg = d3.select("body").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 + ")");
d3.csv("SF_EvictionNoticesPer1000Household_Total_Wide.csv", function(error, data) {
curve.domain(d3.keys(data[0]).filter(function(key) { return key !== "Year"; }));
data.forEach(function(d) {
d.Year = parseDate(d.Year);
});
var sources = curve.domain().map(function(name) {
return {
name: name,
values: data.map(function(d) {
return {Year: d.Year, TotalEviction: +d[name]};
})
};
});
x.domain(d3.extent(data, function(d) { return d.Year;}));
y.domain([
d3.min(sources, function(c) { return d3.min(c.values, function(v) { return v.TotalEviction; }); }),
d3.max(sources, function(c) { return d3.max(c.values, function(v) { return v.TotalEviction; }); })
]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.append("text")
.attr("y", margin.bottom/1) //smaller divider moves down
.attr("x",width/2)
.text("Year")
.attr("font-family","serif")
.attr("font-size","16px");
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y",-margin.top*3.3) //bigger mulitplier moves to the left
.attr("x",-height/2) //smaller divider moves up
.attr("dy", ".71em")
.style("text-anchor", "middle")
.text("Total Eviction Notices per 1000 Households")
.attr("font-family","serif")
.attr("font-size","16px");
var source = svg.selectAll(".source")
.data(sources)
.enter().append("g")
.attr("class", "source");
source.append("path")
.attr("class", "line")
.attr("d", function(d) { return line(d.values); })
.style("stroke", function(d) { //initial path-line color
if (d.name == "Mission") {
this.parentNode.parentNode.appendChild(this.parentNode)
return "darkred"
} else {
return "lightgrey"
}
})
.style("stroke-width", function(d) { //initial path-line width
if (d.name == "Mission") {
return "4px"
} else {
return "1.5px"
}
})
.on("mouseover", function(d){
d3.select(this)
.style("stroke", "#6b6ecf") //line color with line moveover
.style("stroke-width","3px");
//.style("stroke",function(d) {return color(d.name);});
this.parentNode.parentNode.appendChild(this.parentNode);
d3.select('#text-' + d.name)
.style("stroke", "#6b6ecf") //text color, size with line mouseover
.style("font-style","bold")
.style("font-size", "18");
//.style("stroke",function(d) {return color(d.name);});
})
.on("mouseout", function(d) {
d3.select(this)
.transition()
.duration(200)
.style("stroke", "lightgrey") //line color when line mouseout
.style("stroke-width","1.5px");
d3.select('#text-' + d.name)
.transition()
.duration(200)
.style("stroke", "#646464") //text color, size when line mouseout
.style("font-style","normal")
.style("font-size", "14");
})
.attr("id", function(d, i) { return "path-" + d.name; });
source.append("text")
.datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; })
.attr("transform", function(d, i) {return "translate("+x(d.value.Year * .99)+","+ y((i)*1)+")";})
.attr("x", 40)
.attr("dy", ".35em")
.style("stroke", function(d) { //initial text color
if (d.name == "Mission") {
return "darkred"
} else {
return "#646464"
};
})
.style("font-style", function(d) { //initial text color
if (d.name == "Mission") {
return "bold"
} else {
return "normal"
};
})
.style("font-size", function(d) { //initial text color
if (d.name == "Mission") {
return "18px"
} else {
return "14px"
};
})
.on("mouseover", function(d){
d3.select('#path-' + d.name)
.style("stroke", "#6b6ecf") //line-path color with text mouseover
.style("stroke-width","3px");
//.style("stroke",function(d) {return color(d.name);});
this.parentNode.parentNode.appendChild(this.parentNode);
d3.select(this)
.style("stroke", "#6b6ecf") //text color,style, size with text mouseover
.style("font-style", "bold")
.style("font-size","18")
//.style("stroke",function(d) {return color(d.name);});
})
.on("mouseout", function(d) {
d3.select('#path-' + d.name)
.transition()
.duration(200)
.style("stroke", "lightgrey") //line-path color with text mouseout
.style("stroke-width","1.5px");
d3.select(this)
.transition()
.duration(200)
.style("stroke", "#646464") //text color,style,size with text mouseout
.style("font-style","normal")
.style("font-size","14");
})
.text(function(d) { return d.name; })
.attr("font-family","serif")
.attr("font-size","14px")
.attr("id", function(d, i) { return "text-" + d.name; });
});
</script>
Raw
SF_EvictionNoticesPer1000Household_Total_Wide.csv
Year Bayview_Hunters_Point Bernal_Heights Castro-Upper_Market Chinatown Excelsior Financial_District-South_Beach Glen_Park Haight_Ashbury Western_Addition Inner_Richmond Inner_Sunset Lakeshore Marina Mission Mission_Bay Nob_Hill Noe_Valley North_Beach Oceanview-Merced-Ingleside Outer_Mission Outer_Richmond Pacific_Heights Portola Potrero_Hill Presidio Presidio_Heights Russian_Hill Seacliff South_of_Market Parkside Tenderloin-Civic_Center Twin_Peaks Visitacion_Valley West_of_Twin_Peaks
1997 2.637130802 10.35986914 11.00651702 1.636904762 8.337055233 3.086419753 3.937007874 11.18611379 6.818181818 12.04610951 6.212251941 11.77446103 6.533435819 11.94231636 0.913242009 8.265306122 7.387862797 5.46875 5.007587253 3.914141414 11.11111111 7.571288102 7.711181213 7.745266781 1.136363636 7.641921397 7.38045738 6.060606061 3.011514615 21.42857143 2.410755679 27 3.853564547 4.849039341
1998 6.012658228 9.160305344 9.99275887 3.422619048 11.01682299 8.024691358 9.711286089 9.836065574 9.230055659 8.530259366 9.145815358 14.4278607 8.455034589 14.82649842 0.456621005 6.224489796 10.64204046 8.984375 9.104704097 5.050505051 11.58730159 8.849557522 22.43252716 11.01549053 NA 7.423580786 7.484407484 3.03030303 3.54295837 29.15451895 2.596198424 21 5.973025048 5.946935041
1999 8.438818565 7.524536532 9.63070239 3.273809524 10.57019503 32.09876543 8.13648294 9.450337512 7.282003711 7.435158501 6.988783434 10.77943615 6.072252114 13.38440739 NA 5.918367347 7.475813544 11.19791667 5.918057663 6.186868687 9.841269841 6.882989184 10.86575535 11.87607573 NA 9.6069869 8.212058212 4.04040404 5.137289637 25.94752187 2.549837738 16 4.046242775 4.025617566
2000 8.227848101 9.269356598 6.734250543 3.422619048 10.71907101 10.49382716 5.249343832 9.450337512 7.467532468 7.608069164 6.902502157 1.160862355 4.842428901 10.7706174 NA 7.755102041 8.091468777 6.901041667 9.256449165 7.323232323 12.46031746 8.456243854 10.86575535 9.294320138 NA 11.5720524 8.212058212 4.04040404 3.188662533 25.21865889 3.198887344 31 7.514450867 3.568161025
2001 7.278481013 6.870229008 8.037653874 3.869047619 12.95221081 3.703703704 2.887139108 5.593056895 5.936920223 7.550432277 7.420189819 1.160862355 4.919292852 11.5817936 NA 5.510204082 5.45294635 6.510416667 7.890743551 4.545454545 9.603174603 6.293018682 11.56677182 4.647160069 1.136363636 7.205240175 4.885654886 NA 3.454384411 23.46938776 2.596198424 14 7.707129094 4.300091491
2002 4.746835443 6.979280262 6.589427951 1.339285714 8.188179247 6.172839506 4.461942257 7.135969142 3.710575139 5.360230548 4.83175151 0.663349917 5.841660261 7.616043263 NA 5.306122449 4.045734389 3.515625 4.40060698 2.904040404 6.428571429 5.703048181 4.55660708 4.475043029 2.272727273 6.113537118 3.014553015 4.04040404 3.011514615 17.78425656 3.291608716 8 4.431599229 3.934126258
2003 4.324894515 5.561613959 6.082548878 1.19047619 5.955039452 5.555555556 2.624671916 6.075216972 3.014842301 4.149855908 4.314063848 0.165837479 3.228285934 7.255520505 NA 6.530612245 4.573438874 6.640625 6.676783005 2.651515152 4.285714286 3.343166175 2.804065896 4.13080895 NA 3.493449782 1.455301455 3.03030303 2.3914969 11.2244898 6.768660176 17 3.082851638 3.934126258
2004 3.164556962 4.907306434 6.010137581 3.125 5.061783534 3.086419753 2.099737533 4.532304725 2.829313544 3.976945245 2.84728214 1.160862355 5.68793236 9.689049121 NA 6.326530612 4.133685136 3.255208333 4.704097117 1.515151515 6.19047619 3.736479843 5.257623554 5.335628227 NA 4.366812227 1.663201663 2.02020202 2.657218778 9.183673469 3.430690774 13 2.697495183 2.470265325
2005 2.109704641 4.907306434 7.241129616 1.488095238 4.615155575 4.938271605 1.57480315 5.68948891 2.782931354 3.054755043 3.106125971 3.482587065 2.229054573 9.193330329 NA 7.551020408 3.518029903 2.734375 4.704097117 2.777777778 6.26984127 5.40806293 2.804065896 3.442340792 NA 6.331877729 2.910602911 NA 5.845881311 10.20408163 6.629578118 23 2.504816956 2.470265325
2006 3.05907173 3.925845147 8.11006517 1.339285714 4.317403603 6.172839506 2.362204724 4.821600771 3.896103896 3.804034582 2.674719586 2.653399668 2.075326672 8.021631365 NA 7.959183673 6.068601583 6.770833333 3.338391502 2.525252525 5.238095238 4.228121927 5.257623554 2.409638554 NA 4.585152838 4.46985447 8.080808081 2.568644818 10.34985423 4.636068614 8 1.541425819 3.202195791
2007 3.58649789 2.181025082 3.330919623 2.976190476 7.741551288 3.086419753 3.149606299 4.339440694 4.035250464 3.976945245 5.867126833 1.824212272 3.612605688 6.894997747 0.913242009 7.142857143 3.781882146 4.166666667 4.248861912 3.03030303 4.682539683 4.228121927 4.907115317 1.721170396 NA 3.27510917 5.197505198 2.02020202 3.365810452 13.55685131 5.192396847 22 2.697495183 1.189387008
2008 4.219409283 4.79825518 6.22737147 2.380952381 8.03930326 2.469135802 2.099737533 4.821600771 4.545454545 4.034582133 3.96893874 2.155887231 3.074558032 6.534474989 0.456621005 4.387755102 2.19876869 4.6875 3.945371775 2.02020202 6.825396825 3.83480826 3.855590606 2.925989673 1.136363636 3.711790393 3.118503119 1.01010101 5.491585474 9.766763848 4.033379694 23 2.119460501 2.012808783
2009 4.324894515 3.162486369 3.258508327 1.93452381 6.401667411 6.172839506 1.312335958 4.918032787 2.690166976 1.786743516 5.090595341 1.492537313 0.99923136 4.731861199 1.369863014 1.836734694 2.462620932 2.213541667 10.62215478 2.904040404 4.126984127 3.539823009 9.463722397 2.409638554 NA 2.620087336 1.975051975 NA 3.720106289 8.89212828 4.589707928 6 1.734104046 1.006404392
2010 4.324894515 3.380588877 2.679217958 3.422619048 2.82864374 4.320987654 2.624671916 2.700096432 2.272727273 2.074927954 2.761000863 28.52404643 3.612605688 4.912122578 0.456621005 2.959183673 2.462620932 2.473958333 4.40060698 1.893939394 3.80952381 2.261553589 1.752541185 1.549053356 NA 2.838427948 0.935550936 NA 3.011514615 7.871720117 5.099675475 16 3.66088632 2.470265325
2011 3.164556962 4.580152672 2.606806662 4.761904762 3.870775644 3.703703704 3.412073491 2.507232401 2.782931354 1.959654179 2.674719586 34.16252073 2.536510377 5.362776025 1.826484018 2.551020408 4.749340369 2.994791667 2.731411229 3.535353535 3.650793651 3.441494592 4.55660708 3.786574871 NA 2.401746725 3.326403326 4.04040404 3.188662533 8.60058309 2.132591562 13 2.312138728 2.012808783
2012 4.324894515 3.489640131 3.475742216 2.232142857 5.508411493 12.34567901 1.049868766 4.725168756 2.922077922 5.244956772 2.761000863 1.492537313 4.611837048 7.390716539 1.369863014 6.326530612 2.55057168 3.385416667 3.034901366 2.398989899 5.396825397 4.326450344 7.360672976 4.475043029 NA 2.401746725 6.029106029 NA 2.745792737 17.63848397 2.596198424 13 2.504816956 2.287282708
2013 5.168776371 4.79825518 4.923968139 2.232142857 9.081435165 6.790123457 2.887139108 3.760848602 2.922077922 4.956772334 4.745470233 15.75456053 4.458109147 10.31996395 NA 9.183673469 3.166226913 9.635416667 4.855842185 2.525252525 6.26984127 5.211406096 3.505082369 2.925989673 NA 2.838427948 3.742203742 1.01010101 10.54030115 15.16034985 3.894297636 12 2.312138728 4.483074108
2014 5.907172996 4.580152672 7.16871832 4.017857143 10.12356707 4.938271605 1.57480315 3.471552555 5.194805195 4.495677233 3.537532355 14.09618574 4.150653344 8.652546192 0.456621005 8.673469388 4.661389622 5.989583333 6.676783005 4.419191919 8.333333333 7.276302852 10.86575535 5.679862306 NA 3.27510917 6.340956341 8.080808081 5.757307352 18.36734694 4.450625869 8 6.358381503 2.653247941
2015 3.902953586 4.79825518 2.896451846 2.380952381 7.294923329 3.086419753 0.262467192 3.857280617 2.551020408 2.190201729 1.466781708 7.628524046 2.305918524 4.100946372 NA 3.87755102 1.671064204 2.734375 3.793626707 2.651515152 5.238095238 1.376597837 7.360672976 3.95869191 NA 2.183406114 3.95010395 NA 2.922940655 11.51603499 3.894297636 8 2.89017341 1.829826167
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment