29:null 2a:["$","title",null,{"children":"Mask Wearing in Your County | Connor Rothschild | Observable"}] 2f:T4a4,barChart = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); svg.append("g") .selectAll("rect") .data(masks.filter(d => d.full_loc_name == countySelector)) .join("rect") .attr("fill", d => colorFreq(d.freq)) .attr("x", xBar(0)) .attr("y", d => yBar(d.freq)) .attr("height", yBar.bandwidth()) .transition() .duration(1000) .attr("width", d => xBar(d.perc) - xBar(0)); svg.append("g") .attr("fill", "white") .attr("text-anchor", "end") .attr("font-family", "system-ui") .attr("font-size", 20) .selectAll("text") .data(masks.filter(d => d.full_loc_name == countySelector)) .join("text") .attr("x", d => xBar(d.perc)) .attr("y", d => yBar(d.freq) + yBar.bandwidth() / 2) .attr("dy", "0.35em") .attr("dx", -10) .text(d => formatPercent(d.perc)) .call(text => text.filter(d => d.perc < .20) // short bars .attr("dx", + 4) .attr("fill", "black") .attr("text-anchor", "start")); svg.append("g") .call(yAxisBar) .attr('font-size', '16px') .attr('font-family', '-apple-system'); return svg.node(); }30:Tfd7,bubbleChart = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); var joinedForPlot = joined.filter(d => d.freq == frequencySelector); var circles = svg.append("g") .attr("fill", "none") .attr("stroke", "black") .attr("stroke-width", 0) .selectAll("g") .data(joinedForPlot.filter(d => d.full_loc_name != countySelector)) .enter().append("circle") .attr("cx", function(d){return bubbleX(d.perc)}) .attr("cy",function(d){return bubbleY(d.cases)}) .attr("r", function(d){return bubbleSize(d.pop)}) // .attr("fill", function(d){return color(d.region)}) .attr('fill', primary_blue) .attr("opacity", 0.3) var cicleSpecial = circles.data(joinedForPlot.filter(d => d.full_loc_name == countySelector)) .attr("cx", function(d){return bubbleX(d.perc)}) .attr("cy",function(d){return bubbleY(d.cases)}) .attr("r", function(d){return bubbleSize(d.pop)}) .attr('fill', emphasis_red) .attr("opacity", 1) .raise() // raise on top of other circles (how did I not know this existed?) .attr("stroke-width", 2) .attr("stroke", "black"); svg.append("g") .selectAll("text") .data(joinedForPlot.filter(d => d.full_loc_name == countySelector)) .join("text") .attr("class", "text") .attr("text-anchor", "middle") .attr('font-size', width > 500 ? '20px' : '10px') .attr("x", bubbleX(.4)) .attr("y", height * .1) .style('z-index', 1) .text(d => d.full_loc_name) const arrowPoints = [[15, 15], [15, 15], [15, 15], [15, 15]]; // Define the arrowhead marker variables const markerBoxWidth = 15; const markerBoxHeight = 15; const refX = markerBoxWidth / 2; const refY = markerBoxHeight / 2; // Add the arrowhead marker definition to the svg element svg .append('defs') .append('marker') .attr('id', 'arrow') .attr('viewBox', [0, 0, markerBoxWidth, markerBoxHeight]) .attr('refX', refX) .attr('refY', refY) .attr('markerWidth', markerBoxWidth) .attr('markerHeight', markerBoxHeight) .attr('orient', 'marker-start') .append('path') .attr('d', d3.line()(arrowPoints)) .attr('stroke', 'black'); // Source node position of the link must account for radius of the circle const linkSource = { x: bubbleX(.4), y: height * .125 }; // Target node position of the link must account for radius + arrow width const linkTarget = { x: bubbleX(countySelectorInfo[0].perc), y: bubbleY(countySelectorInfo[0].cases), }; // Define a horizontal link from the first circle to the second const link = d3 .linkHorizontal() .x(d => d.x) .y(d => d.y)({ source: linkSource, target: linkTarget }); svg .append('path') .attr('d', link) .attr('marker-end', 'url(#arrow)') .attr('stroke', 'black') .attr('fill', 'none'); circles.on('mouseover', function(d) { // make the tooltip visible and update its text bubbleTooltip .style("visibility", "visible") .html(`${d.full_loc_name}
% ${frequencySelector.toLowerCase()} wearing masks: ${formatPercent(d.perc)}
COVID-19 cases to date: ${formatComma(d.cases)}
Population: ${formatComma(d.pop)}`) }) .on("mousemove", function(d) { bubbleTooltip .style("top", d3.event.pageY - 100 + "px") .style("left", d3.event.pageX + 10 + "px"); // } }) .on("mouseout", function() { bubbleTooltip.style("visibility", "hidden"); }); svg.append("g") .call(bubbleXAxis); svg.append("text") .attr("transform", `translate(${((width - marginBubble.left) /2)}, ${(height + marginBubble.top - 20)})`) .style("text-anchor", "middle") .text("Percent " + frequencySelector.toLowerCase() + " wearing mask"); svg.append("g") .call(bubbleYAxis); return svg.node(); }31:T5c1,histogram = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); var currentCounty = masks.filter(d => d.full_loc_name == countySelector && d.freq == frequencySelectorHist) var currentCountyAdherence = currentCounty[0].perc svg.append("g") .selectAll("rect") .data(bins) .join("rect") .attr("fill", function(d) { if(d.x1 > currentCountyAdherence && d.x0 < currentCountyAdherence) { return emphasis_red } else { return primary_blue } }) .attr('opacity', .8) .attr("x", d => histogramX(d.x0) + 1) .attr("width", d => Math.max(0, histogramX(d.x1) - histogramX(d.x0) - 1)) .attr("y", d => histogramY(d.length)) .attr("height", d => histogramY(0) - histogramY(d.length)); svg.append("g") .call(histXAxis); svg.append("g") .call(histYAxis); svg.selectAll("rect") .on('mouseover', function(d) { histTooltip .style("visibility", "visible") .html(`${d.length} counties have a(n) '${frequencySelectorHist.toLowerCase()}'\nmask-wearing rate between ${formatPercent(d3.min(d))} and ${formatPercent(d3.max(d))}`) }) .on("mousemove", function(d) { histTooltip .style("top", d3.event.pageY - 10 + "px") .style("left", d3.event.pageX + 10 + "px"); }) .on("mouseout", function() { histTooltip.style("visibility", "hidden"); }); return svg.node(); }32:T60f,{ const brush = vl.selectInterval() const caseChart = vl.markBar({color: primary_blue}) .select(brush) .transform( vl.calculate('datum.county + " County: " + format(datum.cases, ",") + " cases"').as('tooltip') ) .encode( vl.x().fieldT("date") .axis({ title: null, ticks: false, labelAngle: 0, labelPadding: 5, grid: false }), vl.y().sum("cases") .axis({ title: null, ticks: false, labelAngle: 0, labelPadding: 5, grid: true }), vl.tooltip().fieldN('tooltip'), vl.color().value('lightgray').if(brush, vl.color().value(primary_blue)) ) .title({text:'Cases over time, cumulative', fontSize:20, font:'Source Serif Pro'}) .width(width * .9) .autosize('fit') const deathChart = vl.markBar({color: emphasis_red}) .select(brush) .transform( vl.calculate('datum.county + " County: " + format(datum.deaths, ",") + " deaths"').as('tooltip') ) .encode( vl.x().fieldT("date") .axis({ title: null, ticks: false, labelAngle: 0, labelPadding: 5, grid: false }), vl.y().sum("deaths") .axis({ title: null, ticks: false, labelAngle: 0, labelPadding: 5, grid: true }), vl.tooltip().fieldN('tooltip'), vl.color().value('lightgray').if(brush, vl.color().value(emphasis_red)) ) .title({text:'Deaths over time, cumulative', fontSize:20, font:'Source Serif Pro'}) .width(width * .9) .autosize('fit') return vl.vconcat(caseChart, deathChart) .data(cases.filter(d => d.full_loc_name == countySelector)) .config({ view: { stroke: null } }) .render() }33:T97c,similarCountiesChart = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); var circles = svg.append("g") .attr("fill", "none") .attr("stroke", "black") .attr("stroke-width", 0) .attr("opacity", 1) .selectAll("g") .data(similarCounties.filter(d => d.full_loc_name != countySelector)) .enter().append("circle") .attr("cx", function(d){return similarCountiesX(d.perc)}) .attr("cy",function(d){return similarCountiesY(d.cases_per_100k)}) .attr("r", function(d){return similarCountiesSize(d.pop)}) .attr("fill", function(d){return colorRegion(d.region)}) // .attr('fill', primary_blue) .attr("opacity", 0.5) circles.data(similarCounties.filter(d => d.full_loc_name == countySelector)) .attr("cx", function(d){return similarCountiesX(d.perc)}) .attr("cy",function(d){return similarCountiesY(d.cases_per_100k)}) .attr("r", function(d){return similarCountiesSize(d.pop)}) .attr("fill", function(d){return colorRegion(d.region)}) .attr("opacity", 1) .raise() .attr("stroke-width", 2) .attr("stroke", "black"); svg.selectAll('circle').on('mouseover', function(d) { bubbleTooltip .style("visibility", "visible") .html(`${d.full_loc_name}
% ${frequencySelectorSimilar.toLowerCase()} wearing masks: ${formatPercent(d.perc)}
COVID-19 cases to date: ${formatComma(d.cases)}
Population: ${formatComma(d.pop)}
Cases per 100,000: ${formatComma(Math.round(d.cases_per_100k))}`) }) .on("mousemove", function(d) { bubbleTooltip .style("top", d3.event.pageY - 100 + "px") .style("left", d3.event.pageX + 10 + "px"); }) .on("mouseout", function() { bubbleTooltip.style("visibility", "hidden"); }); svg.append("g") .call(similarCountiesXAxis); svg.append("text") .attr("transform", `translate(${((width - marginBubble.left) /2)}, ${(height + marginBubble.top - 20)})`) .style("text-anchor", "middle") .text("Percent " + frequencySelectorSimilar.toLowerCase() + " wearing mask"); svg.append("g") .call(similarCountiesYAxis); svg.append("text") .attr("transform", `translate(${(15)}, ${(height / 2)}), rotate(-90)`) .style("text-anchor", "middle") .text("Cases per 100k"); return svg.node(); }34:T4a3,//https://observablehq.com/@datadesk/black-and-latino-u-s-population-shares bivariateMap = { const svg = d3.create("svg") .attr("viewBox", [0, 0, 975, 610]); svg.append(mapLegend) .attr("transform", "translate(870,450)"); svg.append("g") .selectAll("path") .data(topojson.feature(us, us.objects.counties).features) .join("path") .attr("fill", d => color(mapData.get(d.id))) .attr("d", path) .append("title") svg.selectAll('path').on('mouseover', function(d) { bubbleTooltip .style("visibility", "visible") .html(`${d.properties.name}, ${states.get(d.id.slice(0, 2)).name} ${format(mapData.get(d.id))}`) }) .on("mousemove", function(d) { bubbleTooltip .style("top", d3.event.pageY - 10 + "px") .style("left", d3.event.pageX + 10 + "px"); }) .on("mouseout", function() { bubbleTooltip.style("visibility", "hidden"); }); svg.append("path") .datum(topojson.mesh(us, us.objects.states, (a, b) => a !== b)) .attr("fill", "none") .attr("stroke", "white") .attr("stroke-linejoin", "round") .attr("d", path); return svg.node(); }35:T45b,mapLegend = () => { const k = 24; const arrow = DOM.uid(); return svg` ${d3.cross(d3.range(n), d3.range(n)).map(([i, j]) => svg` ${mapData.title[0]}${labels[j] && ` (${labels[j]})`} ${mapData.title[1]}${labels[i] && ` (${labels[i]})`} `)} ${mapData.title[0]} ${mapData.title[1]} `; }36:T455,regionData = d3.tsvParse(`State Region FIPS Arkansas West 02 Alabama Southeast 01 Arkansas Southeast 05 Arizona Southwest 04 California West 06 Colorado West 08 Connecticut Northeast 09 D.C. Northeast 11 Delaware Northeast 10 Florida Southeast 12 Georgia Southeast 13 Hawaii West 15 Iowa Midwest 19 Idaho West 16 Illinois Midwest 17 Indiana Midwest 18 Kansas Midwest 20 Kentucky Southeast 21 Louisiana Southeast 22 Massachusetts Northeast 25 Maryland Northeast 24 Maine Northeast 23 Michigan Midwest 26 Minnesota Midwest 27 Missouri Midwest 29 Mississippi Southeast 28 Montana West 30 North Carolina Southeast 37 North Dakota Midwest 38 Nebraska Midwest 31 New Hampshire Northeast 33 New Jersey Northeast 34 New Mexico Southwest 35 Nevada West 32 New York Northeast 36 Ohio Midwest 39 Oklahoma Southwest 40 Oregon West 41 Pennsylvania Northeast 42 Rhode Island Northeast 44 South Carolina Southeast 45 South Dakota Midwest 46 Tennessee Southeast 47 Texas Southwest 48 Utah West 49 Virginia Southeast 51 Vermont Northeast 50 Washington West 53 Wisconsin Midwest 55 West Virginia Southeast 54 Wyoming West 56 `)37:[{"id":"7163957385959dcb5217156c1424ee4256e70b6cc6ea5c30a1e0d98f1e929eee053f7bb49029c59459f26610d267f2c27aae5c23a9a87070bc0f52b41e9a8cfb","href":"https://static.observableusercontent.com/files/7163957385959dcb5217156c1424ee4256e70b6cc6ea5c30a1e0d98f1e929eee053f7bb49029c59459f26610d267f2c27aae5c23a9a87070bc0f52b41e9a8cfb","name":"mask_data_final@4.csv","type":"text/csv","lastModified":1596248990946.871,"size":1599355},{"id":"50848f0dd4d2d9c84821adba90ca625cb2815694117bbb7b6ae393e788aae9d85f19a6c73d60d642bb04e2f95b87993e8c7312d4d4da6a1431c58460f5ad6c63","href":"https://static.observableusercontent.com/files/50848f0dd4d2d9c84821adba90ca625cb2815694117bbb7b6ae393e788aae9d85f19a6c73d60d642bb04e2f95b87993e8c7312d4d4da6a1431c58460f5ad6c63","name":"counties-albers-10m.json","type":"application/json","lastModified":1596571101813.028,"size":795407}] 2d:{"id":"a98ee3ea25272e56","slug":"mask-wearing-in-your-county","title":"Mask Wearing in Your County","thumbnail":"bc1cbc0d413a1ddf62f71e6969a20c0b992bb5f2dc5c83dd662fa1710c3444af","access_level":"public","create_time":"$D2020-07-31T22:24:41.303Z","update_time":"$D2021-01-19T21:01:58.724Z","view_time":null,"first_public_time":"$D2020-08-01T21:12:14.283Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"f33497ce92520cec","login":"connorrothschild","name":"Connor Rothschild","avatar_url":"https://avatars-next.observableusercontent.com/5b8a2835a7cc19777e6773556b4d0a7212536edde99fdb799e83767188dde40c","tier":"starter_2024"},"version":3642,"publish_version":3642,"role":null,"authored":false,"authors":[{"type":"individual","id":"e7db9d8898b24f63","login":"connorrothschild","name":"Connor Rothschild","avatar_url":"https://avatars-next.observableusercontent.com/5b8a2835a7cc19777e6773556b4d0a7212536edde99fdb799e83767188dde40c","tier":null}],"members":[{"type":"individual","id":"e7db9d8898b24f63","login":"connorrothschild","name":"Connor Rothschild","avatar_url":"https://avatars-next.observableusercontent.com/5b8a2835a7cc19777e6773556b4d0a7212536edde99fdb799e83767188dde40c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Mask Wearing in Your County","cells":[{"id":0,"value":"// html`

Mask Wearing in ${countySelector == '' ? 'Your County' : countySelector}

`\nhtml`

Mask Wearing in Your County

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2155,"value":"md`How does mask wearing in your state compare to the nation generally? By using survey data from the [New York Times](https://github.com/nytimes/covid-19-data/tree/master/mask-use), this page allows you to explore the frequency of mask-wearing in your county, and how that interacts with COVID case counts in your community.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":783,"value":"viewof countySelector = autoSelect({\n options: d3.map(joined, function(d){return d.full_loc_name;}).keys(),\n // placeholder: \"Harris County, Texaxs\",\n value: \"Harris County, Texas\",\n title: \"Your County\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1897,"value":"md`### Responses to the question 'How often do you wear a mask in public when you expect to be within six feet of another person?' among ${countySelector} respondents`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":435,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1322,"value":"md`**${formatPercent(countySelectorInfo[0].perc)} of respondents** in ${countySelector} claimed that they *${frequencySelector.toLowerCase()}* wear masks when going out in public. This puts the county at rank #${formatComma(countySelectorInfo[0].perc_rank)} out of 3,141 counties (with rank 1 having the most '${frequencySelector}' responses).\n
To date, the county has seen **${formatComma(countySelectorInfo[0].cases)}** COVID-19 cases, making it rank #${formatComma(countySelectorInfo[0].rank)} out of 3,141 counties (with rank 1 having the *most* cases).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2144,"value":"md`### Mask adoption vs. COVID-19 case load`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1282,"value":"viewof frequencySelector = radio({ options:[\n {label:\"Never\",value:\"Never\"},\n {label:\"Rarely\",value:\"Rarely\"},\n {label:\"Sometimes\",value:\"Sometimes\"},\n {label:\"Frequently\",value:\"Frequently\"},\n {label:\"Always\",value:\"Always\"}],\n value:\"Always\",\n title:\"How often do you wear a mask in public when you expect to be within six feet of another person?\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":919,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2004,"value":"md`### How ${countySelector} ranks in terms of '*${frequencySelectorHist.toLowerCase()}*' wearing masks in public:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3060,"value":"viewof frequencySelectorHist = radio({ options:[\n {label:\"Never\",value:\"Never\"},\n {label:\"Rarely\",value:\"Rarely\"},\n {label:\"Sometimes\",value:\"Sometimes\"},\n {label:\"Frequently\",value:\"Frequently\"},\n {label:\"Always\",value:\"Always\"}],\n value:\"Always\",\n title:\"How often do you wear a mask in public when you expect to be within six feet of another person?\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1914,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2067,"value":"md`[(How to read a histogram)](https://www.khanacademy.org/math/ap-statistics/quantitative-data-ap/histograms-stem-leaf/v/interpreting-histograms)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2236,"value":"md`## What About Cases?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2925,"value":"md`Here's how the caseload, in terms of both cases and deaths, has grown in ${countySelector}.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2239,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2898,"value":"md`Perhaps the best (only?) justification for low levels of mask wearing is low COVID-19 case rates: if COVID hasn't hit your community that hard, some might argue that masks aren't as necessary. To explore mask adherence *relative to COVID-19 case rates*, here's ${countySelector}'s level of mask adherence (on the x-axis) compared to the *100 most similar counties* in terms of cases per 100,000 residents (arranged on the y-axis).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3069,"value":"viewof frequencySelectorSimilar = radio({ options:[\n {label:\"Never\",value:\"Never\"},\n {label:\"Rarely\",value:\"Rarely\"},\n {label:\"Sometimes\",value:\"Sometimes\"},\n {label:\"Frequently\",value:\"Frequently\"},\n {label:\"Always\",value:\"Always\"}],\n value:\"Always\",\n title:\"How often do you wear a mask in public when you expect to be within six feet of another person?\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2951,"value":"legend({\n color: colorRegion,\n title: \"Region\",\n tickSize: 0\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2749,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3321,"value":"md`Of the 100 counties most similar to ${countySelector} in COVID case rates, ${countySelector} ranked **#${similarCounties.findIndex(d => d.full_loc_name == countySelector)}** in its '${frequencySelectorSimilar}' mask-wearing rate (with rank #1 having the highest level of *${frequencySelectorSimilar.toLocaleLowerCase()}* wearing a mask).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3567,"value":"md`You can explore the relationship between mask wearing and COVID case rates with the map below (forked from [here](https://observablehq.com/@datadesk/black-and-latino-u-s-population-shares)). This map is bivariate and shows both the frequency of 'always' wearing a mask in public and COVID cases per 100,000 residents. As the legend shows, counties in dark blue have high case rates *and* high rates of mask adherence. Counties in dark pink have high case rates but low rates of mask adoption (**this is bad**). Finally, counties in turquoise have high levels of mask adoption despite relatively lower case rates (**this is good**).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3415,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2104,"value":"md`# Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3237,"value":"md`## Scales, Formatting, Plot Dimensions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1985,"value":"histogramX = d3.scaleLinear()\n .domain(d3.extent(histData)).nice()\n .range([marginHist.left, width - marginHist.right])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1991,"value":"histXAxis = g => g\n .attr(\"transform\", `translate(0,${height - marginHist.bottom})`)\n .call(d3.axisBottom(histogramX).ticks(width / 80 ).tickSizeOuter(0).tickFormat(formatPercent))\n .call(g => g.append(\"text\")\n .attr(\"x\", width - marginHist.right)\n .attr(\"y\", -4)\n .attr(\"fill\", \"currentColor\")\n .attr(\"font-weight\", \"bold\")\n .attr(\"text-anchor\", \"end\")\n .text(histData.x))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1987,"value":"histogramY = d3.scaleLinear()\n .domain([0, d3.max(bins, d => d.length)]).nice()\n .range([height - marginHist.bottom, marginHist.top])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1995,"value":"histYAxis = g => g\n .attr(\"transform\", `translate(${marginHist.left},0)`)\n .call(d3.axisLeft(histogramY).ticks(height / 40))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.select(\".tick:last-of-type text\").clone()\n .attr(\"x\", 4)\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text(histData.y))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1191,"value":"bubbleX = d3.scaleLinear()\n .domain([0, 1]).nice()\n .range([marginBubble.left, width - marginBubble.right]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1183,"value":"bubbleY = d3.scaleLog()\n .domain(d3.extent(joined, d => d.cases)).nice()\n .range([height - marginBubble.bottom, marginBubble.top - 0]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2168,"value":"bubbleYAxis = g => g\n .attr(\"transform\", `translate(${marginBubble.left},0)`)\n .call(d3.axisLeft(bubbleY).ticks(10, \"~s\"))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2162,"value":"bubbleXAxis = g => g\n .attr(\"transform\", `translate(0,${height - marginBubble.bottom})`)\n .call(d3.axisBottom(bubbleX).ticks(width / 80).tickSizeOuter(0).tickFormat(formatPercent))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1189,"value":"bubbleSize = d3.scaleSqrt()\n .domain(d3.extent(joined, d => d.pop))\n .range([2, width / 50]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2837,"value":"similarCountiesX = d3.scaleLinear()\n .domain(d3.extent(similarCounties, d => d.perc)).nice()\n .range([marginBubble.left, width - marginBubble.right]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2841,"value":"similarCountiesY = d3.scaleLinear()\n .domain(d3.extent(similarCounties, d => d.cases_per_100k)).nice()\n .range([height - marginBubble.bottom, marginBubble.top - 0]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2850,"value":"similarCountiesYAxis = g => g\n .attr(\"transform\", `translate(${marginBubble.left},0)`)\n .call(d3.axisLeft(similarCountiesY).ticks(height / 40))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2847,"value":"similarCountiesXAxis = g => g\n .attr(\"transform\", `translate(0,${height - marginBubble.bottom})`)\n .call(d3.axisBottom(similarCountiesX).ticks(width / 80).tickSizeOuter(0).tickFormat(formatPercent))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2861,"value":"similarCountiesSize = d3.scaleSqrt()\n .domain(d3.extent(similarCounties, d => d.pop))\n .range([5, 20]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":656,"value":"formatPercent = xBar.tickFormat(null, \"%\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1585,"value":"formatComma = d3.format(',')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":748,"value":"colorFreq = d3.scaleOrdinal()\n .domain(masks.map(d => d.freq))\n .range(d3.schemeTableau10)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2961,"value":"colorRegion = d3.scaleOrdinal()\n .domain(masks.map(d => d.region))\n .range(d3.schemeTableau10)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":491,"value":"xBar = d3.scaleLinear()\n .domain([0, 1])\n .range([marginBar.left, width - marginBar.right])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":492,"value":"yBar = d3.scaleBand()\n .domain(['Always', 'Frequently', 'Sometimes', 'Rarely', 'Never'])\n .rangeRound([marginBar.top, height - marginBar.bottom])\n .padding(0.1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":623,"value":"yAxisBar = g => g\n .attr(\"transform\", `translate(${marginBar.left},0)`)\n .call(d3.axisLeft(yBar))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3436,"value":"xMap = d3.scaleQuantile(Array.from(mapData.values(), d => d[0]), d3.range(n))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3438,"value":"yMap = d3.scaleQuantile(Array.from(mapData.values(), d => d[1]), d3.range(n))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1549,"value":"bubbleTooltip = d3\n .select(\"body\")\n .append(\"div\")\n .attr(\"class\", \"svg-tooltip\")\n .style(\"position\", \"absolute\")\n .style(\"visibility\", \"hidden\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3136,"value":"histTooltip = d3\n .select(\"body\")\n .append(\"div\")\n .attr(\"class\", \"svg-tooltip\")\n .style(\"position\", \"absolute\")\n .style(\"visibility\", \"hidden\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":611,"value":"marginBubble = ({top: 10, right: width / 5, bottom: 50, left: 60})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1568,"value":"marginBar = ({top: 10, right: 0, bottom: 10, left: 100})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2002,"value":"marginHist = ({top: 20, right: width / 6, bottom: 30, left: 40})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3434,"value":"n = Math.floor(Math.sqrt(colors.length))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3418,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3440,"value":"path = d3.geoPath()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3443,"value":"color = {\n return value => {\n if (!value) return \"#ccc\";\n let [a, b] = value;\n return colors[yMap(b) + xMap(a) * n];\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3445,"value":"format = (value) => {\n if (!value) return \"No data available\";\n let [a, b] = value;\n return `Cases per 100k: ${formatComma(Math.round(a))} (${labels[xMap(a)]})\n% always wearing mask: ${formatPercent(b)} (${labels[yMap(b)]})`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3230,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":340,"value":"currentDate = d3.max(cases, function(d) {return d.date})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"cases = {\n return d3.csv(\n await('https://raw.githubusercontent.com/nytimes/covid-19-data/master/us-counties.csv'),\n d => ({\n county: d.county,\n state: d.state,\n full_loc_name: d.county + ' County, ' + d.state,\n fips: d.fips,\n stateFIPS: d.fips.slice(0,2),\n cases: +d.cases,\n deaths: +d.deaths,\n date: d.date\n })\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2345,"value":"casesRegions = {\n let withRegions = [];\n for (let i = 0; i < cases.length; i++) {\n var currentFIPS = cases[i].stateFIPS\n var matchingState = regionData.filter(d => d.FIPS == currentFIPS);\n matchingState = matchingState.length == 0 ? 'NA' : matchingState\n\n cases[i].region = matchingState[0].Region;\n}\n return cases.filter(d => d.fips != '' && d.region != undefined)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1475,"value":"most_recent = {\n \n var noNAs = cases.filter(d => d.fips != '')\n \n var recent = noNAs.filter(d => d.date == currentDate)\n \n var sorted = recent.sort((a, b) => d3.descending(a.cases, b.cases))\n \n var ranks = recent.map(function(cases){ return sorted.indexOf(cases)+1 })\n \n for (let i = 0; i < recent.length; i++) {\n recent[i].rank = ranks[i]\n}\n return recent;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":440,"value":"masks = {\n return d3.csvParse(\n await FileAttachment('mask_data_final@4.csv').text(),\n d => ({\n full_loc_name: d.full_loc_name,\n county: d.county,\n state: d.state,\n fips: d.COUNTYFP,\n freq: d.freq,\n perc: +d.perc,\n freq_rank: d.freq_rank,\n perc_rank: +d.perc_rank,\n pop: +d.pop_2015,\n region: d.regions\n })\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":929,"value":"// Wow!! This actually took so long. \n// I am proud of myself for doing this from scratch (why is joining data so hard in D3/observable/js?) \n// I miss left_join 😞\njoined = {\n \n for (let i = 0; i < masks.length; i++ )\n {\n \n var currentFips = masks[i].fips;\n var caseDataCurrentFips = most_recent.filter(d => d.fips == currentFips);\n caseDataCurrentFips = caseDataCurrentFips.length == 0 ? 'NA' : caseDataCurrentFips\n \n masks[i].cases = caseDataCurrentFips[0].cases\n masks[i].deaths = caseDataCurrentFips[0].deaths\n masks[i].rank = caseDataCurrentFips[0].rank\n masks[i].cases_per_100k = (masks[i].cases / masks[i].pop) * 100000\n \n }\n return masks.filter(d => d.cases != null)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2381,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2729,"value":"// returns a 100-length array of county objects sorted by **mask wearing\nsimilarCounties = {\n var per_100k_value = joined.filter(d => d.full_loc_name == countySelector)[0].cases_per_100k\n console.log(per_100k_value)\n \n var dataAboveBaseline = joined.filter(d => d.cases_per_100k >= per_100k_value)\n var dataBelowBaseline = joined.filter(d => d.cases_per_100k < per_100k_value)\n var sortedAsc = dataAboveBaseline.sort((a,b) => a.cases_per_100k - b.cases_per_100k).slice(0,250)\n var sortedDesc = dataBelowBaseline.sort((a,b) => b.cases_per_100k - a.cases_per_100k).slice(0,250)\n \n var similar = d3.merge([sortedAsc,sortedDesc])\n var similarFiltered = similar.filter(d => d.freq == frequencySelectorSimilar)\n var similarFinal = similarFiltered.sort((a,b) => b.perc - a.perc)\n return similarFinal\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1923,"value":"histData = {\n var masksAll = masks.filter(d => d.freq == frequencySelectorHist);\n var masksPerc = [];\n \n for (let i = 0; i < masksAll.length; i++ ) {\n masksPerc[i] = masksAll[i].perc\n }\n return masksPerc\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1983,"value":"bins = d3.histogram()\n .domain(histogramX.domain())\n .thresholds(histogramX.ticks(50))\n (histData)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":502,"value":"countySelectorInfo = joined.filter(d => d.freq == frequencySelector && d.full_loc_name == countySelector)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3422,"value":"mapData = {\n const data_list = joined.filter(d => d.freq == 'Always').map(d => {\n return [\n d.fips, [\n d.cases_per_100k,\n d.perc\n ]\n ];\n });\n const data_map = new Map(data_list);\n return Object.assign(data_map, {title: [\"Cases per 100k\", \"% wearing mask\"]});\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3475,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3473,"value":"us = FileAttachment(\"counties-albers-10m.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3471,"value":"states = new Map(us.objects.states.geometries.map(d => [d.id, d.properties]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3252,"value":"md`## Styling`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1547,"value":"specificStyles = html`\n `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3631,"value":"style","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3426,"value":"schemes = [\n {\n name: \"RdBu\", \n colors: [\n \"#e8e8e8\", \"#e4acac\", \"#c85a5a\",\n \"#b0d5df\", \"#ad9ea5\", \"#985356\",\n \"#64acbe\", \"#627f8c\", \"#574249\"\n ]\n },\n {\n name: \"BuPu\", \n colors: [\n \"#e8e8e8\", \"#ace4e4\", \"#5ac8c8\",\n \"#dfb0d6\", \"#a5add3\", \"#5698b9\", \n \"#be64ac\", \"#8c62aa\", \"#3b4994\"\n ]\n },\n {\n name: \"GnBu\", \n colors: [\n \"#e8e8e8\", \"#b5c0da\", \"#6c83b5\",\n \"#b8d6be\", \"#90b2b3\", \"#567994\",\n \"#73ae80\", \"#5a9178\", \"#2a5a5b\"\n ]\n },\n {\n name: \"PuOr\", \n colors: [\n \"#e8e8e8\", \"#e4d9ac\", \"#c8b35a\",\n \"#cbb8d7\", \"#c8ada0\", \"#af8e53\",\n \"#9972af\", \"#976b82\", \"#804d36\"\n ]\n }\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3458,"value":"colors = schemes['1'].colors","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3429,"value":"labels = [\"Low\", \"Average\", \"High\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2550,"value":"emphasis_red = '#ff003d'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2555,"value":"primary_blue = \"#003dff\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":485,"value":"height = width / 2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3261,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3606,"value":"import { style } from '@connorrothschild/styles'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":476,"value":"d3Array = require(\"d3-array@^2.2\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":566,"value":"import {slider,button,select,text,radio,checkbox,number,autoSelect} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2240,"value":"import { vl } from '@vega/vega-lite-api'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2953,"value":"import {legend} from '@d3/color-legend'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2793,"value":"VegaLite = require(\"vega-embed@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3636,"value":"import { analytics } from '@chrispahm/simple-privacy-friendly-web-analytics'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3637,"value":"analytics(html``.href)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2987,"value":"md`## Exploration & Archive`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3352,"value":"viewof stateSelector = select({\n options: d3.map(cases, function(d){return d.state;}).keys(), \n title: \"Select State\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2988,"value":"{\n const hover = vl.selectSingle().nearest(true).on('mousemove').fields('county').empty('none')\n \n const points = vl.markPoint()\n .select(hover)\n .encode(\n vl.opacity().value(0).if(hover,vl.value(1))\n )\n \n const lines = vl.markLine({interpolate: 'monotone'})\n \n return vl\n .data(cases.filter(d => d.state == stateSelector & d.cases != 0))\n .encode(\n vl.x().fieldT('date').axis({grid: false}),\n vl.y().fieldQ('cases').scale({type: \"log\"}).axis({grid:false}),\n vl.size().value(1).if(hover, vl.value(2)),\n vl.detail().fieldN('county'),\n vl.opacity().value(.4).if(hover, vl.value(1)),\n vl.tooltip('county')\n )\n .layer(points, lines)\n .width(width * .9)\n .render()\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2995,"value":"vl.markBar()\n .data(most_recent)\n .encode(\n vl.x().fieldN('state').sort('y'),\n vl.y().sum('cases')\n )\n .width(width * .9)\n .render()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 2e:"$2d:body"