32:T508,md`${ mapToShow == "poi-cbg" ? `## Places Visualization This view shows our data from the perspective of places. It visualizes the estimated visits from Census Tracts to each place of interest around Philadelphia. Each marker indicates a place of interest. Markers are grouped into clusters, which are color coded and numbered based on the total amount of estimated visits to its collective markers. Hover over a cluster to see a preview of its place markers and origin tracts. Census tracts are color coded, with the most opaque giving the most visitors and the least opaque giving the least visitors. Markers are color coded similarly to clusters. Click on a marker to view more detailed information about its specific place of interest. Median Dwell measures the average stay a visitor spends at that location in minutes. ` : `## Tracts Visualization This view shows our data from the perspective of Census Tracts. It visualizes the estimated visites to places of interest from each Census Tract around Philadelphia. Each Tract is color coded by the amount of outgoing people, with the most opaque giving the most people. Hover over or click on a tract to see all the destinations people from that tract are arriving to. Click on the tract for more detailed information. ` }`33:T3c0b,map3 = { const markerpng = await FileAttachment("new-marker.png").url(); const selmarkerpng = await FileAttachment("new-marker-highlighted.png").url(); const red = await FileAttachment("color-marker-red.png").url(); const orange = await FileAttachment("color-marker-orange.png").url(); const yellow = await FileAttachment("color-marker-yellow.png").url(); const green = await FileAttachment("color-marker-green.png").url(); const teal = await FileAttachment("color-marker-teal.png").url(); lmc; if (mapToShow == "cbg-poi") { let container = DOM.element("div", { class: "mainmap", style: `width:${width}px;height:${width * 0.7}px;` }); yield container; var visited = {}; let map = L.map(container).setView([40, -75.12], 11); if (tile_mode != "off") { L.tileLayer( `https://cartodb-basemaps-{s}.global.ssl.fastly.net/${tile_mode}_all/{z}/{x}/{y}{r}@2x.png` ).addTo(map); } let blocks; let isFocused = false; let mean_visits = aq_tracts .rollup({ mean: d => op.average(d.total_visits) }) .column("mean") .get(0); blocks = L.geoJSON(aq_tracts.objects(), { onEachFeature: (f, l) => { l.bindPopup(f.properties.NAMELSAD10); } }); let tractsInfo; const createTractsInfo = data => { let show_table = aq .from(data.safegraph_place_info) .derive({ Location: d => d.location_name, Category: d => d.category, Visits: d => Math.round(d.geoid_visits), 'Median Dwell': d => Math.round(d.median_dwell), 'Total Visits': d => Math.round(d.total_visits) }) .select( 'Location', 'Category', 'Visits', 'Median Dwell', 'Total Visits' ) .orderby(aq.desc('Visits')); L.Control.TractsInfo = L.Control.extend({ onAdd: map => { let div = L.DomUtil.create("div"); div.className = "tracts-info"; div.id = 'infobox'; div.innerHTML = `

${data.properties.NAMELSAD10}

Estimated Outgoing: ${Math.round( data.total_visits )} people

${show_table.toHTML()}

`; return div; }, onRemove: map => {} }); L.control.tractsInfo = opts => { return new L.Control.TractsInfo(opts); }; tractsInfo = L.control.tractsInfo({ position: "bottomright" }); tractsInfo.addTo(map); }; let defaultStyle; let highlightStyle = { weight: 1, opacity: 0.5, fillOpacity: 0.7, color: 'purple' }; blocks.eachLayer(l => { defaultStyle = view_fill.filter( g => g[0] == l.feature.origin_geoid )[0][1]; let target_table = l.feature.safegraph_place_info.map(p => L.circle([p.latitude, p.longitude], { radius: 2, title: p.location_name, place: p }).bindTooltip( p.location_name + '
' + Math.round(p.geoid_visits * 100) / 100 + ' average visits', { direction: "top" } ) ); let places = L.layerGroup(target_table); l.setStyle(defaultStyle); //bookmark l.on("mouseover", e => { if (!isFocused) { blocks.eachLayer(l => { let defaultStyle = view_fill.filter( g => g[0] == l.feature.origin_geoid )[0][1]; l.setStyle(defaultStyle); }); e.target.setStyle(highlightStyle); places.addTo(map); blocks.bringToFront(); } }); l.on("mouseout", e => { if (!isFocused) { blocks.eachLayer(l => { let defaultStyle = view_fill.filter( g => g[0] == l.feature.origin_geoid )[0][1]; l.setStyle(defaultStyle); }); e.target.setStyle(defaultStyle); places.remove(); } }); l.on("click", e => { isFocused = true; e.target.setStyle(highlightStyle); map.flyTo(e.latlng); places.addTo(map); console.log(places); blocks.bringToBack(); //let show_table = aq.table(l.feature.safegraph_place_info).view(); createTractsInfo(l.feature); var elem = L.DomUtil.get('infobox'); if (elem) { L.DomEvent.disableScrollPropagation(elem); L.DomEvent.disableClickPropagation(elem); } }); l.on('popupclose', e => { places.remove(); }); }); map.on("popupopen", e => { isFocused = true; }); map.on("popupclose", e => { isFocused = false; blocks.bringToFront(); tractsInfo.remove(); blocks.eachLayer(l => { let defaultStyle = view_fill.filter( g => g[0] == l.feature.origin_geoid )[0][1]; l.setStyle(defaultStyle); }); }); blocks.addTo(map); } else if (mapToShow == "poi-cbg") { let container = DOM.element("div", { class: "mainmap", style: `width:${width}px;height:${width * 0.7}px;` }); yield container; let map = L.map(container).setView([40, -75.12], 11); if (tile_mode != "off") { L.tileLayer( `https://cartodb-basemaps-{s}.global.ssl.fastly.net/${tile_mode}_all/{z}/{x}/{y}{r}@2x.png` ).addTo(map); } let isClusterMuted = false; let canClusterRefresh = true; const cluster = new L.markerClusterGroup({ animate: true, showCoverageOnHover: false, zoomToBoundsOnClick: true, disableClusteringAtZoom: 17, spiderfyOnMaxZoom: true, chunkedLoading: true, maxClusterRadius: 60, iconCreateFunction: cluster => { let info = cluster .getAllChildMarkers() .map(a => a.options.place.estimated_visits) .map(Number); let num = info.reduce((a, b) => a + b, 0); let size = clusterSize(num, []); let color = num > 200000 ? "red" : num > 50000 ? "orange" : num > 10000 ? "yellow" : num > 5000 ? "green" : "teal"; num = num > 1000 ? Math.round(num / 1000) + "k" : Math.round(num); return L.divIcon({ html: `

${num}

`, className: "cluster " + color + (isClusterMuted ? " muted" : ""), iconSize: L.point(size, size) }); } }); const markerImage = (x, mean, stdev) => { let z = (x - mean) / stdev; return z > 2 ? red : z > 1 ? orange : z > 0 ? yellow : z > -0.2 ? green : teal; }; const places_stats = aq_places .rollup({ mean: d => op.mean(d.total_visits), stdev: d => op.stdev(d.total_visits) }) .objects()[0]; const places = L.layerGroup( aq_places .objects() .filter(p => true) .map(p => L.marker([p.latitude, p.longitude], { icon: L.icon({ iconUrl: markerImage( p.total_visits, places_stats.mean, places_stats.stdev ), iconSize: markerSize(p.total_visits), iconAnchor: [ markerSize(p.total_visits)[0] / 2, markerSize(p.total_visits)[1] ] //popupAnchor: [5, -30] }), title: p.location_name, place: p }).bindTooltip(p.location_name, { direction: "top", offset: [0, (-markerSize(p.total_visits)[1] * 2.0) / 3.0] }) ) ); let markerInfo; const createMarkerInfo = data => { L.Control.MarkerInfo = L.Control.extend({ onAdd: map => { let div = L.DomUtil.create("div"); div.className = "marker-info"; div.innerHTML = `

${data.location_name}

Estimated Visits: ${Math.round( data.total_visits )} people

Median Dwell: ${Math.round( data.median_dwell )} minutes

${data.top_category}

`; return div; }, onRemove: map => {} }); L.control.markerInfo = opts => { return new L.Control.MarkerInfo(opts); }; markerInfo = L.control.markerInfo({ position: "bottomright" }); markerInfo.addTo(map); }; let canMarkerHover = true; let blocks; let hoverBlocks; let hoverDots; let clusterblocks; let blockLines; let placeMarker; let originLatLng, originZoom, originCluster; let highlightedLayer; cluster.on("clustermouseover", a => { let markers = a.layer.getAllChildMarkers(); let sorted_markers = markers .sort( (a, b) => a.options.place.estimate_visits - b.options.place.estimate_visits ) .slice(0, 500); hoverDots = L.layerGroup( sorted_markers.map(m => L.circle([m.options.place.latitude, m.options.place.longitude], { color: "purple", opacity: 0.5, radius: 1 }) ) ); hoverDots.addTo(map); let geoid_info = aq .from( markers.map(a => { return { info: a.options.place.origin_geoids_info }; }) ) .unroll("info") .derive({ origin_geoid: d => d.info.origin_geoid, estimate_visits: d => d.info.estimate_visits }) .select(aq.not("info")) .dedupe("origin_geoid"); let raw_table = aq .from(geoid_info) .join_left(aq_tracts_alt, ["origin_geoid", "geoid"]) .select("type", "properties", "geometry", "estimate_visits"); let mean_visits = raw_table .rollup({ mean: d => op.average(d.estimate_visits) }) .column("mean") .get(0); let target_table = raw_table.objects(); clusterblocks = L.geoJson(target_table, { style: f => { const color = "blue"; return { fillColor: color, color: color, stroke: true, weight: 1, opacity: 0.2, fillOpacity: tractsOpacity(f.estimate_visits, mean_visits, 0.3, 0.1) }; } }).addTo(map); highlightedLayer = a.layer; a.layer.setOpacity(0.5); }); cluster.on("clustermouseout unload", a => { hoverDots.remove(); clusterblocks.remove(); highlightedLayer.setOpacity(1); }); map.on("zoomend zoomstart zoom layerremove", a => { if (map.hasLayer(clusterblocks)) clusterblocks.remove(); if (map.hasLayer(hoverBlocks)) hoverBlocks.remove(); if (map.hasLayer(hoverDots)) hoverDots.remove(); }); cluster.on("animationend", e => { isClusterMuted = false; cluster.refreshClusters(); highlightedLayer.setOpacity(1); }); places.eachLayer(l => { let raw_table = aq .from(l.options.place.origin_geoids_info) .join_left(aq_tracts_alt, ["origin_geoid", "geoid"]) .select("type", "properties", "geometry", "estimate_visits"); let mean_visits = raw_table .rollup({ mean: d => op.average(d.estimate_visits) }) .column("mean") .get(0); let target_table = raw_table.objects(); let placeBlocks = (max_opacity, min_opacity, border_opacity) => { return L.geoJson(target_table, { style: f => { const color = "blue"; return { fillColor: color, color: color, stroke: true, weight: 1, opacity: border_opacity, fillOpacity: tractsOpacity( f.estimate_visits, mean_visits, max_opacity, min_opacity ) }; }, onEachFeature: (f, layer) => { layer.bindTooltip( Math.round(f.estimate_visits * 100.0) / 100 + " avg visits", { direction: "top", sticky: true } ); } }); }; if (canMarkerHover) { l.on("mouseover", e => { places.eachLayer(l => { l.setOpacity(0.4); }); e.target.setOpacity(1); isClusterMuted = true; cluster.refreshClusters(); hoverBlocks = placeBlocks(0.1, 0.05, 0); hoverBlocks.addTo(map); }); l.on("mouseout", e => { hoverBlocks.remove(); isClusterMuted = false; cluster.refreshClusters(); places.eachLayer(l => { l.setOpacity(1); }); }); } l.on("click", e => { places.eachLayer(l => { l.setOpacity(1); }); canMarkerHover = false; hoverBlocks.remove(); cluster.remove(); placeMarker = L.marker( [l.options.place.latitude, l.options.place.longitude], { icon: L.icon({ iconUrl: selmarkerpng, iconSize: markerSize(l.options.place.total_visits), iconAnchor: [ markerSize(l.options.place.total_visits)[0] / 2, markerSize(l.options.place.total_visits)[1] ], popupAnchor: [0, -25] }), title: l.options.place.location_name } ).bindPopup(`${l.options.place.location_name}`); placeMarker.addTo(map); placeMarker.openPopup(); blocks = placeBlocks(0.7, 0.2, 0.5); blockLines = L.layerGroup( target_table.map(b => L.polyline( [ [l.options.place.latitude, l.options.place.longitude], [b.properties.INTPTLAT10, b.properties.INTPTLON10] ], { opacity: 0.5 } ) ) ); blockLines.addTo(map); blocks.addTo(map); createMarkerInfo(l.options.place); let selectLatLng = blocks.getBounds().extend(placeMarker.getLatLng()); originLatLng = map.getBounds().getCenter(); originZoom = map.getZoom(); map.flyToBounds(selectLatLng, { duration: 0.7 }); }); }); cluster.addLayers(places); map.on("tooltipclose", e => { places.eachLayer(l => { l.setOpacity(1); }); if (isClusterMuted) { isClusterMuted = false; cluster.refreshClusters(); } }); map.on("popupclose", e => { canMarkerHover = true; if (isClusterMuted) { isClusterMuted = false; cluster.refreshClusters(); } cluster.addTo(map); blocks.remove(); hoverBlocks.remove(); blockLines.remove(); placeMarker.remove(); markerInfo.remove(); map.flyTo(originLatLng, originZoom, { duration: 0.5 }); //map.setView(originLatLng, originZoom); //originCluster.spiderfy(); }); cluster.addTo(map); invalidation.then(() => { cluster.remove(); }); cluster.options.animate = true; } }34:T6d4,html``35:T53d,TV_Scale_options_stroke = ({ //'Average Age', 'Under 20': data => { return TVTractsStroke( data['age_info']['Under 20'], demographic_data_alt .rollup({ mean: d => op.mean(d.age_info['Under 20']) }) .get('mean', 0), ); }, 'Over 65': data => { return TVTractsStroke( data['age_info']['Over 65'], demographic_data_alt .rollup({ mean: d => op.mean(d.age_info['Over 65']) }) .get('mean', 0), ); }, //'Ethnicity', //'Income', Poverty: data => { return TVTractsStroke( data['poverty_info']['Below'], demographic_data_alt .rollup({ mean: d => op.mean(d.poverty_info['Below']) }) .get('mean', 0), ); }, 'Family Households': data => { return TVTractsStroke( data['family_info']['Have Child'], demographic_data_alt .rollup({ mean: d => op.mean(d.family_info['Have Child']) }) .get('mean', 0), ); }, '% Car Riders': data => { return TVTractsStroke( data['transportation_info']['Car/Truck'], demographic_data_alt .rollup({ mean: d => op.mean(d.transportation_info['Car/Truck']) }) .get('mean', 0), ); } //'% Using Public Transportation', //'% Walking' })36:T563,TV_Scale_options_fill = ({ //'Average Age', 'Under 20': data => { return TVTractsFill( data['age_info']['Under 20'], demographic_data_alt .rollup({ mean: d => op.mean(d.age_info['Under 20']) }) .get('mean', 0), 0.5 ); }, 'Over 65': data => { return TVTractsFill( data['age_info']['Over 65'], demographic_data_alt .rollup({ mean: d => op.mean(d.age_info['Over 65']) }) .get('mean', 0), 0.5 ); }, //'Ethnicity', //'Income', Poverty: data => { return TVTractsFill( data['poverty_info']['Below'], demographic_data_alt .rollup({ mean: d => op.mean(d.poverty_info['Below']) }) .get('mean', 0), 0.5 ); }, 'Family Households': data => { return TVTractsFill( data['family_info']['Have Child'], demographic_data_alt .rollup({ mean: d => op.mean(d.family_info['Have Child']) }) .get('mean', 0), 0.5 ); }, '% Car Riders': data => { return TVTractsFill( data['transportation_info']['Car/Truck'], demographic_data_alt .rollup({ mean: d => op.mean(d.transportation_info['Car/Truck']) }) .get('mean', 0), 0.5 ); } //'% Using Public Transportation', //'% Walking' })37:Tbd7,demographic_data_alt = demographic_data .derive({ female: d => d[' female'], male: d => d[' male'], age_info: d => { return { 'Under 20': op.parse_float(d[' <20']), '20 to 34': op.parse_float(d[' 20-34']), '35 to 54': op.parse_float(d[' 35-54']), '55 to 75': op.parse_float(d[' 55-74']), 'Over 75': op.parse_float(d[' 75+']), 'Over 65': op.parse_float(d[' 65+']) }; }, ethnicity_info: d => { return { 'American Indian': op.parse_float( d[' American Indian and Alaska Native alone'] ), Asian: op.parse_float(d[' Asian alone']), Black: op.parse_float(d[' Black or African American alone']), White: op.parse_float(d[' White alone']), 'Pacific Islander': op.parse_float( d[' Native Hawaiian and Other Pacific Islander alone'] ), Other: op.parse_float(d[' Some other race alone']), 'Two or More': op.parse_float(d[' Two or more races:']) }; }, income_info: d => { return { 'Under $10k': op.parse_float(d[' Less than $10,000']), '$10k to $15k': op.parse_float(d[' $10,000 to $14,999']), '$15k to $20k': op.parse_float(d[' $15,000 to $19,999']), '$20k to $25k': op.parse_float(d[' $20,000 to $24,999']), '$25k to $30k': op.parse_float(d[' $25,000 to $29,999']), '$30k to $35k': op.parse_float(d[' $30,000 to $34,999']), '$35k to $40k': op.parse_float(d[' $35,000 to $39,999']), '$40k to $45k': op.parse_float(d[' $40,000 to $44,999']), '$45k to $50k': op.parse_float(d[' $45,000 to $49,999']), '$50k to $60k': op.parse_float(d[' $50,000 to $59,999']), '$60k to $75k': op.parse_float(d[' $60,000 to $74,999']), '$75k to $100k': op.parse_float(d[' $75,000 to $99,999']), '$100k to $130k': op.parse_float(d[' $100,000 to $124,999']), '$130k to $150k': op.parse_float(d[' $125,000 to $149,999']), '$150k to $200k': op.parse_float(d[' $150,000 to $199,999']), '$200k or more': op.parse_float(d[' $200,000 or more']) }; }, poverty_info: d => { return { Above: op.parse_float(d[' abovePovertyLevel']), Below: op.parse_float(d[' belewPovertyLevel']) }; }, family_info: d => { return { 'Have Child': op.parse_float(d[' own child under18']), 'No Child': op.parse_float(d[' no child under18']) }; }, transportation_info: d => { return { 'Car/Truck': op.parse_float(d[' Car truck or van']), 'Public Transportation': op.parse_float(d[' Public transportation']), Walking: op.parse_float(d[' walked']), 'Taxi/Bike/Other': op.parse_float( d[' Taxicab motorcycle bicycle or other means'] ) }; } }) .select( 'GEOID', 'female', 'male', 'age_info', 'ethnicity_info', 'income_info', 'poverty_info', 'family_info', 'transportation_info' )38:[{"id":"db7e70eb2941ea9f69fd9fea947eadb638b9f622a7cbc0c399811f897f36c2088c8b1d45979c8402d181101a0c7b4b73f266d302dbdd424005662dc2a74611dc","href":"https://static.observableusercontent.com/files/db7e70eb2941ea9f69fd9fea947eadb638b9f622a7cbc0c399811f897f36c2088c8b1d45979c8402d181101a0c7b4b73f266d302dbdd424005662dc2a74611dc","name":"Census_Tracts_2010.geojson","type":"application/geo+json","lastModified":1616380676672.771,"size":1298632},{"id":"afb21452bf07bc05f3d352d60d6e8ed73a6cdb4ebb7fc578383ce9930a3057adc3914522894c880aa931e49c3d0ba86d829df5b7730444c22f0854c59cc63f93","href":"https://static.observableusercontent.com/files/afb21452bf07bc05f3d352d60d6e8ed73a6cdb4ebb7fc578383ce9930a3057adc3914522894c880aa931e49c3d0ba86d829df5b7730444c22f0854c59cc63f93","name":"color-marker-green.png","type":"image/png","lastModified":1623292533851.54,"size":3261},{"id":"33ebf2c62cd6e278f44fd811b20815eb54d85087ed4a4c3ae5e1b2e77efc36f459ae61b791a46facdf597461c11187401e399b748bcc6959b2bd5b3f32d63c6c","href":"https://static.observableusercontent.com/files/33ebf2c62cd6e278f44fd811b20815eb54d85087ed4a4c3ae5e1b2e77efc36f459ae61b791a46facdf597461c11187401e399b748bcc6959b2bd5b3f32d63c6c","name":"color-marker-teal.png","type":"image/png","lastModified":1623292533887.581,"size":3157},{"id":"34145651f31d1414a80b4238c0fcfb44fc32e06bccc2e6d10e204c042f3466ad0a225a638310b59508af60f92b763d473ad5edfc91bf08ff0661c64bd062d69a","href":"https://static.observableusercontent.com/files/34145651f31d1414a80b4238c0fcfb44fc32e06bccc2e6d10e204c042f3466ad0a225a638310b59508af60f92b763d473ad5edfc91bf08ff0661c64bd062d69a","name":"color-marker-orange.png","type":"image/png","lastModified":1623292533866.626,"size":3091},{"id":"fb638891b1fe1acde7a23ef391f770835a67610a4ab95b7495c09a8c6f1f71717dd6d66f294325b3f3fd63ef6b40ec7e3e3b28cc6633e057b84bd803d88a6b61","href":"https://static.observableusercontent.com/files/fb638891b1fe1acde7a23ef391f770835a67610a4ab95b7495c09a8c6f1f71717dd6d66f294325b3f3fd63ef6b40ec7e3e3b28cc6633e057b84bd803d88a6b61","name":"Census_Block_Groups_2010.geojson","type":"application/geo+json","lastModified":1616380676672.771,"size":2482102},{"id":"56aaee97d3327d111d242489d73959ec785007707f1a383bd3d595806405061364640044f5b9f2730b8f8f3b4da425010217e0d82b950982f986dea599494051","href":"https://static.observableusercontent.com/files/56aaee97d3327d111d242489d73959ec785007707f1a383bd3d595806405061364640044f5b9f2730b8f8f3b4da425010217e0d82b950982f986dea599494051","name":"cluster-teal@2.png","type":"image/png","lastModified":1623010870726.399,"size":7782},{"id":"c2c399b14abb2ecafcb73c7d73dd785122fff86e6ddcbcf4994cd09c42c04eca32cc8fdc300abcc7f1384345fae618fc0efb1bf64a6449238c4793c06cb36751","href":"https://static.observableusercontent.com/files/c2c399b14abb2ecafcb73c7d73dd785122fff86e6ddcbcf4994cd09c42c04eca32cc8fdc300abcc7f1384345fae618fc0efb1bf64a6449238c4793c06cb36751","name":"cluster-orange@2.png","type":"image/png","lastModified":1623010646767.646,"size":7981},{"id":"f48a4b4b32e7de96136e48e3a2e49c993571edcbed283800aad2a3dd701bced7bfc6e299acee90417352fd7a68cda5ab7ed802952bea05f851351b384c414d22","href":"https://static.observableusercontent.com/files/f48a4b4b32e7de96136e48e3a2e49c993571edcbed283800aad2a3dd701bced7bfc6e299acee90417352fd7a68cda5ab7ed802952bea05f851351b384c414d22","name":"cluster-red.png","type":"image/png","lastModified":1623010529321.697,"size":7258},{"id":"1e73259a9ae7c756f70eae018e5de940b237eee54b0fbc2b2f3524349402144832061f7f2d41f7f8f6af9b72514fc11c4f8192eb72de07b16f161c8933d02222","href":"https://static.observableusercontent.com/files/1e73259a9ae7c756f70eae018e5de940b237eee54b0fbc2b2f3524349402144832061f7f2d41f7f8f6af9b72514fc11c4f8192eb72de07b16f161c8933d02222","name":"cluster-green.png","type":"image/png","lastModified":1623010529302.101,"size":7387},{"id":"c24f236f8d41b7ba6ec6c5397480eae55a086bd0235782ad8a771e3528ef5efa9b90380362d85e2da66ec8ae0de4d5fc75c86f888af500229956b7135bbf4c87","href":"https://static.observableusercontent.com/files/c24f236f8d41b7ba6ec6c5397480eae55a086bd0235782ad8a771e3528ef5efa9b90380362d85e2da66ec8ae0de4d5fc75c86f888af500229956b7135bbf4c87","name":"cluster-yellow.png","type":"image/png","lastModified":1623010529282.415,"size":7407},{"id":"b4d384c3660e03be2605fdac7a6f5d83e6242cc93501b44faa967d690af001394355ad6a7e5f874c8b940dc9a9ccd27a812801a752d0493443e92f22383aa14f","href":"https://static.observableusercontent.com/files/b4d384c3660e03be2605fdac7a6f5d83e6242cc93501b44faa967d690af001394355ad6a7e5f874c8b940dc9a9ccd27a812801a752d0493443e92f22383aa14f","name":"color-marker-red.png","type":"image/png","lastModified":1623292533853.425,"size":3323},{"id":"49d561492937e3cdb92998ac0dfefa393375dfb5e3122dd8429f0ad8cc776cb71024fcdd5e26e39a1503fb48abe01dfab530d5c8181c6ccddb8799a60c5adde8","href":"https://static.observableusercontent.com/files/49d561492937e3cdb92998ac0dfefa393375dfb5e3122dd8429f0ad8cc776cb71024fcdd5e26e39a1503fb48abe01dfab530d5c8181c6ccddb8799a60c5adde8","name":"color-marker-yellow.png","type":"image/png","lastModified":1623292533849.171,"size":3585},{"id":"015c6d5badf2e0bb9fbc96715e4369326ba7a3f8b65669560601bcd96afe56a5a3072cb03e580200dc35d0d72278ff7c1463ce31954f9034ed133cf47ec37849","href":"https://static.observableusercontent.com/files/015c6d5badf2e0bb9fbc96715e4369326ba7a3f8b65669560601bcd96afe56a5a3072cb03e580200dc35d0d72278ff7c1463ce31954f9034ed133cf47ec37849","name":"new-marker-highlighted.png","type":"image/png","lastModified":1623007137485.251,"size":3822},{"id":"81e997672a1505fcbf98e5144904cb9191d0fe2775b4bf6bea560d3c02d12325d3726249d90b42c45869a042dcef089285e03e52148c3cdacfdfb364eb3fd412","href":"https://static.observableusercontent.com/files/81e997672a1505fcbf98e5144904cb9191d0fe2775b4bf6bea560d3c02d12325d3726249d90b42c45869a042dcef089285e03e52148c3cdacfdfb364eb3fd412","name":"new-marker.png","type":"image/png","lastModified":1623007137479.885,"size":3719}] 30:{"title":"Philly mapping — COVID-19 Places of Interest and Census Tracts","cells":[{"id":0,"value":"md`# Philly mapping — COVID-19 Places of Interest and Census Tracts`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5694,"value":"md`## TODO\nImmediate:\n- Tracts: Be able to select a filter function, such as age, ethnicity, or vaccination rates, and view tracts color coded in that view.\n- Tracts: Size and color code POI dots by amount of incoming visitors.\n- Tracts: Filter/Search for GEOIDs\n- Tracts: Top 10 table, click/hover on rows in table to focus on a tract.\n\nNext:\n- Tracts: Dots are clustered like in the Places View.\n- Tracts: Plot all current vaccination sites.\n- Places: Weight Estimated Visits on a filter function, such as age, ethnicity, or vaccination rates.\n- Places: Top 10 table, click/hover on rows in table to focus on a place.\n\nFuture:\n- Tracts: homicide, crime rates.\n- Custom color ranges\n- Can we put some mapping features, e.g. lables\n- Loading icon? and think about shifting to EC2? \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1908,"value":"viewof mapToShow = radio({\n title: 'Map to show',\n options: [\n { label: 'Places', value: \"poi-cbg\" },\n { label: 'Tracts', value: \"cbg-poi\" }\n ],\n value: \"cbg-poi\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":7045,"value":"html`

${viewof TV_Scale_fill}

${viewof TV_Scale_line}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6614,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1735,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":2498,"value":"md`## Settings`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3932,"value":"date = \"2021-03-29\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":5322,"value":"md`#### POI Date range: \n\nearlist: 2019-02-04\n\nlatest: 2021-03-29\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5519,"value":"viewof view_select = select({\n options: view_col,\n title: \"Scale by\",\n value: 'estimated_visits'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":6634,"value":"viewof places_filter = Range(places_scale_focus_range, {\n value: 1,\n step: 1,\n label: `Filter by ${view}`\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":686,"value":"viewof colors = select({\n title: 'Color scheme',\n description: '',\n options: [\n \"Cividis\",\n \"Viridis\",\n \"Inferno\",\n \"Magma\",\n \"Plasma\",\n \"Warm\",\n \"Cool\",\n \"RdYlGn\"\n ],\n value: \"RdYlGn\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":6431,"value":"color_range = [\"#fff5f0\",\"#fee3d6\",\"#fdc9b4\",\"#fcaa8e\",\"#fc8a6b\",\"#f9694c\",\"#ef4533\",\"#d92723\",\"#bb151a\",\"#970b13\",\"#67000d\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1768,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"md`## Resources`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7026,"value":"view_fill = demographic_data_alt\n .objects()\n .map(g => [\n parseInt(g.GEOID),\n Object.assign(\n TV_Scale_options_fill[TV_Scale_fill](g),\n TV_Scale_options_stroke[TV_Scale_line](g)\n )\n ])","pinned":false,"hidden":false,"mode":"ojs"},{"id":7236,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":7033,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":7211,"value":"TVTractsStroke = (x, mean, weight_max = 5, weight_min = 0.1) => {\n let weight = logisticSize(weight_max, weight_min, x, mean, 3.0 / mean);\n return {\n weight: Math.floor(weight),\n opacity: 0.6,\n color: 'black'\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":6993,"value":"TVTractsFill = (\n x,\n mean,\n opacity_max,\n opacity_min,\n theme = 'varied',\n colorFunction = d3.interpolateRdYlGn\n) => {\n let color =\n theme != 'varied'\n ? theme\n : colorFunction(logisticSize(0, 1, x, mean, 3.0 / mean));\n let opacity =\n theme == 'varied'\n ? opacity_max\n : logisticSize(opacity_max, opacity_min, x, mean, 3.0 / mean);\n return {\n fillOpacity: opacity,\n fillColor: color\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":7257,"value":"TVTractStyle = (x1, x2, m1, m2, max_opacity, min_opacity) => {\n \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":6626,"value":"places_scale_focus = 'total_visits'","pinned":false,"hidden":false,"mode":"ojs"},{"id":3021,"value":"tile_mode = 'light'","pinned":false,"hidden":false,"mode":"ojs"},{"id":5242,"value":"places_scale = aq_places.rollup({\n max: op.max('total_visits'),\n min: op.min('total_visits'),\n median: op.median('total_visits')\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":6004,"value":"markerSize = x => {\n let height = logisticSize(\n 50,\n 10,\n x,\n places_scale.get('median', 0),\n 1.0 / places_scale.get('median', 0)\n );\n return [(height * 2) / 3.0, height];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":5819,"value":"clusterSize = (x, arr) => logisticSize(55, 15, x, 5000, .1 / 5000)","pinned":false,"hidden":false,"mode":"ojs"},{"id":6013,"value":"tractsOpacity = (x, med, max, min) => logisticSize(max, min, x, med, 4.0 / med)","pinned":false,"hidden":false,"mode":"ojs"},{"id":5999,"value":"logisticSize = (max, min, x, c, k) =>\n (max - min) / (1 + Math.pow(Math.E, -k * (x - c))) + min","pinned":false,"hidden":false,"mode":"ojs"},{"id":6998,"value":"rgb = d3.interpolateRdYlGn(1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3320,"value":"md`## Data imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6729,"value":"aq_tracts_unroll.view()","pinned":false,"hidden":false,"mode":"ojs"},{"id":6653,"value":"aq_tracts_unroll = ct_data\n .join(poi_data, 'safegraph_place_id')\n .join(aq_tracts_alt, ['origin_geoid', 'geoid'])\n .select(aq.not('geoid')) //, 'type', 'geometry'\n .rename({\n estimated_visits_1: 'geoid_visits',\n estimated_visits_2: 'place_total_visits',\n visits_sq_ft_1: 'geoid_sq_ft',\n visits_sq_ft_2: 'place_total_sq_ft'\n })\n .derive({\n geoid_latitude: d => op.parse_float(d.properties.INTPTLAT10),\n geoid_longitude: d => op.parse_float(d.properties.INTPTLON10)\n })\n .derive({\n geoid_place_distance: d =>\n op.sqrt(\n op.pow(d.latitude - d.geoid_latitude, 2) +\n op.pow(d.longitude - d.geoid_longitude, 2)\n )\n })\n .derive({\n weighted_visits: d => d.geoid_visits * d.geoid_place_distance\n })\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":6711,"value":"aq_tracts.view()","pinned":false,"hidden":false,"mode":"ojs"},{"id":6668,"value":"aq_tracts = aq_tracts_unroll\n .derive({\n safegraph_place_info: d => {\n return {\n safegraph_place_id: d.safegraph_place_id,\n location_name: d.location_name,\n latitude: d.latitude,\n longitude: d.longitude,\n longitude: d.longitude,\n area: d.area_square_feet,\n category: d.top_category,\n geoid_visits: d.geoid_visits,\n median_dwell: d.median_dwell,\n total_visits: d.estimated_visitors,\n total_sq_ft: d.place_total_sq_ft\n };\n }\n })\n .groupby(\"origin_geoid\")\n .rollup({\n type: op.any('type'),\n properties: op.any('properties'),\n geometry: op.any('geometry'),\n safegraph_place_info: op.array_agg('safegraph_place_info'),\n total_visits: op.sum('geoid_visits'),\n total_weighted_visits: op.sum('weighted_visits')\n })\n .join(demographic_data_alt, ['origin_geoid', 'GEOID'])\n .select(aq.not('GEOID'))","pinned":false,"hidden":false,"mode":"ojs"},{"id":6963,"value":"demographic_data_alt.view()","pinned":false,"hidden":false,"mode":"ojs"},{"id":6960,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":7108,"value":"demographic_data_alt\n .filter(d => d.GEOID == 42101000100)\n .get('transportation_info', 0)","pinned":true,"hidden":false,"mode":"ojs"},{"id":4975,"value":"aq_geoid = ct_data\n .groupby(\"origin_geoid\")\n .rollup({ visited_safegraph_place_ids: op.array_agg('safegraph_place_id') })\n .join_left(aq_tracts_alt, [\"origin_geoid\", \"geoid\"])\n .derive({\n features: d => ({\n type: d.type,\n properties: d.properties,\n geometry: d.geometry\n })\n })\n .select(aq.not('properties', 'geometry', 'type', 'geoid'))","pinned":false,"hidden":false,"mode":"ojs"},{"id":4936,"value":"aq_places_unfiltered = ct_data\n .params({ view: view })\n .derive({\n geoid_info: (d, $) => ({\n origin_geoid: d.origin_geoid,\n estimate_visits: d[$.view]\n }),\n raw_geoid_info: d => d.origin_geoid\n })\n .groupby(\"safegraph_place_id\")\n .rollup({\n origin_geoids_info: op.array_agg('geoid_info'),\n total_visits: op.sum(view)\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":5432,"value":"places_scale_focus_range = aq_places_unfiltered\n .rollup({\n min: op.min(places_scale_focus),\n max: op.max(places_scale_focus)\n })\n .fold(['min', 'max'])\n .columnArray(\"value\")\n .map(a => Math.round(a))","pinned":false,"hidden":false,"mode":"ojs"},{"id":5425,"value":"aq_places = aq_places_unfiltered\n .filter(`p => p.total_visits > ${places_filter}`)\n .join_left(poi_data, 'safegraph_place_id')","pinned":false,"hidden":false,"mode":"ojs"},{"id":5572,"value":"view_col = ct_data\n .columnNames()\n .filter(a => 'safegraph_place_id origin_geoid'.indexOf(a) < 0)","pinned":false,"hidden":false,"mode":"ojs"},{"id":4233,"value":"ct_data = aq.from(\n await d3.csv(`${base_URL}networks_${FIPS}/bipartite_CT_${date}.csv`)\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":4401,"value":"poi_data = aq.from(\n await d3.csv(`${base_URL}networks_${FIPS}/poi_summary_${date}.csv`)\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3927,"value":"FIPS = 42101","pinned":false,"hidden":false,"mode":"ojs"},{"id":3774,"value":"view = view_select","pinned":false,"hidden":false,"mode":"ojs"},{"id":4297,"value":"aq_tracts_alt = aq\n .from((await FileAttachment(\"Census_Tracts_2010.geojson\").json()).features)\n .derive({\n geoid: x => x.properties.GEOID10\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"phillyCensusBlockGroups = await FileAttachment(\"Census_Block_Groups_2010.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":6830,"value":"import { demographic_data } from \"@wattslab/covid-philly-census-tracts\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":7053,"value":"md`## Input Sliders`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6915,"value":"viewof TV_Scale_fill = select({\n options: Object.keys(TV_Scale_options_fill),\n title: \"Scale Fill by\",\n value: 'Family Households'\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":7080,"value":"viewof TV_Scale_line = select({\n options: Object.keys(TV_Scale_options_stroke),\n title: 'Scale Stroke by',\n value: '',\n format: 'MIKE'\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":6861,"value":"md`## Other Notes`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6847,"value":"html`https://github.com/d3/d3-interpolate#color-spaces`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3323,"value":"md`## Libraries and utilities`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7276,"value":"base_URL = \"https://upenn-seas-wattscovid19lab.s3.us-east-2.amazonaws.com/paco/stats/data/\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":3806,"value":"sortTimes = (a, b) => a.getTime() - b.getTime()","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"d3 = require('d3@5', 'd3-array@2', 'd3-regression@1')","pinned":false,"hidden":false,"mode":"ojs"},{"id":890,"value":"import { vl } from '@vega/vega-lite-api'","pinned":false,"hidden":false,"mode":"ojs"},{"id":4039,"value":"import { aq, op } from '@uwdata/arquero'","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"L = require('leaflet')","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":5513,"value":"lmc = {\n L;\n const leafletmarkercluster = await require('leaflet.markercluster@1');\n if (!leafletmarkercluster._style) {\n const href = await require.resolve(\n \"leaflet.markercluster@1/dist/MarkerCluster.css\"\n );\n const href2 = await require.resolve(\n \"leaflet.markercluster@1/dist/MarkerCluster.Default.css\"\n );\n document.head.appendChild(\n (leafletmarkercluster._style = html``)\n );\n }\n return leafletmarkercluster;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":3725,"value":"scope = (value, min, max) =>\n value > min ? (max ? (value < max ? value : max) : value) : min","pinned":false,"hidden":false,"mode":"ojs"},{"id":3139,"value":"stats = require('simple-statistics')","pinned":false,"hidden":false,"mode":"ojs"},{"id":2682,"value":"import { summarize, sigFigs, set } from \"@markwhiting/stats\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":188,"value":"import { radio, select, slider } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":5308,"value":"import {\n Button,\n Checkbox,\n Toggle,\n Radio,\n Range,\n Select,\n Text,\n Textarea,\n Search,\n Table\n} from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":861,"value":"import { Scrubber } from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":3880,"value":"import { SiteList } from '@markwhiting/covid-philly'","pinned":false,"hidden":false,"mode":"ojs"},{"id":3899,"value":"title = \"Mapping dashboard\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W38","stdlib":"1","titling":"auto"}