31:Tcc8,map = { let container = DOM.element('div', { style: `width:${width}px;height:${width / 1.8}px` }); yield container; const color = d3.scalePow() .domain(d3.extent(Array.from(hex_plus_population.values()))) .interpolate(()=>d3.interpolateViridis) .exponent(scaleExponent); function fill(currPopulation){ if(currPopulation == 0 || isNaN(currPopulation)) {return "none"} else{return color(currPopulation)} } //From http://leafletjs.com/examples/choropleth/ let map = L.map(container).setView([35, -80], 7); let CartoDB_Positron = L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap © CartoDB', subdomains: 'abcd', maxZoom: 19 }).addTo(map); map.attributionControl.addAttribution('Population data from 2010 US Census (US Census Bureau).'); let ncJson = L.geoJSON(hexagons, { onEachFeature: onEachFeature, style: function (d) { return { weight: 1, opacity: 0.7, color: fill(hex_plus_population.get(+d.properties.id)), fillOpacity: opacity, fillColor: fill(hex_plus_population.get(+d.properties.id)), className: "hexagons" } } }).addTo(map); // control that shows state info on hover const info = L.control(); info.onAdd = function (map) { this._div = L.DomUtil.create('div', 'info'); this.update(); return this._div; }; const populationFormat = d3.format(","); info.update = function (props) { this._div.innerHTML = '

Hexagon Information

' + (props ? 'ID: ' + props.id + '
' + 'Population: ' + populationFormat(hex_plus_population.get(+props.id)) : 'Hover over a tract'); }; info.addTo(map); function highlightFeature(e) { let layer = e.target; layer.setStyle({ stroke: true, weight: 5, color: '#666', dashArray: '', fillOpacity: opacity }); if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) { layer.bringToFront(); } info.update(layer.feature.properties); } const legend = L.control({ position: 'bottomright' }); legend.onAdd = function (map) { let div = L.DomUtil.create('div', 'info legend'), grades = [...quantize], labels = ['Population'], from, to; for (let i = 0; i < grades.length; i++) { from = grades[i]; to = grades[i + 1]; labels.push( ` ${populationFormat(grades[i])}`); } div.innerHTML = labels.join('
'); return div; }; legend.addTo(map); function resetHighlight(e) { ncJson.resetStyle(e.target); info.update(); } function zoomToFeature(e) { map.fitBounds(e.target.getBounds()); } function onEachFeature(feature, layer) { layer.on({ mouseover: highlightFeature, mouseout: resetHighlight, click: zoomToFeature }); } }32:T66b,md`We are going to load a geojson of hexagons made [here](https://beta.observablehq.com/@gallowayevan/making-hexagons-with-turf-js-incomplete) using [turf.js](http://turfjs.org/) that covers all the land area of North Carolina (somewhat greedily). This was then clipped using the following mapshaper commands: \`\`\` mapshaper hexagons.json -each 'this.properties.id=this.id' -o hexagons_with_id.json mapshaper hexagons_with_id.json -clip ../ncmap_outline.json -o clipped_hexagons.csv mapshaper hexagons_with_id.json -join clipped_hexagons.csv calc='join_count=count()' keys=id,id -o nc_intermediate.json mapshaper nc_intermediate.json -filter 'join_count == 1' -o nc_hexagons.json \`\`\` We also created some block centroids, which we will not load here because they are about 16mb. \`\`\` mapshaper tabblock2010_37_pophu.shp \\ -drop fields=STATEFP10,COUNTYFP10,TRACTCE10,BLOCKCE,PARTFLG \\ -each 'centroidX=this.centroidX, centroidY=this.centroidY' -o centroids.csv \`\`\` Then using the shapefile and the block centroids, I used Vladimir Agafonkin's [which-polygon](https://github.com/mapbox/which-polygon) to determine which centroids fall within which hexagons. \`\`\` let hexToPop = new Map(); let unmatched = []; const query = whichPolygon(hexagons); for(let i=0;i+d[1])).range([0, 1, 2, 3,4]).quantiles().map(d=>Math.round(d))","pinned":false,"hidden":false,"mode":"ojs"},{"id":256,"value":"quantize = d3.scaleQuantize().domain(d3.extent(Array.from(hex_plus_population), d=>+d[1])).ticks()","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"hexagons = d3.json(\"https://gist.githubusercontent.com/gallowayevan/c2ecfb717203e79f8a6aad699f29c7dd/raw/3f70e10716dd4500e07c2dc8b2c09b4dd623a5f4/nc_hexagons.json\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"height = width * 0.4","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"projection = d3\n .geoAlbers()\n .rotate([0, 62, 0])\n .fitSize([width-40, height], hexagons)\n ","pinned":false,"hidden":false,"mode":"ojs"},{"id":60,"value":"path = d3.geoPath(projection)","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":97,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":211,"value":"L = require('leaflet@1.2.0')","pinned":false,"hidden":false,"mode":"ojs"},{"id":226,"value":"leafletStyles = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":233,"value":"extraMapStyles = html``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}