Skip to content

Instantly share code, notes, and snippets.

@SeabassWells

SeabassWells/.block

Last active February 25, 2019 20:10
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save SeabassWells/b8d3568229115f03703cc983d5becc1c to your computer and use it in GitHub Desktop.
Save SeabassWells/b8d3568229115f03703cc983d5becc1c to your computer and use it in GitHub Desktop.
Download ZIP
A Walk through the Neighborhood
Raw
.block
license: mit
Display the source blob
Display the rendered blob
Raw
bs.json
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Raw
descriptions.json
{
"default": "Choose a dataset from the dropdown and then mouse over any neighborhood to explore.",
"population": "Number of people in Thousands, 2016. Source: <a href='http://default.sfplanning.org/publications_reports/SF_NGBD_SocioEconomic_Profiles/2012-2016_ACS_Profile_Neighborhoods_Final.pdf' target='_blank'>American Community Survey</a>",
"popdensityperacre": "Number of people per acre in Thousands, 2016. Source: <a href='http://default.sfplanning.org/publications_reports/SF_NGBD_SocioEconomic_Profiles/2012-2016_ACS_Profile_Neighborhoods_Final.pdf' target='_blank'>American Community Survey</a>",
"percapitaincome": "Average income earned per person, 2016. Source: <a href='http://default.sfplanning.org/publications_reports/SF_NGBD_SocioEconomic_Profiles/2012-2016_ACS_Profile_Neighborhoods_Final.pdf' target='_blank'>American Community Survey</a>",
"percentnonwhite": "Non-White percent of population, 2016. Source: <a href='http://default.sfplanning.org/publications_reports/SF_NGBD_SocioEconomic_Profiles/2012-2016_ACS_Profile_Neighborhoods_Final.pdf' target='_blank'>American Community Survey</a>",
"percentinpoverty": "Percent of population with earnings below the poverty line, 2016. Source: <a href='http://default.sfplanning.org/publications_reports/SF_NGBD_SocioEconomic_Profiles/2012-2016_ACS_Profile_Neighborhoods_Final.pdf' target='_blank'>American Community Survey</a>",
"medianhomevalue": "Median home value, 2016. Source: <a href='http://default.sfplanning.org/publications_reports/SF_NGBD_SocioEconomic_Profiles/2012-2016_ACS_Profile_Neighborhoods_Final.pdf' target='_blank'>American Community Survey</a>",
"unemploymentrate": "Jobless share of the labor force, 2016. Source: <a href='http://default.sfplanning.org/publications_reports/SF_NGBD_SocioEconomic_Profiles/2012-2016_ACS_Profile_Neighborhoods_Final.pdf' target='_blank'>American Community Survey</a>",
"percapitacriminalarrests": "Rate of Criminal Arrests per 1,000 residents, 2018. Source: <a href='https://github.com/SeabassWells/understand-sf/tree/master/crime' target='_blank'>DataSF Crime Portal</a>",
"percapitaencampments": "Rate of 311 Encampment Reports per 1,000 residents, 2018. Source: <a href='https://github.com/SeabassWells/understand-sf/tree/master/homelessness' target='_blank'>DataSF 311 Portal</a>",
"medianhoursofsummerfog": "Average hours of summertime fog and low cloud cover, 1999-2009. Source: <a href='https://github.com/SeabassWells/understand-sf/tree/master/fog' target='_blank'>Climate Commons</a>",
"percentinliquefaction": "Percent of land area in a Liquefaction or Landslide zone, 2018. Source: <a href='https://github.com/SeabassWells/understand-sf/tree/master/liquefaction' target='_blank'>DataSF Seismic Hazard Zones</a>"
}
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<head>
<style>
/* .counties {
fill: none;
} */
/* .states {
fill: none;
stroke-width: 20;
stroke: #9400D3;
stroke-linejoin: round;
} */
/* path {
stroke: #737373;
stroke-width: .1;
} */
.header {
font-family: Garamond;
}
#intro-text {
font-size: 1em;
font-family: Palatino, sans-serif;
}
/* stroke: rgb(255, 255, 255);
stroke-width: .5px */
</style>
<!--
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script src="https://d3js.org/topojson.v2.min.js"></script> -->
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-8 offset-md-2">
<h1 class="header"> A Walk through the Neighorhoods </h1>
</div>
</div>
<!-- begin content -->
<div class="row">
<div class="col-md-8 offset-md-2 blurb-row">
<p id="intro-text">People say that San Francisco is many cities, crumpled into one. Pick which dataset is relevant to you and see how it varies across the city.</p>
<div class="dropdown">
<select class="select_box" id="opts">
<p></p>
<option value="default">Select a dataset</option>
<option value="population">Population</option>
<option value="popdensityperacre">Population Density</option>
<option value="percapitaincome">Income</option>
<option value="percentnonwhite">Racial Diversity</option>
<option value="percentinpoverty">Poverty</option>
<option value="medianhomevalue">Home Value</option>
<option value="unemploymentrate">Unemployment</option>
<option value="percapitacriminalarrests">Crime</option>
<option value="percapitaencampments">Homelessness</option>
<option value="medianhoursofsummerfog">Fog</option>
<option value="percentinliquefaction">Liquefaction</option>
</select>
</div>
</div>
</div>
<!-- viz row -->
<div class="row">
<div class="col-md-8 offset-md-2 viz-row">
</div>
</div>
</div>
<script src="w3color.js"></script>
<script src="https://d3js.org/topojson.v2.min.js"></script>
<script type="text/javascript" src="http://d3js.org/d3.v4.min.js"></script>
<script type="text/javascript" src="main.js"></script>
</body>
Raw
main.js
var w = 1000;
var h = 620;
function cmykToRgb(c, m, y, k) {
var r, g, b;
r = Math.round(255 - ((Math.min(1, c * (1 - k) + k)) * 255));
g = Math.round(255 - ((Math.min(1, m * (1 - k) + k)) * 255));
b = Math.round(255 - ((Math.min(1, y * (1 - k) + k)) * 255));
return "rgb("+r+","+g+","+b+")";
}
//Create variable for updating dataset
var newData;
var svg = d3.select("body .viz-row")
.append("svg")
.attr("width", w)
.attr("height", h);
//Define path generator
var path = d3.geoPath()
//
// var a = "rgb(0, 227, 198)"
// var b = "rgb(190, 148, 188)"
// var colorCheck = d3.interpolateRgb(a, b)
// var colorCheck = d3.interpolateRgb("blue", "red");
var color = d3.scaleLinear()
.range([0,255])
var colorcmyk = d3.scaleLinear()
// .range([1,0])
.range([0,1])
var tooltip = d3.select("body .viz-row").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
//Display data function
// load the dataset specified in the dropdown
function displayData(dataset) {
// var max = []
console.log("displayData executed on " + dataset);
// load the csv file with all the data
d3.csv("TheSFData.csv", function(data) {
//Set domain for color scale
// solves a problem caused by the extroardinary ratio of crimes to people in golden gate park
if (dataset === "percapitacriminalarrests") {
colorcmyk.domain([
d3.min(data, function(d) { return parseFloat(d[dataset]); }),
d3.max(data, function(d) { return parseFloat(200); })
]);
color.domain([
d3.min(data, function(d) { return parseFloat(d[dataset]); }),
d3.max(data, function(d) { return parseFloat(200); })
]);
}
else if (dataset === "percapitaencampments") {
colorcmyk.domain([
d3.min(data, function(d) { return parseFloat(d[dataset]); }),
d3.max(data, function(d) { return parseFloat(600); })
]);
color.domain([
d3.min(data, function(d) { return parseFloat(d[dataset]); }),
d3.max(data, function(d) { return parseFloat(600); })
]);
}
else {
colorcmyk.domain([
d3.min(data, function(d) { return parseFloat(d[dataset]); }),
d3.max(data, function(d) { return parseFloat(d[dataset]); })
]);
color.domain([
d3.min(data, function(d) { return parseFloat(d[dataset]); }),
d3.max(data, function(d) { return parseFloat(d[dataset]); })
]);
}
// max = d3.max(data, function(d) { return parseFloat(d[dataset]); })
// console.log(max)
//Load in GeoJSON data with all the json
d3.json("bs.json", function(json) {
// json.transform.translate = [100,0]
var jsonClone = JSON.parse(JSON.stringify(json));
json = topojson.feature(json, json.objects.SFgeojson).features
jsonClone = topojson.feature(jsonClone, jsonClone.objects.SFgeojson)
for (var i = 0; i < data.length; i++) {
var dataState = data[i].nhood;
var dataValue = parseFloat(data[i][dataset]);
for (var j = 0; j < json.length; j++) {
var jsonState = json[j].properties.nhood;
if (dataState == jsonState) {
json[j].properties.value = dataValue;
// console.log(json[j].properties.value)
break;
}
}
}
//Bind data and create one path per GeoJSON feature
var projection = d3.geoIdentity()
.reflectY(true)
.fitSize([w,h],jsonClone)
var pathFlipped = d3.geoPath()
.projection(projection);
const mapSelection = svg.selectAll("path")
.data(json)
mapSelection
.enter()
.append("path")
.attr("d", pathFlipped)
.style("fill","#f1ebd4")
.style("stroke","#aaaaaa")
.style("stroke-width", "1")
if (dataset == "default") {
for (j in json) {
if ("Financial District/South Beach".includes(json[j].properties.nhood)) {
svg.append("text")
.text("Financial District/")
.attr('transform', function(d) {
return 'translate(' + (parseFloat(pathFlipped.centroid(json[j])[0]) - 30) + ',' + (pathFlipped.centroid(json[j])[1] + 5) + ')'})
.append("tspan")
.text("South Beach")
}
else if ("Castro/Upper Market".includes(json[j].properties.nhood)){
svg.append("text")
.text("Castro/")
.attr('transform', function(d) {
return 'translate(' + (parseFloat(pathFlipped.centroid(json[j])[0]) - 30) + ',' + (pathFlipped.centroid(json[j])[1] - 5) + ')'})
.append("tspan")
.text("Upper Market")
}
else if ("Treasure Island".includes(json[j].properties.nhood)){
svg.append("text")
.text("Treasure")
.attr('transform', function(d) {
return 'translate(' + (parseFloat(pathFlipped.centroid(json[j])[0]) - 30) + ',' + (pathFlipped.centroid(json[j])[1] - 30) + ')'})
.append("tspan")
.text("Island")
}
else if ("Lone Mountain/USF".includes(json[j].properties.nhood)){
svg.append("text")
.text("Lone Mountain")
.attr('transform', function(d) {
return 'translate(' + (parseFloat(pathFlipped.centroid(json[j])[0]) - 20) + ',' + (pathFlipped.centroid(json[j])[1] + 9) + ')'})
}
else if ("Oceanview/Merced/Ingleside".includes(json[j].properties.nhood)){
svg.append("text")
.text("Oceanview/")
.attr('transform', function(d) {
return 'translate(' + (parseFloat(pathFlipped.centroid(json[j])[0]) - 35) + ',' + (pathFlipped.centroid(json[j])[1] - 5) + ')'})
.append("tspan")
.text("Merced/")
.append("tspan")
.text("Ingleside")
.attr("id","nested-text")
}
else if (json[j].properties.nhood === "Presidio Heights") {
svg.append("text")
.text("Presidio")
.attr('transform', function(d) {
return 'translate(' + (parseFloat(pathFlipped.centroid(json[j])[0]) - 25) + ',' + (pathFlipped.centroid(json[j])[1] ) + ')'})
.append("tspan")
.text("Heights")
}
else if ("Pacific Heights".includes(json[j].properties.nhood)){
svg.append("text")
.text("Pacific")
.attr('transform', function(d) {
return 'translate(' + (parseFloat(pathFlipped.centroid(json[j])[0]) - 30) + ',' + (pathFlipped.centroid(json[j])[1] -5) + ')'})
.append("tspan")
.text("Heights")
}
else if ("Russian Hill".includes(json[j].properties.nhood)){
svg.append("text")
.text("Russian")
.attr('transform', function(d) {
return 'translate(' + (parseFloat(pathFlipped.centroid(json[j])[0]) - 12) + ',' + (pathFlipped.centroid(json[j])[1] -5) + ')'})
.append("tspan")
.text("Hill")
}
else if ("Sunset/Parkside".includes(json[j].properties.nhood)){
svg.append("text")
.text("Sunset/")
.attr('transform', function(d) {
return 'translate(' + (parseFloat(pathFlipped.centroid(json[j])[0]) - 50) + ',' + (pathFlipped.centroid(json[j])[1] - 50 ) + ')'})
.append("tspan")
.text("Parkside")
}
else if (json[j].properties.nhood === "Inner Richmond"){
svg.append("text")
.text("Inner")
.attr('transform', function(d) {
return 'translate(' + (parseFloat(pathFlipped.centroid(json[j])[0]) - 25) + ',' + (pathFlipped.centroid(json[j])[1] -5 ) + ')'})
.append("tspan")
.text("Richmond")
}
else {
svg.append("text")
.text(json[j].properties.nhood)
.attr('transform', function(d) {
if (["Outer Richmond"].includes(json[j].properties.nhood)) {
return 'translate(' + (parseFloat(pathFlipped.centroid(json[j])[0]) - 50) + ',' + (pathFlipped.centroid(json[j])[1] + 10) + ')'}
else if (["Golden Gate Park"].includes(json[j].properties.nhood)) {
return 'translate(' + (parseFloat(pathFlipped.centroid(json[j])[0]) - 60) + ',' + (pathFlipped.centroid(json[j])[1] + 5) + ')'}
else if (["Sunset/Parkside"].includes(json[j].properties.nhood)) {
return 'translate(' + (parseFloat(pathFlipped.centroid(json[j])[0]) - 53) + ',' + (pathFlipped.centroid(json[j])[1] + 5) + ')'}
else if (["Bayview Hunters Point"].includes(json[j].properties.nhood)) {
return 'translate(' + (parseFloat(pathFlipped.centroid(json[j])[0]) - 50) + ',' + (pathFlipped.centroid(json[j])[1] + 20) + ')'}
else if (["Visitacion Valley"].includes(json[j].properties.nhood)) {
return 'translate(' + (parseFloat(pathFlipped.centroid(json[j])[0]) - 40) + ',' + (pathFlipped.centroid(json[j])[1] + 14) + ')'}
else if (["Excelsior"].includes(json[j].properties.nhood)) {
return 'translate(' + (parseFloat(pathFlipped.centroid(json[j])[0]) - 45) + ',' + (pathFlipped.centroid(json[j])[1] + 40) + ')'}
else if (["Bernal Heights"].includes(json[j].properties.nhood)) {
return 'translate(' + (parseFloat(pathFlipped.centroid(json[j])[0]) - 20) + ',' + (pathFlipped.centroid(json[j])[1] - 15) + ')'}
else if (["West of Twin Peaks"].includes(json[j].properties.nhood)) {
return 'translate(' + (parseFloat(pathFlipped.centroid(json[j])[0]) - 50) + ',' + (pathFlipped.centroid(json[j])[1] + 20) + ')'}
else if (["Portola"].includes(json[j].properties.nhood)) {
return 'translate(' + (parseFloat(pathFlipped.centroid(json[j])[0]) - 20) + ',' + (pathFlipped.centroid(json[j])[1] + 10) + ')'}
else if (["Potrero Hill"].includes(json[j].properties.nhood)) {
return 'translate(' + (parseFloat(pathFlipped.centroid(json[j])[0]) - 35) + ',' + (pathFlipped.centroid(json[j])[1] + 5) + ')'}
else if (["Mission Bay"].includes(json[j].properties.nhood)) {
return 'translate(' + (parseFloat(pathFlipped.centroid(json[j])[0]) - 43) + ',' + (pathFlipped.centroid(json[j])[1] + 20) + ')'}
else if (["Inner Sunset"].includes(json[j].properties.nhood)) {
return 'translate(' + (parseFloat(pathFlipped.centroid(json[j])[0]) - 40) + ',' + (pathFlipped.centroid(json[j])[1] - 5) + ')'}
else if (["Lincoln Park"].includes(json[j].properties.nhood)) {
return 'translate(' + (parseFloat(pathFlipped.centroid(json[j])[0]) - 30) + ',' + (pathFlipped.centroid(json[j])[1] + 5) + ')'}
else if (["Seacliff"].includes(json[j].properties.nhood)) {
return 'translate(' + (parseFloat(pathFlipped.centroid(json[j])[0]) - 20) + ',' + (pathFlipped.centroid(json[j])[1] ) + ')'}
else if (["Glen Park"].includes(json[j].properties.nhood)) {
return 'translate(' + (parseFloat(pathFlipped.centroid(json[j])[0]) - 20) + ',' + (pathFlipped.centroid(json[j])[1] + 5) + ')'}
else if (["Haight Ashbury"].includes(json[j].properties.nhood)) {
return 'translate(' + (parseFloat(pathFlipped.centroid(json[j])[0]) - 25) + ',' + (pathFlipped.centroid(json[j])[1] + 5) + ')'}
else if (["Noe Valley"].includes(json[j].properties.nhood)) {
return 'translate(' + (parseFloat(pathFlipped.centroid(json[j])[0]) - 35) + ',' + (pathFlipped.centroid(json[j])[1] + 10) + ')'}
else if (["McLaren Park"].includes(json[j].properties.nhood)) {
return 'translate(' + (parseFloat(pathFlipped.centroid(json[j])[0]) - 20) + ',' + (pathFlipped.centroid(json[j])[1] + 5) + ')'}
else if (["Twin Peaks"].includes(json[j].properties.nhood)) {
return 'translate(' + (parseFloat(pathFlipped.centroid(json[j])[0]) - 20) + ',' + (pathFlipped.centroid(json[j])[1] - 3) + ')'}
else if (["Treasure Island"].includes(json[j].properties.nhood)) {
return 'translate(' + (parseFloat(pathFlipped.centroid(json[j])[0]) - 30) + ',' + (pathFlipped.centroid(json[j])[1] - 30) + ')'}
else if (["Outer Mission"].includes(json[j].properties.nhood)) {
return 'translate(' + (parseFloat(pathFlipped.centroid(json[j])[0])) + ',' + (pathFlipped.centroid(json[j])[1] - 20) + ')'}
else if (["Mission"].includes(json[j].properties.nhood)) {
return 'translate(' + (parseFloat(pathFlipped.centroid(json[j])[0]) - 20) + ',' + (pathFlipped.centroid(json[j])[1] - 10) + ')'}
else if (["Chinatown"].includes(json[j].properties.nhood)) {
return 'translate(' + (parseFloat(pathFlipped.centroid(json[j])[0]) - 15) + ',' + (pathFlipped.centroid(json[j])[1] + 5) + ')'}
else if (["North Beach"].includes(json[j].properties.nhood)) {
return 'translate(' + (parseFloat(pathFlipped.centroid(json[j])[0]) - 20) + ',' + (pathFlipped.centroid(json[j])[1]) + ')'}
else if (["Tenderloin"].includes(json[j].properties.nhood)) {
return 'translate(' + (parseFloat(pathFlipped.centroid(json[j])[0]) - 20) + ',' + (pathFlipped.centroid(json[j])[1]) + ')'} // else if (["Pacific Heights"].includes(json[j].properties.nhood)) {
// return 'translate(' + (parseFloat(pathFlipped.centroid(json[j])[0]) - 40) + ',' + (pathFlipped.centroid(json[j])[1] - 5) + ')'}
// else if (["Russian Hill"].includes(json[j].properties.nhood)) {
// return 'translate(' + (parseFloat(pathFlipped.centroid(json[j])[0]) - 15) + ',' + (pathFlipped.centroid(json[j])[1] + 5) + ')'}
else if (["Nob Hill"].includes(json[j].properties.nhood)) {
return 'translate(' + (parseFloat(pathFlipped.centroid(json[j])[0]) - 25) + ',' + (pathFlipped.centroid(json[j])[1] + 15) + ')'}
else if (["Marina"].includes(json[j].properties.nhood)) {
return 'translate(' + (parseFloat(pathFlipped.centroid(json[j])[0]) - 30) + ',' + (pathFlipped.centroid(json[j])[1]) + ')'}
// else if (["Presidio Heights"].includes(json[j].properties.nhood)) {
// return 'translate(' + (parseFloat(pathFlipped.centroid(json[j])[0]) - 25) + ',' + (pathFlipped.centroid(json[j])[1] - 7) + ')'}
else if (["Japantown"].includes(json[j].properties.nhood)) {
return 'translate(' + (parseFloat(pathFlipped.centroid(json[j])[0]) - 20) + ',' + (pathFlipped.centroid(json[j])[1] + 3) + ')'}
else {
return 'translate(' + (parseFloat(pathFlipped.centroid(json[j])[0]) - 35) + ',' + (pathFlipped.centroid(json[j])[1] + 10) + ')'
}
})
}
}
var addLineBreak = svg.selectAll("tspan")
.attr('x', '0')
.attr('y', '20')
var addLineBreakSpecial = svg.selectAll("#nested-text")
.attr('x', '0')
.attr('y', '40')
var mapLabel = svg.selectAll("text")
.attr('font-size','10 pt')
.attr('fill','#787773')
.attr('text-shadow','#000 0px 0px 0.5px')
.attr('id','mapLabel')
}
// add pause
// if its quick, try the random color scheme from bl.ocks
// re-arrange the name when it's in its final place
else {
//Remove old text
d3.selectAll("#mapLabel")
.remove()
}
mapSelection.transition()
.duration(900)
.style("fill", function(d) {
//Get data value
var value = d.properties.value;
if (value || value == "0") {
// console.log("1")
// console.log(colorCheck(value/max))
// console.log(value/max)
// // return colorCheck(value/max);
// console.log(value)
// console.log(colorcmyk(value))
return "rgb(" + color(value) + ",0,0)";
// return cmykToRgb(colorcmyk(value), .5);
// return cmykToRgb(colorcmyk(value), .02, .12, .05);
// return cmykToRgb(.98,0,.15,colorcmyk(value));
} else {
//If default dataset
if (dataset == "default") {
// console.log("2")
return "#f1ebd4";
//If any other dataset
} else {
// console.log("3")
// return "#f1ebd4";
return "#000";
}
}
});
mapSelection.on("mouseover", function(d) {
//Inject data value into paragraph
//Remove old text
d3.select(".blurb-row .dropdown #value-label")
.remove()
//Display new text
var paragraph = d3.select(".blurb-row .dropdown")
.append("p")
.text(function() {
var value = d.properties.value;
if (value || value == "0") {
//Based on the dataset, we'll return different tooltips (formatting in terms of percentages, etc.)
if (["percapitaincome", "medianhomevalue"].includes(dataset)) {
return (d.properties.nhood + ": $" + d.properties.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","));
} else if (["percentnonwhite", "percentinpoverty", "unemploymentrate",
"percentinliquefaction"].includes(dataset)){
return (d.properties.nhood + ": " + d.properties.value + "%");
} else if (["medianhoursofsummerfog"].includes(dataset)){
return (d.properties.nhood + ": " + d.properties.value + " hours");
} else if (["popdensityperacre", "population"].includes(dataset)){
return (d.properties.nhood + ": " + d.properties.value + "K");
} else if (["percapitacriminalarrests", "percapitaencampments"].includes(dataset)){
return (d.properties.nhood + ": " + d.properties.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","));
} if (dataset=="default"){
return (d.properties.nhood);
} else {
return (d.properties.nhood + ": " + d.properties.value);
}
}
else {
return "-"
}
})
.attr("id", "value-label")
.classed("supreme", true)
.style("font-size", "1em")
.style("display", "inline")
.style("margin-left", "30px");
//Highlight current state
d3.select(this)
.transition()
.duration(300)
.style("opacity", .6);
})
.on("mouseout", function(d) {
//Remove old text
d3.select(".dropdown #value-label")
.remove()
//Return state to original opacity
d3.select(this)
.transition()
.duration(350)
.style("opacity", 1);
});
});
});
};
// https://socviz.co/maps.html#map-u.s.-state-level-data
// I like those colors a lot ^
//Display text function
function displayInformation(dataset) {
//Load in dataset:description json file
d3.json("descriptions.json", function(json) {
var description = json[dataset];
//Remove old text
d3.select("#dataset-description")
.remove()
//Display new text
var paragraph = d3.select("body .blurb-row")
.append("p")
.html(description)
.attr("id", "dataset-description")
.style("font-size", "1em")
.style("font-family", "Georgia, sans-serif")
.style("font-style", "italic");
});
}
//Load initial data and description
displayData("default");
displayInformation("default");
// handle on click event
d3.select('#opts')
.on('change', function() {
newData = d3.select(this).property('value');
displayInformation(newData);
displayData(newData);
});
Raw
TheSFData.csv
nhood population popdensityperacre percapitaincome percentnonwhite percentinpoverty medianhomevalue unemploymentrate totalarrests percapitacriminalarrests totalencampmentreports percapitaencampments medianhoursofsummerfog percentinliquefaction
Treasure Island 3 5 15886 66 51 -- 12 37 12 7 2 4 79
McLaren Park 1 2 15387 94 33 669643 26 34 40 19 22 7 4
Tenderloin 28 112 27946 57 30 509804 8 2589 92 3929 139 4 22
Lakeshore 14 8 22570 54 28 681159 16 418 29 24 2 8 14
Chinatown 15 103 24653 86 27 846774 7 542 37 141 10 4 49
South of Market 19 34 54202 62 27 752521 6 3613 188 12189 636 4 95
Japantown 4 47 68352 43 20 606250 5 281 77 128 35 4 0
Bayview Hunters Point 38 11 24817 86 19 566355 12 1543 41 1241 33 5 55
Western Addition 22 60 51264 57 17 636719 6 1188 54 2134 96 4 0
North Beach 13 39 60254 49 16 806903 7 1087 86 622 49 3 55
Visitacion Valley 19 47 20942 88 15 580231 10 393 21 28 2 7 2
Nob Hill 22 97 58623 45 14 685404 5 858 39 2957 133 4 1
Mission 59 49 53196 43 14 797306 6 3722 64 17388 297 5 33
Oceanview/Merced/Ingleside 28 42 26413 80 14 624528 10 354 13 84 3 8 1
Hayes Valley 18 58 61210 33 13 805046 5 875 48 644 35 4 13
Inner Richmond 23 47 56925 46 13 839002 6 466 21 314 14 6 0
Lone Mountain/USF 18 49 50860 38 10 904561 8 491 27 82 5 4 3
Outer Richmond 45 39 44745 56 10 880501 4 662 15 331 7 6 4
Sunset/Parkside 81 30 42430 65 10 829029 6 972 12 167 2 6 9
Russian Hill 18 56 91854 33 9 810158 3 718 40 146 8 4 12
Haight Ashbury 18 51 81392 20 9 908163 4 479 27 1166 65 4 7
Excelsior 39 44 28057 72 9 628628 8 530 14 82 2 6 2
Bernal Heights 26 38 53243 43 9 838307 7 549 21 557 21 6 11
Portola 16 31 29659 78 9 653611 7 349 21 157 10 7 7
Financial District/South Beach 17 24 114083 46 9 681493 5 2575 148 5215 299 4 61
Mission Bay 11 20 70287 58 9 754513 5 472 45 2141 203 4 93
Potrero Hill 14 19 84521 36 9 879765 6 720 52 2212 161 4 31
Presidio Heights 11 33 88517 31 8 913846 5 163 15 85 8 5 0
Castro/Upper Market 21 38 94317 22 7 907208 4 1030 49 4607 218 4 13
Outer Mission 24 38 32582 76 7 684176 8 450 19 129 5 6 4
Glen Park 8 19 72039 30 7 954665 5 133 16 79 10 6 20
Pacific Heights 24 47 102141 26 6 866733 4 554 23 631 26 4 0
West of Twin Peaks 38 20 67869 46 6 927384 4 622 16 60 2 7 7
Seacliff 2 18 117489 24 6 869565 5 14 6 3 1 6 12
Marina 25 38 98411 17 5 975000 4 741 30 576 23 4 51
Twin Peaks 7 18 64279 36 5 885714 4 84 11 30 4 4 16
Noe Valley 19 39 91014 22 4 934003 4 285 15 55 3 4 4
Presidio 4 3 86967 12 4 -- 1 8 2 9 2 5 19
Lincoln Park 0.3 1 43922 44 4 750000 10 10 31 9 28 5 38
Inner Sunset 29 32 63133 44 0.09 910805 4 343 12 124 4 6 11
Golden Gate Park 0.09 0.1 278 3089 203 2256 6 6
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment