Built with blockbuilder.org
forked from SeabassWells's block: sf-map
Created
February 7, 2019 19:47
-
-
Save tomshanley/3296ea4699e08c99a39e60a5193c6491 to your computer and use it in GitHub Desktop.
sf-map
This file contains hidden or 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 hidden or 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 hidden or 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 hidden or 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.clear() | |
| //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(["brown", "steelblue"]); | |
| // add the tooltip | |
| var tooltip = d3.select("body .viz-row").append("div") | |
| .attr("class", "tooltip") | |
| .style("opacity", 0); | |
| var csvData, dataValue, dataState | |
| // load the dataset specified in the dropdown | |
| function displayData() { | |
| // load the csv file with all the data | |
| d3.csv("SFData.csv", function(data) { | |
| //Set domain for color scale | |
| csvData = data | |
| //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++) { | |
| dataState = data[i].nhood; | |
| // 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.population = data[i].population | |
| json[j].properties.popdensity = data[i].popdensity | |
| json[j].properties.encampments = data[i].encampments | |
| json[j].properties.encampmentsacre = data[i].encampmentsacre | |
| // 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.style("fill", "#ccc") | |
| .style("stroke", "FFF") | |
| /*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); | |
| updateData(newData); | |
| }); | |
| function updateData(dataset) { | |
| color.domain([ | |
| d3.min(csvData, function(d) { return parseFloat(d[dataset]); }), | |
| d3.max(csvData, function(d) { return parseFloat(d[dataset]); }) | |
| ]); | |
| console.log( color.domain()) | |
| svg.selectAll('path') | |
| .style("fill", function(d) { | |
| //console.log(d) | |
| return color(d.properties[dataset]) | |
| }) | |
| } |
This file contains hidden or 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