31:Te6c,map = { let container = DOM.element('div', { style: `width:${width}px;height:${width / 1.8}px` }); yield container; // init map let map = L.map(container).setView([39.98,-75.2],11); // tileset let background = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', { attribution: '© OpenStreetMap contributors © CARTO', subdomains: 'abcd', maxZoom: 19 }); background.addTo(map); // geoJson previously prepped let ncJson = L.geoJSON(pa_data, { onEachFeature: onEachFeature, style: function (d) { return { weight: 0.75, opacity: 0, color: "white", fillOpacity: 0.5, fillColor: color(d.ageData.percentOver60), className: "pa_data" } } }).addTo(map); // Info box in top right ---- const info = L.control(); info.onAdd = function (map) { this._div = L.DomUtil.create('div', 'info'); this.update(); return this._div; }; info.update = function (feature) { // console.log(props); this._div.innerHTML = '

Tract Info

' + (feature ? '' + feature.ageData.tract + '
' + 'Population: ' + feature.ageData.total + '
' + 'Percent over 60: ' + format(feature.ageData.percentOver60) : 'Hover over a tract'); }; info.addTo(map); // Info box in top right ---- // Legend ---- const legendElem = L.control({ position: 'bottomright' }); legendElem.onAdd = function (map) { let div = L.DomUtil.create('div', 'info legend'); let d3Legend = legend({ color, title: `Percentage of Population over 60`, tickFormat: format }) div.innerHTML = d3Legend.outerHTML; return div; }; legendElem.addTo(map); // Legend ---- // Hospitals ---- // this doesn't seem to work well in a React context // const overlay = d3.select(map.getPanes().overlayPane); // const svg = overlay.select('svg'); // const hospitals = svg.selectAll('circle') // .attr("class", "hospitals") // .data(hospital_data, d => d.record) // .join('circle') // .attr('fill', 'red') // .attr('cx',d => ptX(d)) // .attr('cy',d => ptY(d)) // .attr('r', d => d.fields.Size / 35000) // .attr('opacity', 0.35) // const update = () => { // hospitals.attr('cx',d => ptX(d)) // .attr('cy',d => ptY(d)) // // .attr('r', d => (11 / map.getZoom()) * d.fields.Size / 35000) // } // map.on("zoomend", update) function ptX(d) { return map.latLngToLayerPoint([d.fields.Lat, d.fields.Lng]).x; } function ptY(d) { return map.latLngToLayerPoint([d.fields.Lat, d.fields.Lng]).y; } // Hospitals ---- // Leaflet interactivity functions ----- function highlightFeature(e) { let layer = e.target; layer.setStyle({ stroke: true, weight: 5, color: '#666', dashArray: '', fillOpacity: 0.8 }); if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) { layer.bringToFront(); } info.update(layer.feature); } function resetHighlight(e) { ncJson.resetStyle(e.target); } function zoomToFeature(e) { map.fitBounds(e.target.getBounds()); } function onEachFeature(feature, layer) { layer.on({ mouseover: highlightFeature, mouseout: resetHighlight, click: zoomToFeature }); } }32:T10cc,legend = function legend({ color, title, tickSize = 6, width = 320, height = 44 + tickSize, marginTop = 18, marginRight = 0, marginBottom = 16 + tickSize, marginLeft = 0, ticks = width / 64, tickFormat, tickValues } = {}) { const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .style("overflow", "visible") .style("display", "block"); let tickAdjust = g => g.selectAll(".tick line").attr("y1", marginTop + marginBottom - height); let x; // Continuous if (color.interpolate) { const n = Math.min(color.domain().length, color.range().length); x = color.copy().rangeRound(d3.quantize(d3.interpolate(marginLeft, width - marginRight), n)); svg.append("image") .attr("x", marginLeft) .attr("y", marginTop) .attr("width", width - marginLeft - marginRight) .attr("height", height - marginTop - marginBottom) .attr("preserveAspectRatio", "none") .attr("xlink:href", ramp(color.copy().domain(d3.quantize(d3.interpolate(0, 1), n))).toDataURL()); } // Sequential else if (color.interpolator) { x = Object.assign(color.copy() .interpolator(d3.interpolateRound(marginLeft, width - marginRight)), {range() { return [marginLeft, width - marginRight]; }}); svg.append("image") .attr("x", marginLeft) .attr("y", marginTop) .attr("width", width - marginLeft - marginRight) .attr("height", height - marginTop - marginBottom) .attr("preserveAspectRatio", "none") .attr("xlink:href", ramp(color.interpolator()).toDataURL()); // scaleSequentialQuantile doesn’t implement ticks or tickFormat. if (!x.ticks) { if (tickValues === undefined) { const n = Math.round(ticks + 1); tickValues = d3.range(n).map(i => d3.quantile(color.domain(), i / (n - 1))); } if (typeof tickFormat !== "function") { tickFormat = d3.format(tickFormat === undefined ? ",f" : tickFormat); } } } // Threshold else if (color.invertExtent) { const thresholds = color.thresholds ? color.thresholds() // scaleQuantize : color.quantiles ? color.quantiles() // scaleQuantile : color.domain(); // scaleThreshold const thresholdFormat = tickFormat === undefined ? d => d : typeof tickFormat === "string" ? d3.format(tickFormat) : tickFormat; x = d3.scaleLinear() .domain([-1, color.range().length - 1]) .rangeRound([marginLeft, width - marginRight]); svg.append("g") .selectAll("rect") .data(color.range()) .join("rect") .attr("x", (d, i) => x(i - 1)) .attr("y", marginTop) .attr("width", (d, i) => x(i) - x(i - 1)) .attr("height", height - marginTop - marginBottom) .attr("fill", d => d); tickValues = d3.range(thresholds.length); tickFormat = i => thresholdFormat(thresholds[i], i); } // Ordinal else { x = d3.scaleBand() .domain(color.domain()) .rangeRound([marginLeft, width - marginRight]); svg.append("g") .selectAll("rect") .data(color.domain()) .join("rect") .attr("x", x) .attr("y", marginTop) .attr("width", Math.max(0, x.bandwidth() - 1)) .attr("height", height - marginTop - marginBottom) .attr("fill", color); tickAdjust = () => {}; } svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(d3.axisBottom(x) .ticks(ticks, typeof tickFormat === "string" ? tickFormat : undefined) .tickFormat(typeof tickFormat === "function" ? tickFormat : undefined) .tickSize(tickSize) .tickValues(tickValues)) .call(tickAdjust) .call(g => g.select(".domain").remove()) .call(g => g.append("text") .attr("x", marginLeft) .attr("y", marginTop + marginBottom - height - 6) .attr("fill", "currentColor") .attr("text-anchor", "start") .attr("font-weight", "bold") .attr("class", "title") .text(title)); return svg.node(); }33:[{"id":"1a6f37642aa32e9729923a25486c748de05d741de45704aa46819b667e10a81c613b2ad2ff9c42e43f09c13819433e4a155bcbd7a64b41a5330f63c8bda5cdc8","href":"https://static.observableusercontent.com/files/1a6f37642aa32e9729923a25486c748de05d741de45704aa46819b667e10a81c613b2ad2ff9c42e43f09c13819433e4a155bcbd7a64b41a5330f63c8bda5cdc8","name":"percentOver60@1.json","type":"application/json","lastModified":1610816426365.525,"size":280530}] 2f:{"title":"Philadelphia Population Health Characteristics","cells":[{"id":0,"value":"md`# Philadelphia Population Health Characteristics`","pinned":false,"hidden":false,"mode":"ojs"},{"id":456,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":508,"value":"md`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":430,"value":"md`## Census Data \\n American Community Survey 2010 @ https://api.census.gov/data/2010/acs/acs5`","pinned":false,"hidden":false,"mode":"ojs"},{"id":429,"value":"md` Query by group for age and sex\n~~~js\nquery = \"https://api.census.gov/data/2010/acs/acs5?get=NAME,group(B01001)&for=tract:*&in=state:42\";\n\nageByTract = d3.json(query)\n~~~`","pinned":false,"hidden":false,"mode":"ojs"},{"id":426,"value":"md`Reduce ageByTract to pop over 60 in each tract as percent of total\n~~~js\npopOver60 = ageByTract.map((val,i,arr) => {\n return val.reduce((p,c,i,arr) => {\n //0 is NAME, 1 is GEOID, 2 is Total\n if(i === 0 || i === 1 || i === 2) return [...p,c];\n let label = vars.variables[ageByTract[0][i]];\n if(typeof label === \"undefined\") return p;\n // groups over 60\n let labelSplit = label.label.split(\"!!\");\n if(labelSplit.length < 4) return p;\n if (parseInt(labelSplit[3].charAt(0)) < 6) return p;\n return [...p,c]\n },[])\n})~~~`","pinned":false,"hidden":false,"mode":"ojs"},{"id":424,"value":"md`Reduce popOver60 to percent of total by tract \n~~~js\npercentOver60 = {\n let summary = new Map();\n popOver60.slice(1).map((val,index,arr) => {\n return val.reduce((p,c,i,arr) => {\n if(i === 0) return {...p, tract:c.split(\",\")[0]};\n if(i === 1) return p;\n if(i === 2) return {...p, total:c};\n if(i === 3) return {...p, totalOver60:d3.sum(arr.slice(3))};\n if(i === 4) return arr[2] > 0 ? {...p, percentOver60:d3.sum(arr.slice(3)) / arr[2]} : \n {...p, percentOver60:0};\n if(i === 5) summary[p.tract] = p;\n return p;\n },{})\n })\n return summary;\n}\n~~~`","pinned":false,"hidden":false,"mode":"ojs"},{"id":422,"value":"md`Retrieve data points from 2010 American Community Survey 5-Year Detailed Tables\n~~~js\nd3.json('https://api.census.gov/data/2010/acs/acs5/variables.json')\n~~~`","pinned":false,"hidden":false,"mode":"ojs"},{"id":584,"value":"md`This data was retrieved and processed as above, then saved as a json file for faster page loads.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":423,"value":"percentOver60 = FileAttachment(\"percentOver60@1.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":353,"value":"md`## Geographic Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":416,"value":"pa = {\n let _pa = fetch(\"https://raw.githubusercontent.com/Ennead-Architects-LLP/GIS_GEOJSON_CENSUS_TRACTS/master/42.geojson\").then(d => d.json())\n // add layer type to properties\n return _pa.then((p) => Object.assign({}, {...p, \n features:p.features.map(f => {\n return({...f, properties:{...f.properties, LAYER:\"tract\"}})\n })\n }\n ))\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":415,"value":"pa_data = {\n return({...pa, features:pa.features.map(d => {return({...d, ageData:percentOver60[d.properties[\"NAMELSAD\"]]})})});\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":384,"value":"md`#### Vis Biz`","pinned":false,"hidden":false,"mode":"ojs"},{"id":377,"value":"width = 900","pinned":false,"hidden":false,"mode":"ojs"},{"id":380,"value":"height = 600","pinned":false,"hidden":false,"mode":"ojs"},{"id":409,"value":"md`#### Color Scheme`","pinned":false,"hidden":false,"mode":"ojs"},{"id":408,"value":"color = d3.scaleSequential([0, maxVal], d3.interpolateYlGnBu)","pinned":false,"hidden":false,"mode":"ojs"},{"id":407,"value":"maxVal = d3.max(Object.values(percentOver60), d => d.percentOver60)","pinned":false,"hidden":false,"mode":"ojs"},{"id":406,"value":"format = color.tickFormat(5, \"%\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":235,"value":"md`#### Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"import { slider, select } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":404,"value":"import { table } from \"@gampleman/table\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"d3 = require('d3@6')","pinned":false,"hidden":false,"mode":"ojs"},{"id":675,"value":"function ramp(color, n = 256) {\n const canvas = DOM.canvas(n, 1);\n const context = canvas.getContext(\"2d\");\n for (let i = 0; i < n; ++i) {\n context.fillStyle = color(i / (n - 1));\n context.fillRect(i, 0, 1, 1);\n }\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":403,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":605,"value":"Airtable = require(\"https://bundle.run/airtable@0.8.1\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":658,"value":"md`### Leaflet`","pinned":false,"hidden":false,"mode":"ojs"},{"id":453,"value":"L = require('leaflet@1.7.1')","pinned":false,"hidden":false,"mode":"ojs"},{"id":479,"value":"leafletStyles = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":661,"value":"md`This adjustable for syling within the map`","pinned":false,"hidden":false,"mode":"ojs"},{"id":653,"value":"extraMapStyles = html``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}