31:T85c,chart = { const svg = d3.create('svg') .attr('viewBox', [0, 0, width, height]); svg.append('g').call(xAxis); svg.selectAll('.line-decade') .data(x.ticks()) .join('line') .attr('class', 'line-decade') .attr('x1', d => x(d)) .attr('x2', d => x(d)) .attr('y1', 10) .attr('y2', height - margin.top) .attr('stroke-width', 1) .attr('stroke', 'lightgray'); svg.selectAll('.label-region') .data(region) .join('text') .attr('class', 'label-region') .attr('x', 0) .attr('y', d => y(d)) .attr('text-align', 'right') .attr('alignment-baseline', 'right') .text(d => d); const simulation = d3.forceSimulation(data) .force('x', d3.forceX((d) => x(d.always)).strength(5)) .force('y', d3.forceY((d) => y(d.region))) .force('collide', d3.forceCollide(radius + padding)) .stop(); svg.selectAll('circle') .data(data) .join('circle') .attr('cx', (d) => x(d.always)) .attr('cy', (d) => y(d.region)) .attr('r', (d) => size(d.population)) .attr('fill', (d) => color(d.region)) .attr('opacity', .7); // select all rect svg.selectAll("circle") .on("mouseover", function(d) { // change the selection style d3.select(this) .attr('stroke-width', '2') .attr("stroke", "black"); // make the tooltip visible and update its text tooltip .style("visibility", "visible") .html(`County: ${d.county}, ${d.state}
'Always' wears mask: ${d.always}%
Population: ${d3.format(".2s")(d.population)}`) }) .on("mousemove", function() { tooltip .style("top", d3.event.pageY - 10 + "px") .style("left", d3.event.pageX + 10 + "px"); }) .on("mouseout", function() { // change the selection style d3.select(this).attr('stroke-width', '0'); tooltip.style("visibility", "hidden"); }); for(let i = 0; i < 100; i++) { simulation.tick(); svg.selectAll('circle') .data(data) .attr('cx', (d) => d.x) .attr('cy', (d) => d.y); yield svg.node(); } }32:[{"id":"1c9a9016f14e056007bec4c13af381d982fbf6321ec2781f3e810097adc01dd6509676c09fd4cfdd4e97f6914a463b76e90720800f4d348098f3a28ccfc5175d","href":"https://static.observableusercontent.com/files/1c9a9016f14e056007bec4c13af381d982fbf6321ec2781f3e810097adc01dd6509676c09fd4cfdd4e97f6914a463b76e90720800f4d348098f3a28ccfc5175d","name":"prepared_mask_data.csv","type":"text/csv","lastModified":1596072829066.469,"size":345802}] 2f:{"title":"Mask Adoption on the County Level","cells":[{"id":0,"value":"md`# Mask Adoption on the County Level\n Percent of respondents claiming they always 'wear a mask in public when they expect to be within six feet of another person.'`","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":289,"value":"md`Data: [New York Times](https://github.com/nytimes/covid-19-data/tree/master/mask-use)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"color = d3.scaleOrdinal()\n .domain(region)\n .range(d3.schemeTableau10)","pinned":true,"hidden":false,"mode":"ojs"},{"id":27,"value":"y = d3.scaleBand()\n .domain(region)\n .range([height + margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs"},{"id":78,"value":"xAxis = g => g\n .attr('transform', `translate(0,${height - margin.top})`)\n .call(d3.axisBottom(x))","pinned":true,"hidden":false,"mode":"ojs"},{"id":18,"value":"x = d3.scaleLinear()\n .domain([0,100])\n .nice()\n .range([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs"},{"id":129,"value":"size = d3.scaleLinear()\n .domain(popExtent)\n .nice()\n .range([3, 20])","pinned":true,"hidden":false,"mode":"ojs"},{"id":132,"value":"popExtent = {\n const bounds = data.map((d) => d.population).sort(d3.ascending);\n return [bounds[0], bounds[bounds.length - 1]];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":16,"value":"dataExtent = {\n const bounds = data.map((d) => d.always).sort(d3.ascending);\n return [bounds[0], bounds[bounds.length - 1]];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":123,"value":"region = ['Northeast', 'South', 'West', 'Midwest']","pinned":true,"hidden":false,"mode":"ojs"},{"id":14,"value":"data = rawData","pinned":true,"hidden":false,"mode":"ojs"},{"id":12,"value":"rawData = {\n return d3.csvParse(\n await FileAttachment('prepared_mask_data.csv').text(),\n d => ({\n always: d.ALWAYS,\n never: d.NEVER,\n county: d['county.name'],\n state: d['state.name'],\n region: d.regions,\n population: +d.pop_2015\n })\n );\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":169,"value":"tooltip = d3\n .select(\"body\")\n .append(\"div\")\n .attr(\"class\", \"svg-tooltip\")\n .style(\"position\", \"absolute\")\n .style(\"visibility\", \"hidden\");","pinned":true,"hidden":false,"mode":"ojs"},{"id":31,"value":"padding = 1.5","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"height = 700","pinned":false,"hidden":false,"mode":"ojs"},{"id":146,"value":"radius = 3.5","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"margin = ({\n left: 80,\n right: 100,\n top: 100,\n bottom: 0\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":337,"value":"import { analytics } from '@chrispahm/simple-privacy-friendly-web-analytics'","pinned":false,"hidden":false,"mode":"ojs"},{"id":338,"value":"analytics(html``.href)","pinned":false,"hidden":false,"mode":"ojs"},{"id":167,"value":"specificStyles = html`\n `","pinned":false,"hidden":false,"mode":"ojs"},{"id":321,"value":"import { style } from '@connorrothschild/styles'","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":320,"value":"style","pinned":false,"hidden":false,"mode":"ojs"},{"id":90,"value":"md`**References** \nPartly based on https://observablehq.com/@mkfreeman/the-simulation-behind-beeswarm-plots`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}