31:T62c,map = { const container = d3.select(svg`

`); container.node().appendChild( circleLegend(popScale) .values([1000000, 4000000, 10000000]) .circleColor('#333333') .textColor('#333333') .suffix('') .textPadding(10) .title('POPULATION') .render() ); const colorScaleContainer = document.createElement('div'); container.node().appendChild(colorScaleContainer); colorScaleContainer.classList.add('colorScale'); colorScaleContainer.appendChild( legend({ color: color, tickFormat: ".1", title: "County ozone levels in 2018", width: 140 }) ); var circs = container .select('.map') .selectAll("circle") .data(countiesPositioned) .enter() .append("circle") .attr("cx", d => d.x) .attr("cy", d => d.y) .attr("fill", d => mapLookup.has(+d.id) && mapLookup.get(+d.id) !== '#N/A' ? color(mapLookup.get(+d.id)) : 'rgb(240,240,240)' ) .attr("r", d => Math.sqrt(popScale(d.population) / Math.PI)) .append('title') .text(d => `${d.name}, ${d.state}`); return container.node(); }32:T444,countiesPositioned = await FileAttachment("countiesPositioned.json").json() /*{ let countiesCopy = counties.slice().filter(d => projection([d.long, d.lat])); const nodePadding = 0.1; const simulation = d3 .forceSimulation(countiesCopy) .force( "cx", d3 .forceX() .x(d => width / 2) .strength(0.02) ) .force( "cy", d3 .forceY() .y(d => (width * (5 / 8)) / 2) .strength(0.02) ) .force( "x", d3 .forceX() .x(d => projection([d.long, d.lat])[0]) .strength(0.3) ) .force( "y", d3 .forceY() .y(d => projection([d.long, d.lat])[1]) .strength(0.3) ) .force("charge", d3.forceManyBody().strength(-1)) .force( "collide", d3 .forceCollide() .radius(d => Math.sqrt(popScale(d.population) / Math.PI) + nodePadding) .strength(1) ) .stop(); let i = 0; while (simulation.alpha() > 0.01 && i < 200) { simulation.tick(); i++; } return countiesCopy; }*/33:T4e3,html``34:Tdba,function circleLegend(scale) { let instance = {}; // set some defaults const api = { domain: scale.domain(), // the values min and max range: scale.range(), // the circle area/size mapping values: [1000000, 5000000, 10000000], // values for circles x: 0, y: 0, suffix: '', // ability to pass in a suffix circleColor: '#888', textPadding: 80, textColor: '#454545', format: d3.format(".0s"), title: 'Default title', fontFamily: 'Arial', fontSize: '13px' }; const sqrtScale = d3 .scaleSqrt() .domain(api.domain) .range(api.range); instance.render = function() { const svg = d3.select(DOM.svg()); svg.attr('class', 'popScale'); svg.attr('viewBox', `0 0 ${width} ${height}`); const s = svg .append('g') .attr('class', 'legend-wrap') // push down to radius of largest circle .attr('transform', 'translate(50,42)'); // append the values for circles s.append('g') .attr('class', 'values-wrap') .selectAll('circle') .data(api.values) .enter() .append('circle') .attr('class', d => 'values values-' + d) .attr('r', d => Math.abs(sqrtScale(scale(d)))) .attr('cx', api.x) .attr('cy', d => api.y - Math.abs(sqrtScale(scale(d)))) .style('fill', 'none') .style('stroke', api.circleColor) .style('opacity', 0.9); // append some lines based on values s.append('g') .attr('class', 'values-line-wrap') .selectAll('.values-labels') .data(api.values) .enter() .append('line') .attr('x1', d => api.x + sqrtScale(scale(d))) .attr( 'x2', api.x + Math.abs( sqrtScale( Math.max( Math.abs(scale(api.domain[0])), Math.abs(scale(api.domain[1])) ) ) ) + 14 ) .attr('y1', d => api.y - Math.abs(sqrtScale(scale(d)))) .attr('y2', d => api.y - Math.abs(sqrtScale(scale(d)))) .style('stroke', api.textColor) .style('stroke-dasharray', '2,2'); // append some labels from values s.append('g') .attr('class', 'values-labels-wrap') .selectAll('.values-labels') .data(api.values) .enter() .append('text') .attr( 'x', api.x + Math.abs( sqrtScale( Math.max( Math.abs(scale(api.domain[0])), Math.abs(scale(api.domain[1])) ) ) ) + 8 + api.textPadding ) .attr('y', d => api.y - Math.abs(sqrtScale(scale(d))) + 4) .attr('shape-rendering', 'crispEdges') .style('text-anchor', 'start') .style('fill', api.textColor) .text(d => api.format(d) + api.suffix); s.append('g') .selectAll('text') .data(api.values) .enter() .append('text') //.attr('text', api.title) .attr('x', api.x) .attr('y', api.y + 15) .style('text-anchor', 'middle') .text(d => api.title); return svg.node(); }; // convert api fields to setter functions for (let key in api) { instance[key] = getSet(key, instance).bind(api); } return instance; // https://gist.github.com/gneatgeek/5892586 function getSet(option, component) { return function(_) { if (!arguments.length) { return this[option]; } this[option] = _; return component; }; } }35:[{"id":"17d8731b5d76d6cf5952d7ada20dee02d38f55631813223832ce51cf6fb940ca567e2de52d9fd58c762647e725282e9cc14b93935b83eebc44cdec7924db7c8f","href":"https://static.observableusercontent.com/files/17d8731b5d76d6cf5952d7ada20dee02d38f55631813223832ce51cf6fb940ca567e2de52d9fd58c762647e725282e9cc14b93935b83eebc44cdec7924db7c8f","name":"countiesPositioned.json","type":"application/json","lastModified":1585239529032.748,"size":709503},{"id":"bc3344395debcaa39ac7f0b88abb39c677b497d18a310befc28a4cbcb7c343250e8c7dd9cea5ae309b433ae2fbe530b15446915f891d9c1541d5b9a515490374","href":"https://static.observableusercontent.com/files/bc3344395debcaa39ac7f0b88abb39c677b497d18a310befc28a4cbcb7c343250e8c7dd9cea5ae309b433ae2fbe530b15446915f891d9c1541d5b9a515490374","name":"Air pollution data for CZS - 2018counties.csv","type":"text/csv","lastModified":1585255002634.747,"size":97413},{"id":"50848f0dd4d2d9c84821adba90ca625cb2815694117bbb7b6ae393e788aae9d85f19a6c73d60d642bb04e2f95b87993e8c7312d4d4da6a1431c58460f5ad6c63","href":"https://static.observableusercontent.com/files/50848f0dd4d2d9c84821adba90ca625cb2815694117bbb7b6ae393e788aae9d85f19a6c73d60d642bb04e2f95b87993e8c7312d4d4da6a1431c58460f5ad6c63","name":"counties-albers-10m.json","type":"application/json","lastModified":1585263394778.84,"size":795407}] 2f:{"title":"Counties where ozone is higher by population","cells":[{"id":0,"value":"md`# Counties where ozone is higher by population`","pinned":false,"hidden":false,"mode":"ojs"},{"id":537,"value":"md`Chart for the story \"[A likely but hidden coronavirus risk factor: pollution](https://publicintegrity.org/health/coronavirus-and-inequality/a-likely-but-hidden-coronavirus-risk-factor-pollution/)\"`","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"md`------\n\n\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"countiesP = require(\"@observablehq/population\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"countiesL = d3.tsv(\n \"https://gist.githubusercontent.com/bennyty/f108f1576436db72698e33503216d89a/raw/6c8eb355b9f6f59bf29692420a36e5f14c3e5dac/2017_Gaz_counties_national.txt\"\n // ,\n // function(d) {\n // const { NAME, INTPTLAT, INTPTLONG, ...unusedStuff } = d;\n // return {\n // name: NAME,\n // lat: Number(INTPTLAT),\n // long: Number(INTPTLONG),\n // ...unusedStuff\n // };\n // }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":96,"value":"counties = {\n const mergeArray = (source, merge, by, by2) =>\n source.map(item => ({\n ...item,\n ...(merge.find(i => i[by2] === item[by]) || {})\n }));\n return mergeArray(countiesL, countiesP, \"GEOID\", \"id\").map(x => {\n const {\n GEOID,\n NAME,\n INTPTLAT,\n INTPTLONG,\n population,\n state,\n ...allUnused\n } = x;\n return {\n id: GEOID,\n name: NAME,\n lat: Number(INTPTLAT),\n long: Number(INTPTLONG),\n population,\n state\n };\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":288,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":365,"value":"DOM.download(\n new Blob([JSON.stringify(countiesPositioned)], {\n type: \"application/json\"\n }),\n \"countiesPositioned.json\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"circleSizes = [1, 25]","pinned":false,"hidden":false,"mode":"ojs"},{"id":298,"value":"width = 975","pinned":false,"hidden":false,"mode":"ojs"},{"id":117,"value":"height = 610","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"popScale = {\n const populations = counties.map(d => d.population);\n return d3\n .scaleLinear()\n .domain([d3.min(populations), d3.max(populations)])\n .range([\n Math.PI * Math.pow(circleSizes[0], 2),\n Math.PI * Math.pow(circleSizes[1], 2)\n ]);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":137,"value":"projection = d3\n .geoAlbersUsa()\n .scale(1300)\n .translate([487.5, 305])","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":221,"value":"countyPollution = d3.csvParse(\n await FileAttachment(\"Air pollution data for CZS - 2018counties.csv\").text(),\n d3.autoType\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":223,"value":"mapLookup = new Map(countyPollution.map(d => [d.FIPSCode, d[mapMetric]]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":225,"value":"mapMetric = 'TercileOzone'","pinned":false,"hidden":false,"mode":"ojs"},{"id":227,"value":"extent = d3.extent(countyPollution, d => d[mapMetric])","pinned":false,"hidden":false,"mode":"ojs"},{"id":229,"value":"color = d3.scaleOrdinal(\n ['Least', 'Mid', 'Worst', 'No data'],\n ['#91bfdb', '#fee090', '#fc8d59', 'rgb(240,240,240)']\n)\n// d3.scaleQuantize(extent, palette)","pinned":false,"hidden":false,"mode":"ojs"},{"id":420,"value":"new Set(countyPollution.map(d => d[mapMetric]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":231,"value":"palette = [\n '#00429d',\n '#6d5c92',\n '#a27886',\n '#d09777',\n '#fdb863',\n '#e39059',\n '#c9694f',\n '#ae4045',\n '#93003a'\n]\n//d3.schemePuOr[11]","pinned":false,"hidden":false,"mode":"ojs"},{"id":307,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":319,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":407,"value":"import { legend } from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":521,"value":"path = d3.geoPath()","pinned":true,"hidden":false,"mode":"ojs"},{"id":523,"value":"us = FileAttachment(\"counties-albers-10m.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":526,"value":"topojson = require(\"topojson-client@3\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}