24:null 25:["$","title",null,{"children":"COVID-19 in NYC by Zip Code & Income | Nick Bosman | Observable"}] 2a:T33cf,graphic = { let rendered = false; const svg = d3.select(DOM.svg(width, height)) .attr('color', '#999') .attr('font-family', "'Helvetica Neue', sans-serif") .attr('font-size', 12); const chart = svg.append('g') .attr('transform', `translate(${chart_offset.x}, ${chart_offset.y})`) .attr('class', 'chart'); const legendBox = svg.append('g') .attr('class', 'legend') .attr('transform', `translate(${chart_offset.x}, ${is_narrow ? 0 : height - 140})`) .attr('font-size', '10') .attr('color', '#333') .attr('fill', 'currentColor'); const infoBox = html`

`; const styleLabel = label => label .attr('text-anchor', 'middle') .attr('dominant-baseline', 'bottom') .attr('stroke-width', '2') .attr('fill', '#fff') .attr('paint-order', 'stroke') .attr('font-weight', 'bold') .attr('font-size', 14) .attr('pointer-events', 'none') .attr('visibility', 'hidden') .style('text-shadow', '0 0 3px #000, 0 0 3px #000'); const styleCircle = circle => circle .attr('stroke-width', 1) .attr('stroke', 'currentColor') .attr('stroke-opacity', 0.7) .attr('fill', 'currentColor') .attr('fill-opacity', 0.5); const stylePolygon = polygon => polygon .attr('stroke', '#fff') .attr('stroke-width', '0.05vw') .attr('stroke-linejoin', 'round') .attr('paint-order', 'normal'); const axes = chart.append('g').attr('class', 'axes'); let lastXFormat = '.0%'; let lastYFormat = '.0%'; let xAxis = axes.append('g').call(x_axis(lastXFormat)); let yAxis = axes.append('g').call(y_axis(lastYFormat)); const xLabel = chart.append('text') .attr('class', 'direction-label direction-label-x') .attr('color', '#333') .attr('fill', 'currentColor') .attr('text-anchor', 'middle') .attr('x', chart_width / 2) .attr('y', chart_height + 35); const yLabel = chart.append('text') .attr('class', 'direction-label direction-label-y') .attr('fill', '#333') .attr('text-anchor', 'middle') .attr('x', -chart_height / 2) .attr('y', 6) .attr('dy', is_narrow ? '-1em' : '-2em') .attr('transform', 'rotate(-90)'); const chartContent = chart .append('g') .attr('class', 'chart-content'); const cells = chartContent .selectAll('g') .data(voronoi(data).polygons(), d => d && d.data && d.data.modzcta) .join('g') .attr('class', 'cell') .attr('cursor', 'pointer'); const circles = cells .append('circle') .call(styleCircle); const labels = cells .append('text') .attr('class', 'label') .attr('dy', '-0.5em') .text(d => d && d.data.modzcta) .call(styleLabel); const line = chartContent.append('line') .attr('class', 'regression') .attr('fill', 'none') .attr('stroke', 'red') .attr('stroke-width', 2) .attr('pointer-events', 'none') .datum(linear_regression(data)); let mapX = map_margin.left; let mapY = map_margin.top; if (is_narrow) { mapY += chart_offset.y + chart_height; } else { const mapHeight = height - map_margin.top - map_margin.bottom; const mapWidth = mapHeight * (2 - map_aspect_ratio); mapX = width - mapWidth - map_margin.right; } const map = svg.append('g') .attr('transform', `translate(${mapX}, ${mapY})`) .attr('class', 'map'); const tracts = map .selectAll('g') .data(geojson.features) .join('g') .attr('class', 'tract') .attr('cursor', 'pointer'); const geoPath = d3.geoPath(projection); const polygons = tracts .append('path') .attr('class', 'polygon') .attr('fill', d => color(d.properties[encoding_defaults.color])) .attr('d', geoPath) .call(stylePolygon); tracts .append('text') .attr('class', 'label') .text(d => d.properties.modzcta) .attr('x', d => geoPath.centroid(d)[0]) .attr('y', d => geoPath.bounds(d)[0][1] - 3) .call(styleLabel); let mouseoutTimeout; [[cells, d => d.data], [tracts, d => d.properties]] .forEach(([els, accessor]) => { els .on('mouseover', (data) => { if (mutable lock_active_zip) return; const zip = accessor(data); // if (zip.population) { if (zip.tested) { clearTimeout(mouseoutTimeout); mutable active_zip = zip; } }) .on('mouseout', () => { if (mutable lock_active_zip) return; mouseoutTimeout = setTimeout(() => { mutable active_zip = undefined; }, 100); }) .on('click', (data) => { const zip = accessor(data); if (mutable lock_active_zip && mutable active_zip === zip) { mutable lock_active_zip = false; mutable active_zip = undefined; } else if (zip.tested) { clearTimeout(mouseoutTimeout); mutable lock_active_zip = true; mutable active_zip = zip; } }); }); return Object.assign(html`

${[svg.node(), infoBox]}

`, { update(encoding, duration = 300) { const t = svg.transition().duration(rendered ? duration : 0); x.domain(d3.extent(data, d => d[encoding.x])); y.domain(d3.extent(data, d => d[encoding.y])); color.domain(d3.extent(data, d => d[encoding.c])); size.domain(d3.extent(data, d => d[encoding.s])); voronoi.x(d => x(d[encoding.x])).y(d => y(d[encoding.y])); linear_regression.x(d => d[encoding.x]).y(d => d[encoding.y]); const regression = linear_regression(data); const agi = (Object.values(encoding).find(k => /^agi/.test(k)) || '').replace('agi_lt', ''); const [ [xFormat, xDesc, xLabelText], [yFormat, yDesc, yLabelText], [cFormat, cDesc], [sFormat, sDesc], ] = ['x', 'y', 'c', 's'].map((k) => { const def = encoding_options.find(o => o.value === encoding[k]) || {}; return [ def.format || '.0%', def.suffix || `made under $${agi}k in 2017`, def.right || 'Less wealthy', ]; }); const colorFormat = (d, i, e) => d3.format(cFormat)(d) + (i === e.length - 1 ? ` ${cDesc}` : ''); const sizeFormat = (d, i, e) => d3.format(sFormat)(d) + (i === e.length - 1 ? ` ${sDesc}` : ''); const appendDesc = (axis, selection, desc) => { axis.select('.axis-desc').remove(); return axis.select(selection) .append('text') .attr('class', 'axis-desc') .attr('fill', 'currentColor') .attr('text-anchor', 'start') .text(desc); }; const appendXDesc = () => appendDesc(xAxis, '.tick:first-of-type', xDesc) .attr('x', '0.5em') .attr('dy', '0.9em'); const appendYDesc = () => appendDesc(yAxis, '.tick:last-of-type', yDesc) .attr('dy', '1em'); const removeDomain = axis => () => axis.call(el => el.select('.domain').remove()); // Cross-fade axis if format changes, otherwise slide if (xFormat === lastXFormat) { xAxis.select('.axis-desc').text(xDesc); xAxis.transition(t) .on('start', removeDomain(xAxis)) .call(x_axis(xFormat)) .on('end', () => setTimeout(appendXDesc, 0)); } else { xAxis.transition(t) .on('start', removeDomain(xAxis)) .attr('opacity', 0) .remove(); xAxis = axes.append('g').attr('opacity', 0).call(x_axis(xFormat)); appendXDesc(); xAxis.transition(t) .on('start', removeDomain(xAxis)) .attr('opacity', 1); } if (yFormat === lastYFormat) { yAxis.select('.axis-desc').text(yDesc); yAxis.transition(t) .on('start', removeDomain(yAxis)) .call(y_axis(yFormat)) .on('end', () => setTimeout(appendYDesc, 0)); } else { yAxis.transition(t) .on('start', removeDomain(yAxis)) .attr('opacity', 0) .remove(); yAxis = axes.append('g').attr('opacity', 0).call(y_axis(yFormat)); appendYDesc(); yAxis.transition(t) .on('start', () => removeDomain(yAxis)) .attr('opacity', 1); } lastXFormat = xFormat; lastYFormat = yFormat; xLabel.text(`${xLabelText} ⟶`); yLabel.text(`${yLabelText} ⟶`); cells .data(voronoi(data).polygons(), d => d && d.data && d.data.modzcta) .join('g'); cells.selectAll('path').remove(); cells .append('path') .attr('d', d => d && d.join && `M${d.join('L')}Z`) .attr('fill', 'none') // .attr('stroke', 'red') .attr('pointer-events', 'all'); labels .transition(t) .attr('x', d => d && d.data && x(d.data[encoding.x])) .attr('y', d => d && d.data && y(d.data[encoding.y])); circles .transition(t) .attr('cx', d => d && d.data && x(d.data[encoding.x])) .attr('cy', d => d && d.data && y(d.data[encoding.y])) .attr('r', d => d && d.data && size(d.data[encoding.s])) .attr('color', d => d && d.data && color(d.data[encoding.c])); line .datum(regression) .transition(t) .attr('x1', d => x(d[0][0])) .attr('x2', d => x(d[1][0])) .attr('y1', d => y(d[0][1])) .attr('y2', d => y(d[1][1])); polygons .transition(t) .attr('fill', d => color(d.properties[encoding.c])); legendBox.html(''); legendBox .append('g') .html(legend({ color, tickFormat: colorFormat, width: is_narrow ? 160 : (width * 0.43) - 142 - chart_offset.x, }).innerHTML) .call(g => g.select('.tick:last-of-type text') .attr('text-anchor', 'start') .attr('x', '-0.6em')); legendBox .append('g') .call(legendCircle() .tickValues(d3.extent(data, d => d[encoding.s])) .tickSize(20) .tickFormat(sizeFormat) .scale(size)) .attr('transform', 'translate(0, 55)') .selectAll('text') .attr('font-size', null); legendBox .append('text') .attr('font-size', 12) .attr('transform', 'translate(0, 110)') .html(`Trendline: y = ${regression.a.toFixed(3)}x ${regression.b > 0 ? '+' : '−'} ${Math.abs(regression.b.toFixed(3))}, R² = ${regression.rSquared.toFixed(3)}`); rendered = true; }, select(datum) { tracts.attr('class', 'tract').select('text').attr('visibility', 'hidden'); cells.attr('class', 'cell').select('text').attr('visibility', 'hidden'); circles.call(styleCircle); polygons.call(stylePolygon); line.raise(); if (datum) { [[cells, 'cell', x => x.data.modzcta], [tracts, 'tract', x => x.properties.modzcta]] .forEach(([els, className, accessor]) => els .filter(d => accessor(d) === datum.modzcta) .attr('class', `${className} active`) .raise() .filter((_, i) => !i) .attr('class', `${className} active`) .select('text') .attr('visibility', 'visible')); cells .filter('.active') .select('circle') .attr('fill-opacity', 1) .attr('stroke', '#000') .attr('stroke-opacity', 1) .attr('stroke-width', 2); tracts .filter('.active') .select('path') .attr('stroke', '#000') .attr('stroke-width', 4) .attr('paint-order', 'stroke'); infoBox.innerHTML = `

${datum.modzcta}

${datum.neighborhood || datum.po_name}

Population	${format_int(datum.population)} residents
Tests	${format_int(datum.tested \|\| 0)}${datum.tested && ` (${format_int(datum.tested_per_1k)} per 1k residents)` \|\| ''}
Cases	${format_int(datum.cases \|\| 0)}${datum.cases && ` (${format_percent(datum.positive_ratio)} of tests, ${format_int(datum.cases_per_1k)} per 1k residents)` \|\| ''}
Deaths	${format_int(datum.dead \|\| 0)}${datum.dead && ` (${format_percent(datum.dead_cases_ratio)} of cases, ${format_int(datum.dead_per_1k)} per 1k residents)` \|\| ''}
Income	${datum.agi_total && ` ${[25, 50, 75, 100, 200] .map(agi => [`$${agi}k`, format_percent(datum[`agi_lt${agi}`])]) .map(([key, value]) => ` ${value} made under ${key} in 2017 `) .join('')} ` \|\| '—' }

`; } else { infoBox.innerHTML = ''; } }, }); }2b:T6ca,geojson = { const agiFields = ['agi_1_lt25', 'agi_25_lt50', 'agi_50_lt75', 'agi_75_lt100', 'agi_100_lt200']; const covidDataByModzcta = Object.fromEntries(raw_covid_data.map(d => [d.MODIFIED_ZCTA, d])); const agiDataByZip = Object.fromEntries(raw_agi_data.map(d => [String(d.zipcode), d])); const geometries = raw_topojson_data.objects.modzcta.geometries .map((geo) => { const { modzcta, pop_est } = geo.properties; const population = Number(pop_est); const agi = (modzcta !== '99999' && agiDataByZip[modzcta]) || {}; const { agi_total } = agi; const { TOTAL_COVID_TESTS: tested, COVID_CASE_COUNT: cases, PERCENT_POSITIVE: pPositive, COVID_DEATH_COUNT: dead, NEIGHBORHOOD_NAME: neighborhood, } = covidDataByModzcta[modzcta] || {}; const properties = Object.assign({ modzcta, tested, cases, positive_ratio: pPositive / 100, cases_per_1k: (cases * 1e3) / population, tested_per_1k: (tested * 1e3) / population, dead, dead_ratio: dead / tested, dead_per_1k: (dead * 1e3) / population, dead_cases_ratio: dead / cases, agi_total, }, geo.properties, { population, neighborhood }); let sum = 0; agiFields.forEach((key) => { sum += agi[key] || 0; properties[`agi${key.match(/_[^_]+$/)}`] = agi_total && sum / agi_total; }); return Object.assign({}, geo, { properties }); }); const topojson_data = Object.assign({}, raw_topojson_data, { objects: {} }); topojson_data.objects.modzcta = { type: 'GeometryCollection', geometries }; return topojson.feature(topojson_data, topojson_data.objects.modzcta); }2c:T557,encoding_options = [ { label: 'Income', value: 'income', format: '.0%', suffix: 'income', right: 'Less wealthy' }, { label: 'Population', value: 'population', format: '.0s', suffix: 'residents', right: 'More people' }, { label: 'Tests (total)', value: 'tested', format: ',d', suffix: 'total tests', right: 'More tests' }, { label: 'Tests relative to population', value: 'tested_per_1k', format: 'd', suffix: 'tests per 1k residents', right: 'More tested' }, { label: 'Cases (total)', value: 'cases', format: ',d', suffix: 'total cases', right: 'More cases' }, { label: 'Cases relative to population', value: 'cases_per_1k', format: 'd', suffix: 'cases per 1k residents', right: 'More infected' }, { label: 'Cases relative to tests', value: 'positive_ratio', format: '.0%', suffix: 'of tests came back positive', right: 'More infected' }, { label: 'Deaths (total)', value: 'dead', format: ',d', suffix: 'total deaths', right: 'More deaths' }, { label: 'Deaths relative to population', value: 'dead_per_1k', format: 'd', suffix: 'deaths per 1k residents', right: 'More deaths' }, { label: 'Deaths relative to tests', value: 'dead_ratio', format: '.1%', suffix: 'of those tested died', right: 'More deaths' }, { label: 'Deaths relative to cases', value: 'dead_cases_ratio', format: '.0%', suffix: 'of those infected died', right: 'More deaths' }, ]2d:[{"id":"677c942d427a9e04f31512cae5920d0f51e942b67cf6f91fc163fe006e4ba67c5f804d3cc88024ef35306936fecc44d22844e310583e392391285aba995cc866","href":"https://static.observableusercontent.com/files/677c942d427a9e04f31512cae5920d0f51e942b67cf6f91fc163fe006e4ba67c5f804d3cc88024ef35306936fecc44d22844e310583e392391285aba995cc866","name":"nyc-2017-agi-by-zipcode.csv","type":"text/csv","lastModified":1605832145172.598,"size":53011},{"id":"de69bce1d0c541331f1cd1cedacbe8816af37282000d99e4e07f34cb60bac9a36ceacd53077285e29d63e64075a7e80f55c502743a9dcdff6fa19e0ab95d0083","href":"https://static.observableusercontent.com/files/de69bce1d0c541331f1cd1cedacbe8816af37282000d99e4e07f34cb60bac9a36ceacd53077285e29d63e64075a7e80f55c502743a9dcdff6fa19e0ab95d0083","name":"nyc-modzcta-topo.json","type":"application/json","lastModified":1605838743921.306,"size":163980}] 28:{"id":"2a31bc4d2914b05b","slug":"covid-19-in-nyc-by-zip-code-income","title":"COVID-19 in NYC by Zip Code & Income","thumbnail":"3d19c59d8bccefc04ab5213dbfee7d9d70dad6736f5e82e70b17523b9e2c21a8","access_level":"public","create_time":"$D2020-04-04T23:38:52.568Z","update_time":"$D2024-05-18T04:40:03.243Z","view_time":null,"first_public_time":"$D2020-04-12T15:09:41.620Z","fork":false,"stars":67,"starred":false,"owner":{"type":"team","id":"71e001d943b9a4ca","login":"autopaideia","name":"Nick Bosman","avatar_url":"https://avatars-next.observableusercontent.com/018f7beaeae8ff5208d446b105e6970595f6f3ef1e4c696e738ae3ddf33eaa15","tier":"starter_2024"},"version":4055,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"8b835f9ac66a4056","login":"autopaideia","name":"Nick Bosman","avatar_url":"https://avatars-next.observableusercontent.com/018f7beaeae8ff5208d446b105e6970595f6f3ef1e4c696e738ae3ddf33eaa15","tier":null}],"members":[{"type":"individual","id":"8b835f9ac66a4056","login":"autopaideia","name":"Nick Bosman","avatar_url":"https://avatars-next.observableusercontent.com/018f7beaeae8ff5208d446b105e6970595f6f3ef1e4c696e738ae3ddf33eaa15","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":42,"collection":{"id":"e7cc41ec60819d92","slug":"coronavirus","title":"Coronavirus","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"type":"notebook","body":{"title":"COVID-19 in NYC by Zip Code & Income","cells":[{"id":0,"value":"md`# COVID-19 in NYC by Zip Code & Income\n\nCompare testing, positive and death rates in NYC with income levels across zip codes. Mouseover the bubbles in the scatter plot to locate the corresponding area on the map, mouseover areas on the map to find the corresponding bubble on the scatter plot.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":399,"value":"viewof options = {\n const encodings = Object.entries(encoding_defaults)\n .map(([key, value]) => [\n key.charAt(0).toUpperCase() + key.slice(1),\n value.match(/^agi/) ? 'income' : value,\n ]);\n\n const agiOptions = [25, 50, 75, 100, 200];\n\n const fields = encodings.map(([title, value]) => select({ title, value, options: encoding_options }));\n const keys = encodings.map(([title]) => title.toLowerCase()[0]);\n\n fields.push(slider({\n title: 'Income Threshold',\n min: 0,\n max: agiOptions.length - 1,\n step: 1,\n value: 2,\n format: i => `Under $${i}k/yr`,\n getValue: i => agiOptions[i.value],\n }));\n\n keys.push('agi');\n\n const inputs = inputsGroup([fields], [keys]);\n\n inputs\n .querySelectorAll('select')\n .forEach((el) => {\n el.style.marginBottom = '10px';\n });\n\n inputs\n .querySelectorAll('form > div > div:first-child')\n .forEach((el) => {\n el.style.display = 'inline-block';\n el.style.minWidth = '40px';\n });\n\n return inputs;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":460,"value":"$2a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2540,"value":"md`## Sources\n\n* COVID data from [NYC Department of Health](https://github.com/nychealth/coronavirus-data/blob/3eff13f01e2406c32d4efa83d7c2b1a36b291225/totals/data-by-modzcta.csv) (March 20, 2023).\n* Income data from [the IRS](https://www.irs.gov/statistics/soi-tax-stats-individual-income-tax-statistics-2017-zip-code-data-soi).\n* Map and population data from [NYC OpenData](https://data.cityofnewyork.us/Health/Modified-Zip-Code-Tabulation-Areas-MODZCTA-/pri4-ifjk).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2561,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"raw_covid_data = d3.csv('https://raw.githubusercontent.com/nychealth/coronavirus-data/3eff13f01e2406c32d4efa83d7c2b1a36b291225/totals/data-by-modzcta.csv', d3.autoType)\n// raw_covid_data = d3.csv('https://raw.githubusercontent.com/nychealth/coronavirus-data/master/totals/data-by-modzcta.csv', d3.autoType)\n// raw_covid_data = d3.csvParse(await FileAttachment('covid-data-by-modzcta-2020-11-19.csv').text(), d3.autoType)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3022,"value":"raw_agi_data = d3.csvParse(await FileAttachment('nyc-2017-agi-by-zipcode.csv').text(), d3.autoType)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3018,"value":"raw_topojson_data = FileAttachment('nyc-modzcta-topo.json').json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":932,"value":"$2b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1781,"value":"// Use only unique zip codes with both testing and income data\ndata = d3.groups(geojson.features, d => d.properties.modzcta)\n .map(([, [{ properties }]]) => properties)\n .filter(d => d.tested && d.agi_total)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2553,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3531,"value":"is_narrow = width <= 640","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"height = {\n if (is_narrow) {\n const mapHeight = width * map_aspect_ratio;\n return chart_offset.y + chart_height + map_margin.top + mapHeight + map_margin.bottom;\n }\n\n return Math.round(width / 1.618);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3537,"value":"chart_offset = is_narrow\n ? ({ x: 15, y: 140 })\n : ({ x: 35, y: 14 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":912,"value":"chart_width = is_narrow ? width - chart_offset.x : Math.round(width * 0.58)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":909,"value":"chart_height = Math.round(chart_width / (is_narrow ? 1.3 : 1.618))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"chart_margin = is_narrow\n ? ({ top: 20, right: chart_width * 0.04, bottom: 20, left: 20 })\n : ({ top: 20, right: 30, bottom: 20, left: 30 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4001,"value":"map_aspect_ratio = 587.09 / 590.5","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2566,"value":"map_margin = is_narrow\n ? ({ top: 60, right: 2, bottom: 2, left: 2 })\n : ({ top: 14, right: 8, bottom: 2, left: 0 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1446,"value":"$2c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1586,"value":"encoding_defaults = ({\n x: 'agi_lt25',\n y: 'positive_ratio',\n color: 'positive_ratio',\n size: 'population',\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":282,"value":"encoding = ['x', 'y', 'c', 's']\n .map(key => [key, options[key] === 'income' ? `agi_lt${options.agi}` : options[key]])\n .reduce((acc, [k, v]) => Object.assign(acc, { [k]: v }), {})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"x = d3.scaleLinear()\n .range([chart_margin.left, chart_width - chart_margin.right])\n .domain(d3.extent(data, d => d[encoding_defaults.x]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"y = d3.scaleLinear()\n .range([chart_height - chart_margin.bottom, chart_margin.top])\n .domain(d3.extent(data, d => d[encoding_defaults.y]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"color = d3.scaleSequential(d3.interpolateOrRd)\n .domain(d3.extent(data, d => d[encoding_defaults.color]))\n .unknown('#eee')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":313,"value":"size = d3.scaleSqrt()\n .range([\n chart_width * (is_narrow ? 0.013 : 0.008),\n chart_width * (is_narrow ? 0.03 : 0.02),\n ])\n .domain(d3.extent(data, d => d[encoding_defaults.size]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"linear_regression = d3.regressionLinear()\n .x(d => d[encoding_defaults.x])\n .y(d => d[encoding_defaults.y])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"voronoi = d3.voronoi()\n .extent([[0, 0], [chart_width, chart_height]])\n .x(d => x(d[encoding_defaults.x]))\n .y(d => y(d[encoding_defaults.y]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3705,"value":"style_axis = (axis, x, y) => {\n const text = axis.selectAll('.tick text:first-of-type');\n\n text.style('text-anchor', 'start');\n\n if (x !== undefined) text.attr('x', x);\n if (y !== undefined) text.attr('y', y);\n\n axis.selectAll('.tick line')\n .attr('color', 'lightgrey')\n .attr('stroke-dasharray', '1, 3')\n .attr('stroke-width', 1)\n .attr('stroke-linecap', 'round');\n\n axis.selectAll('.domain').remove();\n\n return axis;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"x_axis = format => g => g\n .attr('transform', `translate(0, ${chart_height})`)\n .attr('class', 'axis x')\n .call(d3.axisBottom(x).ticks(5, format).tickSize(-chart_height).tickPadding(0))\n .call(el => style_axis(el, '0.5em', '-1em'))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"y_axis = format => g => g\n .attr('class', 'axis y')\n .call(d3.axisLeft(y).ticks(5, format).tickSize(-chart_width).tickPadding(0))\n .call(el => style_axis(el, undefined, '-0.7em'))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"format_percent = d3.format('.2%')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"format_int = d3.format(',d')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":940,"value":"projection = {\n const projection = d3.geoMercator();\n\n if (is_narrow) projection.fitWidth(width - map_margin.left - map_margin.right, geojson);\n else projection.fitHeight(height - map_margin.top - map_margin.bottom, geojson);\n\n return projection;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1142,"value":"mutable active_zip = undefined","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3570,"value":"mutable lock_active_zip = false","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1281,"value":"graphic.select(active_zip)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3741,"value":"graphic.update(encoding)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"style = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2557,"value":"md`## Dependencies`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"d3 = require('d3@5', 'd3-array@2', 'd3-regression@1')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":465,"value":"topojson = require('topojson-client@3')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"import { select, slider } from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":396,"value":"import { inputsGroup } from '@bumbeishvili/input-groups'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":461,"value":"import { legend } from '@d3/color-legend'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2075,"value":"import { legendCircle } from '@harrystevens/circle-legend';","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2d","stdlib":"1","titling":"auto"}} 29:"$28:body"