Built with blockbuilder.org
Last active
February 6, 2019 16:35
-
-
Save SeabassWells/10f3db91786165d044d7c314ac586a02 to your computer and use it in GitHub Desktop.
sf-map
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
license: mit |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"default": "Select a dataset from the dropdown above, then mouse over any state to highlight and view data values.", | |
"population": "Total manufacturing output in $Billions, 2016. Source: <a href='http://www.nam.org/Data-and-Reports/State-Manufacturing-Data/State-Manufacturing-Data/April-2017/2017-State-Manufacturing-Data-Table/' target='_blank'>National Association of Manufacturers</a>", | |
"popdensity": "Unemployment rate as a percentage of the labor force and defined by place of residence, March 2018. Source: <a href='https://www.bls.gov/web/laus/laumstrk.htm' target='_blank'>Bureau of Labor Statistics</a>", | |
"encampments": "Total population, 2010. Source: <a href='http://www.ipl.org/div/stateknow/popchart.html' target='_blank'>IPL2</a>", | |
"encampmentsacre": "Cash receipts by commodity, 2016. Source: <a href='https://data.ers.usda.gov/reports.aspx?ID=17844' target='_blank'>USDA Economic Research Service</a>" | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<head> | |
<style> | |
</style> | |
</head> | |
<body> | |
<div class="container-fluid"> | |
<div class="row" style="padding-bottom: 35px;"> | |
<div class="col-md-8 offset-md-2"> | |
<h1 class="supreme"><a href="/" style="color: white;">←</a> San Fran </h1> | |
</div> | |
</div> | |
<!-- begin content --> | |
<div class="row" style="padding-bottom: 25px;"> | |
<div class="col-md-8 offset-md-2 blurb-row"> | |
<p>The best way to understand the makeup of San Fran is data.</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="popdensity">Population Density</option> | |
<option value="encampments">Encampments</option> | |
<option value="encampmentsacre">Encampments per Acre</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="https://d3js.org/topojson.v2.min.js"></script> | |
<script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script> | |
<script type="text/javascript" src="main.js"></script> | |
</body> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// console.log("groovy") | |
//Alerts for browser compatibility | |
if (navigator.vendor == "Apple Computer, Inc." && !/Mobi|Android/i.test(navigator.userAgent)) { | |
alert("This visualization doesn't work very well in Safari. Try using Chrome if you can!"); | |
} | |
if (/Mobi|Android/i.test(navigator.userAgent)) { | |
alert("This visualization doesn't work very well on mobile. Try using Chrome on Desktop if you can!") | |
} | |
var w = 1000; | |
var h = 650; | |
console.log("d3 executed!") | |
//Create variable for updating dataset | |
var newData; | |
var svg = d3.select("body .viz-row") | |
.append("svg") | |
.attr("width", w) | |
.attr("height", h); | |
// set color scale for each tile | |
var color = d3.scaleLinear() | |
.range([0,255]) | |
// add the tooltip | |
var tooltip = d3.select("body .viz-row").append("div") | |
.attr("class", "tooltip") | |
.style("opacity", 0); | |
// load the dataset specified in the dropdown | |
function displayData(dataset) { | |
console.log("displayData executed on " + dataset); | |
// load the csv file with all the data | |
d3.csv("SFData.csv", function(data) { | |
//Set domain for color scale | |
color.domain([ | |
d3.min(data, function(d) { return parseFloat(d[dataset]); }), | |
d3.max(data, function(d) { return parseFloat(d[dataset]); }) | |
]); | |
//Load in GeoJSON data with all the json | |
d3.json("bs.json", function(json) { | |
// make a copy of the json object for fixing the map projection | |
var jsonClone = JSON.parse(JSON.stringify(json)); | |
json = topojson.feature(json, json.objects.SFgeojson).features | |
jsonClone = topojson.feature(jsonClone, jsonClone.objects.SFgeojson) | |
// initialize dataState and dataValues for connecting the csv to json | |
for (var i = 0; i < data.length; i++) { | |
var dataState = data[i].nhood; | |
var dataValue = parseFloat(data[i][dataset]); | |
// add the data value to the appropriate record in json | |
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); | |
// illustrate each neighborhood | |
mapPath = svg.selectAll("path") | |
.data(json).enter() | |
.append("path") | |
.attr("d", pathFlipped); | |
// add the transition for filling the nhood colors | |
mapPath.transition() | |
.duration(900) | |
.style("fill", function(d) { | |
//Get data value | |
var value = d.properties.value; | |
if (value) { | |
console.log("1") | |
return "rgb(" + color(value) + ",0,0)"; | |
} else { | |
//If default dataset | |
if (dataset == "default") { | |
console.log("2") | |
return "black"; | |
//If any other dataset | |
} else { | |
console.log("3") | |
return "#ccc"; | |
} | |
} | |
}); | |
mapPath.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() { | |
return (d.properties.value); | |
}) | |
.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); | |
}); | |
}); | |
}); | |
}; | |
//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", "Futura, 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); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
nhood | population | popdensity | encampments | encampmentsacre | |
---|---|---|---|---|---|
Bayview Hunters Point | 37600 | 11.4 | 1241 | 0.376260638 | |
Bernal Heights | 26140 | 37.9 | 557 | 0.807586075 | |
Castro/Upper Market | 21090 | 38.4 | 4607 | 8.388278805 | |
Chinatown | 14820 | 103.1 | 141 | 0.980910931 | |
Excelsior | 39340 | 44.2 | 82 | 0.092130147 | |
Financial District/South Beach | 17460 | 24.3 | 5215 | 7.257989691 | |
Glen Park | 8210 | 19.2 | 79 | 0.184750305 | |
Golden Gate Park | 90 | 0.1 | 203 | 0.225555556 | |
Haight Ashbury | 18050 | 50.7 | 1166 | 3.275135734 | |
Hayes Valley | 18250 | 58.1 | 644 | 2.050213699 | |
Inner Richmond | 22500 | 47.2 | 314 | 0.658702222 | |
Inner Sunset | 29120 | 32 | 124 | 0.136263736 | |
Japantown | 3650 | 47.3 | 128 | 1.658739726 | |
Lakeshore | 14300 | 7.8 | 24 | 0.013090909 | |
Lincoln Park | 320 | 1.3 | 9 | 0.0365625 | |
Lone Mountain/USF | 18070 | 48.7 | 82 | 0.220996126 | |
Marina | 25110 | 38.3 | 576 | 0.878566308 | |
McLaren Park | 850 | 2.2 | 19 | 0.049176471 | |
Mission | 58640 | 48.6 | 17388 | 14.41092769 | |
Mission Bay | 10530 | 20.2 | 2141 | 4.1071415 | |
Nob Hill | 22300 | 97 | 2957 | 12.862287 | |
Noe Valley | 18650 | 39.1 | 55 | 0.115308311 | |
North Beach | 12600 | 39.4 | 622 | 1.944984127 | |
Oceanview/Merced/Ingleside | 28010 | 41.6 | 84 | 0.124755444 | |
Outer Mission | 24270 | 37.8 | 129 | 0.20091471 | |
Outer Richmond | 44870 | 39.2 | 331 | 0.289173167 | |
Pacific Heights | 24070 | 47.3 | 631 | 1.239979227 | |
Portola | 16410 | 31.1 | 157 | 0.29754418 | |
Potrero Hill | 13770 | 18.9 | 2212 | 3.036078431 | |
Presidio | 3830 | 2.5 | 9 | 0.005874674 | |
Presidio Heights | 10720 | 33.3 | 85 | 0.264039179 | |
Russian Hill | 17830 | 56.4 | 146 | 0.461828379 | |
Seacliff | 2460 | 18.1 | 3 | 0.022073171 | |
South of Market | 19180 | 33.9 | 12189 | 21.54364442 | |
Sunset/Parkside | 81050 | 29.9 | 167 | 0.06160765 | |
Tenderloin | 28220 | 112.3 | 3929 | 15.63524805 | |
Treasure Island | 3090 | 5.4 | 7 | 0.01223301 | |
Twin Peaks | 7410 | 17.5 | 30 | 0.070850202 | |
Visitacion Valley | 18570 | 47.4 | 28 | 0.071470113 | |
West of Twin Peaks | 38180 | 19.5 | 60 | 0.030644316 | |
Western Addition | 22220 | 59.5 | 2134 | 5.714356436 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment