forked from pstuffa's block: NYC Neighborhoods II
Layering on some density contours based on NYC open data population maps
Last active
May 22, 2018 21:41
-
-
Save pstuffa/779d151078b85c077ecaac0d2ae34a16 to your computer and use it in GitHub Desktop.
NYC Neighborhoods III
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 | |
| height: 1000 |
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"> | |
| <style> | |
| svg { | |
| background-color: #000; | |
| } | |
| #neighborhoodPopover { | |
| position: absolute; | |
| text-align: center; | |
| padding: 2px; | |
| font: 12px sans-serif; | |
| background: #fff; | |
| border: 0px; | |
| border-radius: 8px; | |
| pointer-events: none; | |
| opacity: 0; | |
| } | |
| #nycPath { | |
| fill: #737373; | |
| stroke: #595959; | |
| } | |
| .contour { | |
| /* stroke: #000; | |
| fill-opacity: 0.58; | |
| stroke-width: .5; | |
| stroke-dasharray: 1; */ | |
| } | |
| </style> | |
| <body> | |
| <svg ></svg> | |
| <div id='neighborhoodPopover'> </div> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <script src="https://d3js.org/topojson.v1.min.js"></script> | |
| <script src="https://d3js.org/d3-contour.v1.min.js"></script> | |
| <script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script> | |
| <script> | |
| var svg = d3.select("svg"), | |
| width = 1000, | |
| height = 1000; | |
| svg.attr("width", width) | |
| .attr("height", height) | |
| // http://data.beta.nyc//dataset/0ff93d2d-90ba-457c-9f7e-39e47bf2ac5f/resource/35dd04fb-81b3-479b-a074-a27a37888ce7/download/d085e2f8d0b54d4590b1e7d1f35594c1pediacitiesnycneighborhoods.geojson | |
| d3.queue() | |
| .defer(d3.json,"nyc.json") | |
| .defer(d3.json,"https://data.cityofnewyork.us/resource/wwhg-3wy7.json") | |
| .await(ready); | |
| var popMap = {}; | |
| function ready(error, nyc, nycData) { | |
| console.log(nyc, nycData) | |
| if (error) throw error; | |
| nycData.forEach(function(d) { | |
| var hoods = d["nta_name"].split("-"); | |
| hoods.forEach(function(hood) { | |
| popMap[hood] = (+d["population"]/hoods.length) | |
| }) | |
| }) | |
| console.log(popMap) | |
| var path = d3.geoPath() | |
| .projection(d3.geoConicConformal() | |
| .parallels([33, 45]) | |
| .rotate([96, -39]) | |
| .fitSize([width, height], nyc)); | |
| // asdfasdfasd fas | |
| console.log(nyc); | |
| var populationData = []; | |
| nyc.features.forEach(function(neighborhood) { | |
| var numPopulation = Math.round(popMap[neighborhood["properties"] ["neighborhood"]]/1000) | |
| d3.range(numPopulation).map(Object).forEach(function(pop, id) { | |
| populationData.push({"neighborHoodD": neighborhood, popID: id}) | |
| }) | |
| }) | |
| var contourPopData = d3.contourDensity() | |
| .x(function(d) { return path.centroid(d.neighborHoodD)[0]; }) | |
| .y(function(d) { return path.centroid(d.neighborHoodD)[1]; }) | |
| .size([width, height]) | |
| .cellSize(10) | |
| .bandwidth(20) | |
| (populationData); | |
| var popExtent = d3.extent(contourPopData, function(d) { return d.value }); | |
| // color.domain([popExtent[1],popExtent[0]]) | |
| var color = d3.scaleSequential(d3.interpolateGreys) | |
| .domain([.08, 0]) | |
| svg.append("path") | |
| .datum(nyc) | |
| .attr("d", path) | |
| .attr("id", "nycPath") | |
| .style("fill", function() { return color(.0075) }) | |
| .style("stroke", color(.01)) | |
| svg.append("clipPath") | |
| .attr("id", "clipPathID") | |
| .append("use") | |
| .attr("xlink:href","#nycPath"); | |
| var contours = svg.append("g") | |
| .attr("fill", "none") | |
| .selectAll(".contour") | |
| .data(contourPopData) | |
| .enter().append("g"); | |
| contours.append("path") | |
| .attr("clip-path","url(#clipPathID)") | |
| .attr("class", "contour") | |
| .style("fill", function(d) { return color(d.value) }) | |
| .attr("d", d3.geoPath()); | |
| } | |
| </script> | |
| </body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment