31: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 = ''; } }, }); }32: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); }33: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' }, ]34:[{"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}] 2f:{"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"},{"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"},{"id":460,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":2561,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":3018,"value":"raw_topojson_data = FileAttachment('nyc-modzcta-topo.json').json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":932,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":2553,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3531,"value":"is_narrow = width <= 640","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":3537,"value":"chart_offset = is_narrow\n ? ({ x: 15, y: 140 })\n : ({ x: 35, y: 14 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":912,"value":"chart_width = is_narrow ? width - chart_offset.x : Math.round(width * 0.58)","pinned":false,"hidden":false,"mode":"ojs"},{"id":909,"value":"chart_height = Math.round(chart_width / (is_narrow ? 1.3 : 1.618))","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":4001,"value":"map_aspect_ratio = 587.09 / 590.5","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":1446,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"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"},{"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"},{"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"},{"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"},{"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"},{"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"},{"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"},{"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"},{"id":150,"value":"format_percent = d3.format('.2%')","pinned":false,"hidden":false,"mode":"ojs"},{"id":168,"value":"format_int = d3.format(',d')","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":1142,"value":"mutable active_zip = undefined","pinned":false,"hidden":false,"mode":"ojs"},{"id":3570,"value":"mutable lock_active_zip = false","pinned":false,"hidden":false,"mode":"ojs"},{"id":1281,"value":"graphic.select(active_zip)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3741,"value":"graphic.update(encoding)","pinned":false,"hidden":false,"mode":"ojs"},{"id":84,"value":"style = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":2557,"value":"md`## Dependencies`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"d3 = require('d3@5', 'd3-array@2', 'd3-regression@1')","pinned":false,"hidden":false,"mode":"ojs"},{"id":465,"value":"topojson = require('topojson-client@3')","pinned":false,"hidden":false,"mode":"ojs"},{"id":171,"value":"import { select, slider } from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs"},{"id":396,"value":"import { inputsGroup } from '@bumbeishvili/input-groups'","pinned":false,"hidden":false,"mode":"ojs"},{"id":461,"value":"import { legend } from '@d3/color-legend'","pinned":false,"hidden":false,"mode":"ojs"},{"id":2075,"value":"import { legendCircle } from '@harrystevens/circle-legend';","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}