31:T917,chart = Plot.plot({ y: { label: '↑ Viral Concentration (normalized by population and flow rate)', grid: true, type: scaleType, tickFormat: 's', domain: [ // Exclude some particularly low outliers at the bottom end on log scale scaleType === 'log' ? d3.quantile(data, 0.0007, d => d.copies_l_x_average_flowrate) : 0, d3.max(data, d => d.copies_l_x_average_flowrate) ] }, x: { label: null, domain: [d3.min(data, d => d.sample_date), new Date()] }, color: { domain: wrrfAbbrs, range: colors, }, marks: [ // Milestones Marks (the ticks go up here to go behind everything else, but the text is at the bottom to go above) Plot.tickX(milestones, { x: 'date', stroke: '#999', strokeDasharray: '4,2' }), // Data points Plot.dot(data, { filter: d => selectedFacilities.includes(d.wrrf_abbreviation), y: 'copies_l_x_average_flowrate', x: 'sample_date', opacity: 0.25, fill: 'wrrf_abbreviation', }), // 7-sample average Plot.line(data, { filter: d => selectedFacilities.includes(d.wrrf_abbreviation), x: 'sample_date', y: (_, i, arr) => movingAverage(i, arr, 'copies_l_x_average_flowrate'), stroke: 'wrrf_abbreviation', strokeWidth: 3, }), // Final 7-sample average point with location label Plot.dot(data, Plot.selectLast({ filter: d => selectedFacilities.includes(d.wrrf_abbreviation), fill: 'wrrf_abbreviation', y: (_, i, arr) => movingAverage(i, arr, 'copies_l_x_average_flowrate'), x: 'sample_date', title: 'sample_date', })), Plot.text(data, Plot.selectLast({ filter: d => selectedFacilities.includes(d.wrrf_abbreviation), fill: 'wrrf_abbreviation', y: (_, i, arr) => movingAverage(i, arr, 'copies_l_x_average_flowrate'), x: 'sample_date', text: 'wrrf_name', textAnchor: 'start', dx: 8, stroke: '#FFF', strokeWidth: 4, })), // Milestone Text Plot.text(milestones, { x: 'date', textAnchor: 'start', text: 'name', dx: -4, dy: 0, rotate: 90, frameAnchor: 'top', stroke: '#FFF', fill: '#333', strokeWidth: 4, }), ], width: chartWidth, height: chartWidth / 1.6, marginRight: 100, })32:T12a5,map = (initialValue = []) => { const mapWidth = 400 const mapHeight = mapWidth const mapNode = htl.html`` const map = d3.select(mapNode) map.attr('style', `max-width: ${mapWidth}px; width: 100%`) const deselectedOpacity = 0.25 // Projections // NAD83 / New York Long Island (EPSG:32118) // https://github.com/veltman/d3-stateplane#nad83--new-york-long-island-epsg32118 // Added our own fitExtent to center on our map data const projection = d3.geoIdentity() .fitExtent([[20, 20], [mapWidth - 20, mapWidth - 20]], features.sewersheds) const path = d3.geoPath(projection) // Water map.append('rect') .attr('x', 0.5) .attr('y', 0.5) .attr('width', mapWidth - 1) .attr('height', mapWidth - 1) .attr('fill', '#F5F5F5') .attr('stroke', '#CCC') .attr('pointer-events', 'none') // New York const newYork = map.append('path') .attr('d', path(features.shoreline)) .attr('fill', '#CCC') .attr('stroke', '#FFF') .attr('pointer-events', 'none') // State container const selectedCities = initialValue const sewershedShapes = map.append('g') .selectAll() .data(features.sewersheds.features) .join('path') .attr('class', 'plant-sewershed') .attr('data-plant', d => d.properties.Sewershed) .attr('d', path) .attr('fill', d => colorScale(d.properties.Sewershed)) .attr('opacity', d => initialValue.includes(d.properties.Sewershed) ? 1 : deselectedOpacity) .attr('stroke', '#FFF') .attr('data-selected', d => initialValue.includes(d.properties.Sewershed)) .on('mouseover', function (e, d) { map.select(`.plant-name[data-plant="${d.properties.Sewershed}"]`).attr('opacity', 1) }) .on('mouseout', function (e, d) { map.select(`.plant-name[data-plant="${d.properties.Sewershed}"]`).attr('opacity', 0) }) .on('click', function (e, d) {{ const sel = d3.select(this) const sewershed = d.properties.Sewershed if (sewershed === 'UNKNOWN') return if (view.value.includes(sewershed)) { // if already selected, remove from value array const valueIdx = view.value.findIndex(v => sewershed === v) view.value.splice(valueIdx, 1) updateSelection(view.value) } else { // if not already selected, add to value array updateSelection(view.value.concat([sewershed])) } }}) const plantPoints = map.append('g') .selectAll() .data(features.plants.features.filter(d => d.properties.wpcp)) .join(g => { g.append('circle') .attr('class', 'plant-dot') .attr('data-plant', d => d.properties.wpcp) .attr('cx', d => projection(d.geometry.coordinates)[0]) .attr('cy', d => projection(d.geometry.coordinates)[1]) .attr('r', 5) .attr('stroke', '#FFF') .attr('fill', d => colorScale(d.properties.wpcp)) .attr('pointer-events', 'none') g.append('text') .attr('class', 'plant-name') .attr('data-plant', d => d.properties.wpcp) .attr('x', d => projection(d.geometry.coordinates)[0]) .attr('y', d => projection(d.geometry.coordinates)[1]) .attr('dx', 8) .attr('dy', 4) .attr('font-family', 'var(--sans-serif), sans-serif') .attr('font-size', 11) .attr('fill', '#000') .attr('stroke', '#FFF') .attr('stroke-width', 3) .attr('paint-order', 'stroke') .attr('text-anchor', 'start') .attr('opacity', 0) .attr('pointer-events', 'none') .text(d => d.properties.item_id) }) const updateSelection = (arr) => { view.value = arr view.dispatchEvent(new Event('input', { bubbles: true })) sewershedShapes .attr('opacity', d => arr.includes(d.properties.Sewershed) ? 1 : deselectedOpacity) .attr('data-selected', d => arr.includes(d.properties.Sewershed)) } const selectAll = htl.html`` const selectNone = htl.html`` selectAll.addEventListener('click', () => updateSelection(Array.from(wrrfAbbrs))) selectNone.addEventListener('click', () => updateSelection([])) const view = htl.html`

${map.node()}

Select: ${selectAll} ${selectNone}

` view.value = selectedCities return view }33:[{"id":"598c605d445a818284cc94ea7351ee7e67aec5a8a26694c7e8cf6621280d2d70ca57670160a5700e276a6bd8174b75a90eb1535e01ab5decdc58fbb8912c1293","href":"https://static.observableusercontent.com/files/598c605d445a818284cc94ea7351ee7e67aec5a8a26694c7e8cf6621280d2d70ca57670160a5700e276a6bd8174b75a90eb1535e01ab5decdc58fbb8912c1293","name":"Untitled.png","type":"image/png","lastModified":1663336454004.326,"size":1554161},{"id":"d8fe3573d49146df7c7d181861c4dbb4fabed46ae18045354fa5d40e5249afa2428d5ca08d83db1944b80bed198e3059d1ca5330d3cb4ac17ec777286b6550a7","href":"https://static.observableusercontent.com/files/d8fe3573d49146df7c7d181861c4dbb4fabed46ae18045354fa5d40e5249afa2428d5ca08d83db1944b80bed198e3059d1ca5330d3cb4ac17ec777286b6550a7","name":"sewersheds-and-plants.NAD83.new-york-long-island.geojson","type":"application/geo+json","lastModified":1663619122921.019,"size":7930949},{"id":"4a204cbd4cd13f678afec2b300df2cd29eea7c33651baaaad09ec07925f2c3936dd3bb2b9b1eae5ceb21aee65cb9c6b055574c91f3bf09649e8d39c30c5797a6","href":"https://static.observableusercontent.com/files/4a204cbd4cd13f678afec2b300df2cd29eea7c33651baaaad09ec07925f2c3936dd3bb2b9b1eae5ceb21aee65cb9c6b055574c91f3bf09649e8d39c30c5797a6","name":"NY-shoreline@1.geojson","type":"application/geo+json","lastModified":1663708190863.809,"size":5684166},{"id":"76777cfd45e93bc1553195e10cfda4cd3991b3b6eb9c59c50fec6495c66aa0c8f00ac8ce0725c4ec02f75e3528c17478afcad2b6bd0ebcc7a73613c9b663d75d","href":"https://static.observableusercontent.com/files/76777cfd45e93bc1553195e10cfda4cd3991b3b6eb9c59c50fec6495c66aa0c8f00ac8ce0725c4ec02f75e3528c17478afcad2b6bd0ebcc7a73613c9b663d75d","name":"sewersheds-and-plants@1.geojson","type":"application/geo+json","lastModified":1663707262164.404,"size":20751542},{"id":"494a8587cd82f4bf2ffdab8a4bd6976601ddb9112dc7828c6cecec6b740ef873cc2ed09d045d8a195a2f2a161315e2c9411a6d32e0a6b4514634e6c64f32796f","href":"https://static.observableusercontent.com/files/494a8587cd82f4bf2ffdab8a4bd6976601ddb9112dc7828c6cecec6b740ef873cc2ed09d045d8a195a2f2a161315e2c9411a6d32e0a6b4514634e6c64f32796f","name":"sewersheds.topo","type":"application/octet-stream","lastModified":1663876852134.689,"size":13567634}] 2f:{"title":"NYC SARS-CoV-2 Wastewater Data","cells":[{"id":0,"value":"# NYC SARS-CoV-2 Wastewater Data","pinned":false,"hidden":false,"mode":"md"},{"id":178,"value":"**Latest Reading:** ${d3.utcDay.count(d3.max(data, d => d.sample_date), new Date())} days ago, ${d3.utcFormat('%x')(d3.max(data, d => d.sample_date))}","pinned":false,"hidden":false,"mode":"md"},{"id":50,"value":"viewof scaleType = Inputs.radio(['log', 'linear'], { label: 'Scale', value: 'log' })","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":118,"value":"Lines show a 7-sample trailing average.","pinned":false,"hidden":false,"mode":"md"},{"id":204,"value":"viewof selectedFacilities = map(Array.from(wrrfAbbrs).slice(2, 4))","pinned":false,"hidden":false,"mode":"ojs"},{"id":88,"value":"Click on regions to toggle them on the chart.\n\n_Source: [NYC DEP/NYC OpenData](https://data.cityofnewyork.us/Health/SARS-CoV-2-concentrations-measured-in-NYC-Wastewat/f7dc-2q9f)_","pinned":false,"hidden":false,"mode":"md"},{"id":21,"value":"***\n\n## Implementation","pinned":false,"hidden":false,"mode":"md"},{"id":6,"value":"data = (await (await fetch('https://data.cityofnewyork.us/resource/f7dc-2q9f.json?$limit=9999')).json())\n .map(d => ({\n ...d,\n sample_date: d3.utcParse('%Y-%m-%dT%H:%M:%S.%L')(d.sample_date),\n test_date: d3.utcParse('%Y-%m-%dT%H:%M:%S.%L')(d.test_date),\n copies_l: +d.copies_l,\n copies_l_x_average_flowrate: +d.copies_l_x_average_flowrate,\n population_served: +d.population_served,\n // Standardize data to use abbreviations in map data\n wrrf_abbreviation: (d => {\n if (d.wrrf_abbreviation === 'JA') return 'JAM'\n if (d.wrrf_abbreviation === 'RK') return 'ROC'\n return d.wrrf_abbreviation\n })(d)\n }))\n .sort((a, b) => a.sample_date - b.sample_date)","pinned":true,"hidden":false,"mode":"ojs"},{"id":132,"value":"movingAverage = (i, arr, key, n = 7) => d3.mean(arr.slice(i - n + 1, i + 1), d => d[key])","pinned":true,"hidden":false,"mode":"ojs"},{"id":155,"value":"chartWidth = Math.max(width, 600)","pinned":true,"hidden":false,"mode":"ojs"},{"id":368,"value":"wrrfAbbrs = new Set(data.map(d => d.wrrf_abbreviation))","pinned":true,"hidden":false,"mode":"ojs"},{"id":349,"value":"// Programatically generate a color scheme by choosing hues around a rainbow and making colors progressively darker, then light again every 3rd color\ncolors = new Array(wrrfAbbrs.size).fill().map((_, i, arr) => (\n d3.color(\n d3.interpolateRainbow(i / arr.length)\n ).darker(i % 3).formatRgb()\n))","pinned":true,"hidden":false,"mode":"ojs"},{"id":141,"value":"## Milestones\n\nWe'll borrow the milestones from my [Boston-area wastewater notebook](https://observablehq.com/@harrislapiroff/mwra-wastewater-data):","pinned":false,"hidden":false,"mode":"md"},{"id":143,"value":"import {milestones} from \"@harrislapiroff/mwra-wastewater-data\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":242,"value":"## Map","pinned":false,"hidden":false,"mode":"md"},{"id":544,"value":"sewershedsTopology = FileAttachment(\"sewersheds.topo\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":561,"value":"features = ({\n shoreline: topojson.feature(sewershedsTopology, sewershedsTopology.objects.shoreline.geometries[0]),\n sewersheds: topojson.feature(sewershedsTopology, sewershedsTopology.objects.sewersheds),\n plants: topojson.feature(sewershedsTopology, sewershedsTopology.objects.plants),\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":278,"value":"colorScale = d3.scaleOrdinal()\n .range(colors.concat(['#CCC', '#CCC']))\n .domain(Array.from(wrrfAbbrs).concat(['UNKNOWN', 'NA']))","pinned":true,"hidden":false,"mode":"ojs"},{"id":199,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}