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 = ''; } }, }); }