31:T7f0,bubblemap = { const svg = d3.create("svg") .attr("width", width) .attr("height", height); svg.selectAll("path") .data(world_no_antarctica.geometries) .join("path") .attr("fill","#ebedeb") .attr("stroke", "#dedede") .attr("d", path) .attr("class", "countries"); svg.selectAll('circle') .data(mapdata .filter(d => d.position) .sort((a, b) => d3.descending(a.cases, b.cases))) .join("circle") .attr("transform", d => `translate(${d.position})`) .attr("r", d => radius(d.cases)) .attr('fill', (d) => color(d.cluster)) .attr("fill-opacity", 0.5) .attr("stroke", "#fff") .attr("stroke-width", 0.5) .on("mouseover", function(e,d) { d3.select(this) .attr('stroke-width', '1.7') .attr("stroke", "black"); tooltip .html(`${d.name}

Cases: ${d.cases}
Deaths: ${d.deaths}
Cases per million: ${d.cases_per_million}
Deaths per million: ${d.deaths_per_million}
Population: ${d.population}`); let tooltipWidth = tooltip.node().offsetWidth; let tooltipHeight = tooltip.node().offsetHeight; tooltip .style("left", e.pageX - tooltipWidth/2 +'px') .style("top", e.pageY-tooltipHeight - 10+'px') .style('visibility', 'visible'); }) .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') .attr("stroke", "#fff") .attr("stroke-width", 0.5); tooltip.style("visibility", "hidden"); }); svg.call(clusterlegend) svg.call(radiuslegend); return svg.node(); }32:Tadc,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', .4) .attr('stroke', 'lightgray'); svg.selectAll('.label-cluster') .data(cluster_num) .join('text') .attr('class', 'label-cluster') .attr('x', 0) .attr('y', d => y(d)) .attr('text-align', 'right') .attr('alignment-baseline', 'right') .text(d => d) .style('font-family', 'Helvetica') .style('font-size', '14px'); const simulation = d3.forceSimulation(beeswarmData) .force('x', d3.forceX((d) => x(d.total_cases)).strength(5)) .force('y', d3.forceY((d) => y(d.cluster_num))) .force('collide', d3.forceCollide(radius + padding)) .stop(); svg.selectAll('circle') .data(beeswarmData) .join('circle') .attr('cx', (d) => x(d.total_cases)) .attr('cy', (d) => y(d.cluster_num)) .attr('r', (d) => size(d.population)*3.5) .attr('fill', (d) => color(d.cluster_num)) .attr('opacity', .5) .attr("stroke", "#fff") .attr("stroke-width", 0.5) .on("mouseover", function(e,d) { d3.select(this) .attr('stroke-width', '1.7') .attr("stroke", "black"); tooltip .html(`${d.country}

Cases: ${d.total_cases}
Deaths: ${d.total_deaths}
Cases per million: ${d.total_cases_per_million}
Deaths per million: ${d.total_deaths_per_million}
Population: ${d.population}`); let tooltipWidth = tooltip.node().offsetWidth; let tooltipHeight = tooltip.node().offsetHeight; tooltip .style("left", e.pageX - tooltipWidth/2 +'px') .style("top", e.pageY-tooltipHeight - 10+'px') .style('visibility', 'visible'); }) .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') .attr("stroke", "#fff") .attr("stroke-width", 0.5); tooltip.style("visibility", "hidden"); }); for(let i = 0; i < 1000000; i++) { simulation.tick(); svg.selectAll('circle') .data(beeswarmData) .attr('cx', (d) => d.x) .attr('cy', (d) => d.y); yield svg.node(); } }33:T9f0,scatterplot = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width2, height2]); svg.append("g") .call(xAxis2); svg.append("g") .call(yAxis2); svg.append("g") .call(grid); svg.selectAll("circle") .data(data) .join("circle") .attr("cx", d => x2(d[keylv])) .attr("cy", d => y2(d.total_cases_per_million)) .attr("r", d => r(d.population)) .attr("fill", d => color(d.cluster_num)) .attr("opacity", .6) .attr("stroke", "#fff") .attr("stroke-width", 0.5) .on("mouseover", function(e,d) { d3.select(this) .attr('stroke-width', '1.7') .attr("stroke", "black"); tooltip .html(`${d.location}

Cases per million: ${d.total_cases_per_million}
${keylv}: ${d[keylv]}
Population: ${d.population}`); let tooltipWidth = tooltip.node().offsetWidth; let tooltipHeight = tooltip.node().offsetHeight; tooltip .style("left", e.pageX - tooltipWidth/2 +'px') .style("top", e.pageY-tooltipHeight - 10+'px') .style('visibility', 'visible'); }) .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') .attr("stroke", "#fff") .attr("stroke-width", 0.5); tooltip.style("visibility", "hidden"); }); svg.append("text") .text([keylv]) .attr("dx", width2 -180) .attr("dy", height2 - margin2.top + margin2.bottom - 20) .attr("font-family", "Helvetica") .attr("font-size", 10) .attr("opacity", .5) svg.append("text") .text("Cases per million") .attr("x2" -20, -margin2.top + 40) .attr("dy", margin2.top - 25) .style("text-anchor", "start") .attr("y2", 10) .attr("font-family", "Helvetica") .attr("font-size", 10) .attr("opacity", .5) /* svg.append("g") .attr("font-family", "Helvetica") .attr("font-size", 5) .selectAll("text") .data(data) .join("text") .attr("dy", "0.35em") .attr("x", d => x(d.gdp_per_capita) + 7) .attr("y", d => y(d.total_cases_per_million)) .text(d => d.location); */ return svg.node(); }34:T4ae,clusterlegend = svg => { const clusterlegend = svg.selectAll(".legend") .data(dataGroup) .enter(); clusterlegend .append('text') .text(d => d[0]) .attr('x', legendOrigin[0] + labelHeight * 1.2 -40) .attr('y', (d,i) => legendOrigin[1] + labelHeight + labelHeight * 1.2 *i +220) .style('font-family', 'Helvetica') .style('font-size', `${labelHeight-3}px`) .attr("opacity", 0.7); clusterlegend .append('circle') .attr('cx', legendOrigin[0] -32) .attr('cy', (d,i) => legendOrigin[1] + labelHeight * 1.25 * i +232) .attr('r', 8) .attr('width', labelHeight) .attr('height', labelHeight) .attr('fill', (d) => color(d[0])) .attr("fill-opacity",".4") .attr('stroke', (d) => color(d[0])) .style('stroke-width', '1.4px'); svg.append("text") .attr('x', legendOrigin[0] + labelHeight * 1.2 -40) .attr('y', (d,i) => legendOrigin[1] + labelHeight + labelHeight * 1.2 *i +195) .attr("text-anchor", "middle") .style("font-size", "15px") .attr("font-family", "Helvetica") .attr('font-weight', 'bold') .text("Clusters") .attr("opacity", 0.6); return clusterlegend; }35:[{"id":"fc2c06f0952f1669b7cc87db4e589926fc422f268c16a09fc2ba98f14ad0ca72f1baa33241cb0935df9e0dfde1a412d35f17c11ee399f20fffb4648926fe47a8","href":"https://static.observableusercontent.com/files/fc2c06f0952f1669b7cc87db4e589926fc422f268c16a09fc2ba98f14ad0ca72f1baa33241cb0935df9e0dfde1a412d35f17c11ee399f20fffb4648926fe47a8","name":"CountryClustered@1.csv","type":"text/csv","lastModified":1608840155050.624,"size":18690},{"id":"7b6ff41e373e01d7b5b95773e297d40625bd9ccc1936a023a066a7edd8da5eaadec4ab7a565303539e41e001f2e6730f3ee1e259fae4f19dc59e8d6b2f2ec22b","href":"https://static.observableusercontent.com/files/7b6ff41e373e01d7b5b95773e297d40625bd9ccc1936a023a066a7edd8da5eaadec4ab7a565303539e41e001f2e6730f3ee1e259fae4f19dc59e8d6b2f2ec22b","name":"land-50m.json","type":"application/json","lastModified":1608807617772.477,"size":545534},{"id":"f3fd67b739213db23653aa05dbc7420f340139cb2b4d52afb58c57a6b13631204ff6c3c031f3936e77add84bcef4a6fabb3a98b1f20534f563fde0de51b49762","href":"https://static.observableusercontent.com/files/f3fd67b739213db23653aa05dbc7420f340139cb2b4d52afb58c57a6b13631204ff6c3c031f3936e77add84bcef4a6fabb3a98b1f20534f563fde0de51b49762","name":"world-110m.geo.json","type":"application/json","lastModified":1608807547777.391,"size":252486}] 2f:{"title":"2. Clustering method","cells":[{"id":0,"value":"md`# 2. Clustering method`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1180,"value":"md`Once we analyzed the data in detail, we organized selected countries in four different clusters based on their patterns during the pandemic. We've made the following visualizations to show the similarities between them.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1229,"value":"md` --------------------`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1184,"value":"md `## Data Visualization`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1221,"value":"md` With a world map we can show which countries belong to each cluster and understand how they were configured. It is also an efficient way to show which countries were selected to do the analysis and the ones we omitted due to lack of data. We added interactivity to make a cleaner visualization and to display more variables, like deaths or population.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1145,"value":"md`### COVID CASES IN THE WORLD FOR SELECTED COUNTRIES`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1277,"value":"md` --------------------`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1241,"value":"md` This plot helps us to detect outliers in each cluster and to validate if the clusters make sense. As we can see, all of them are together except for three countries, with a large population.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1141,"value":"md`### COVID CASES PER COUNTRY FOR EACH CLUSTER`","pinned":false,"hidden":false,"mode":"ojs"},{"id":271,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1280,"value":"md` --------------------`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1252,"value":"md`A scatterplot is an effective solution to show patterns. To illustrate the countries of each cluster that have similarities between them, we selected six different dimensions and we compared them with covid cases per million. We can see that in all of them the colors (clusters) are mostly together.\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1148,"value":"md`### COVID CASES PER MILLION COMPARED WITH DIFFERENT DIMENSIONS`","pinned":false,"hidden":false,"mode":"ojs"},{"id":630,"value":"viewof keylv = {\n const form = html`

${Object.assign(html``, {value: \"human_development_index\"})} Select a dimension`;\n form.select.onchange = () => (form.value = form.select.value, form.dispatchEvent(new CustomEvent(\"input\")));\n form.select.onchange();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":639,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1010,"value":"md` --------------------`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1159,"value":"md`## Improvements`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1166,"value":"md` We found some difficulties in programming these visualizations, mostly due to our proficiency with D3 and the timeframe of the project. These are the most important things that should have been changed or improved with more available time:\n\n- **World map:** The bubbles for Singapore and Malta are shown in the left top corner because in the json file *world* (where there are all the features of the countries), little countries like these two are not in the array.\n- **Beeswarm plot:** Maybe it would be more visible if the bubbles were separated and they didn't overlap between them. Also, a legend would help to understand that the radius of the circles represent the population of the country. Lastly, (this is a minor issue) there's a gray line on the left that shouldn't be there.\n- **Scatterplot:** There is a problem with the displayed text from the different variables. On the x axis and on the popup it is shown as the variable name from the data and not well written with spaces and capital letters.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1210,"value":"md` --------------------`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1190,"value":"md `## Conclusions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1193,"value":"md `We think that these visualizations give the necessary information to understand the characteristics of the countries and their information patterns, from the four clusters. Luckily, they were not complicated visualizations and contained minor issues. As mentioned, there are some minor problems that should be corrected.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1161,"value":"md` --------------------`","pinned":false,"hidden":false,"mode":"ojs"},{"id":546,"value":"md`## World map: Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"OWiDdata = FileAttachment(\"CountryClustered@1.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"mapdata = Object.entries(OWiDdata).map(d=>{\n const countryArrayIndex = world.features.findIndex(dat => dat.id === d[1].iso_code);\n return {name:d[1].location,\n cases:countryArrayIndex !== -0 ? d[1].total_cases : NaN,\n deaths:countryArrayIndex !== -0 ? d[1].total_deaths : NaN,\n cases_per_million:countryArrayIndex !== -0 ? d[1].total_cases_per_million : NaN,\n deaths_per_million:countryArrayIndex !== -0 ? d[1].total_deaths_per_million : NaN,\n population:countryArrayIndex !== -0 ? d[1].population : NaN,\n position: path.centroid(world.features[countryArrayIndex]) || [0,0],\n cluster:d[1].cluster_num}\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":888,"value":"dataGroup = d3.groups(OWiDdata, d => d.cluster_num)","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"world = FileAttachment(\"world-110m.geo.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":97,"value":"world_no_antarctica = ({\n type: \"FeatureCollection\",\n geometries: world.features.filter(d=> d.properties.name !== \"Antarctica\")\n });","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"worldTopojson = FileAttachment(\"land-50m.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"projection = d3.geoNaturalEarth1();","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"path = d3.geoPath(projection)","pinned":false,"hidden":false,"mode":"ojs"},{"id":215,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"graticule = d3.geoGraticule10();","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"outline = ({type: \"Sphere\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1115,"value":"radiuslegend = svg => {\n const radiuslegend = svg.append(\"g\")\n .attr(\"fill\", \"#777\")\n .attr(\"transform\", \"translate(750,450)\")\n .attr(\"text-anchor\", \"middle\")\n .style(\"font\", \"10px sans-serif\")\n .selectAll(\"g\")\n .data(radius.ticks(4).slice(1))\n .join(\"g\");\n\n radiuslegend.append('circle')\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"#ccc\")\n .attr(\"cy\", d => -radius(d))\n .attr(\"r\", radius);\n\n radiuslegend.append(\"text\")\n .attr(\"y\", d => -2 * radius(d))\n .attr(\"dy\", \"1.3em\")\n .text(radius.tickFormat(4, \"s\"));\n \n return radiuslegend;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":996,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":884,"value":"labelHeight = 18;","pinned":false,"hidden":false,"mode":"ojs"},{"id":885,"value":"legendOrigin = [100,50];","pinned":false,"hidden":false,"mode":"ojs"},{"id":83,"value":"radius = d3.scaleSqrt([0, d3.max(OWiDdata, d => d.total_cases)], [0, 50]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"format = d3.format(\",.0f\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"width = 1000;","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"height = 500;","pinned":false,"hidden":false,"mode":"ojs"},{"id":298,"value":"margin = ({\n left: 120,\n right: 120,\n top: 100,\n bottom: 0\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"import {form} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"import {legend} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":296,"value":"tooltip = d3\n .select(\"body\")\n .append(\"div\")\n .attr(\"class\", \"svg-tooltip\")\n .style(\"position\", \"absolute\")\n .style(\"visibility\", \"hidden\")\n .style('padding', '10px')\n .style('background', 'rgba(0,0,0,0.6)')\n .style('border-radius', '6px')\n .style('color', '#fff');","pinned":false,"hidden":false,"mode":"ojs"},{"id":527,"value":"styles = html`\n `","pinned":false,"hidden":false,"mode":"ojs"},{"id":261,"value":"md` --------------------`","pinned":false,"hidden":false,"mode":"ojs"},{"id":263,"value":"md`## Beeswarm plot: Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":292,"value":"beeswarmData = {\n return d3.csvParse(\n await FileAttachment('CountryClustered@1.csv').text(),\n d => ({\n total_cases: d.total_cases,\n cluster_num: d.cluster_num,\n country: d.location,\n total_deaths: d.total_deaths,\n total_cases_per_million: d.total_cases_per_million,\n total_deaths_per_million: d.total_deaths_per_million,\n population: +d.population\n })\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":274,"value":"color = d3.scaleOrdinal()\n .domain(cluster_num)\n .range(d3.schemeTableau10)","pinned":false,"hidden":false,"mode":"ojs"},{"id":276,"value":"y = d3.scaleBand()\n .domain(cluster_num)\n .range([height + margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":278,"value":"xAxis = g => g\n .attr('transform', `translate(0,${height - margin.top})`)\n .call(d3.axisBottom(x))","pinned":false,"hidden":false,"mode":"ojs"},{"id":280,"value":"x = d3.scaleLinear()\n .domain([0,16000000])\n .nice()\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":282,"value":"size = d3.scaleLinear()\n .domain(popExtent)\n .nice()\n .range([3, 20])","pinned":false,"hidden":false,"mode":"ojs"},{"id":284,"value":"popExtent = {\n const bounds = beeswarmData.map((d) => d.population).sort(d3.ascending);\n return [bounds[0], bounds[bounds.length - 1]];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":286,"value":"dataExtent = {\n const bounds = beeswarmData.map((d) => d.total_cases).sort(d3.ascending);\n return [bounds[0], bounds[bounds.length - 1]];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":288,"value":"cluster_num = ['1', '2', '3', '4']","pinned":false,"hidden":false,"mode":"ojs"},{"id":300,"value":"padding = 1.5","pinned":false,"hidden":false,"mode":"ojs"},{"id":635,"value":"md` --------------------`","pinned":false,"hidden":false,"mode":"ojs"},{"id":632,"value":"md`## Scatterplot: Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":641,"value":"data = d3.csvParse(await FileAttachment(\"CountryClustered@1.csv\").text(), d3.autoType)","pinned":false,"hidden":false,"mode":"ojs"},{"id":644,"value":"selectedData = data.map(d => ({\n location:d.location,\n population: d.population,\n total_cases:d.total_cases,\n total_deaths:d.total_deaths,\n total_cases_per_million:d.total_cases_per_million,\n total_deaths_per_million:d.total_deaths_per_million,\n \"Median age\": d.median_age,\n \"Older than 70\":d.aged_70_older,\n \"GDP per capita\": d.gdp_per_capita,\n \"Cardiovascular death rate\":d.cardiovasc_death_rate,\n \"Hospital beds per thousand\":d.hospital_beds_per_thousand,\n \"Human Development Index\":d.human_development_index\n })).sort((a,b) => b.population - a.population);","pinned":false,"hidden":false,"mode":"ojs"},{"id":648,"value":"keys = Object.keys(selectedData[0]).slice(6,12);","pinned":false,"hidden":false,"mode":"ojs"},{"id":651,"value":"x2 = d3.scaleLinear()\n .domain(d3.extent(data, d => d[keylv])).nice()\n .range([margin2.left, width2 - margin2.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":654,"value":"y2 = d3.scaleLinear()\n .domain(d3.extent(data, d => d.total_cases_per_million)).nice()\n .range([height2 - margin2.bottom, margin2.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":659,"value":"xAxis2 = g => g\n .attr(\"transform\", `translate(0,${height2 - margin2.bottom})`)\n .call(d3.axisBottom(x2).ticks(width / 80))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.append(\"text\")\n .attr(\"x2\", width2)\n .attr(\"y2\", margin2.bottom - 4)\n .attr(\"fill\", \"currentColor\")\n .attr(\"text-anchor\", \"end\")\n .text(data.x2))","pinned":false,"hidden":false,"mode":"ojs"},{"id":663,"value":"yAxis2 = g => g\n .attr(\"transform\", `translate(${margin2.left},0)`)\n .call(d3.axisLeft(y2))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.append(\"text\")\n .attr(\"x2\", -margin2.left)\n .attr(\"y2\", 10)\n .attr(\"fill\", \"currentColor\")\n .attr(\"text-anchor\", \"start\")\n .text(data.y2))","pinned":false,"hidden":false,"mode":"ojs"},{"id":666,"value":"grid = g => g\n .attr(\"stroke\", \"currentColor\")\n .attr(\"stroke-opacity\", .05)\n .call(g => g.append(\"g\")\n .selectAll(\"line\")\n .data(x2.ticks())\n .join(\"line\")\n .attr(\"x1\", d => .2 + x2(d))\n .attr(\"x2\", d => .2 + x2(d))\n .attr(\"y1\", margin2.top)\n .attr(\"y2\", height2 - margin2.bottom))\n .call(g => g.append(\"g\")\n .selectAll(\"line\")\n .data(y2.ticks(5))\n .join(\"line\")\n .attr(\"y1\", d => 0.4 + y2(d))\n .attr(\"y2\", d => 0.4 + y2(d))\n .attr(\"x1\", margin2.left)\n .attr(\"x2\", width2 - margin2.right));","pinned":false,"hidden":false,"mode":"ojs"},{"id":670,"value":"import {form} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":673,"value":"d3.max(data, d => d.total_cases_per_million)","pinned":false,"hidden":false,"mode":"ojs"},{"id":676,"value":"d3.min(data, d => d.total_cases_per_million)","pinned":false,"hidden":false,"mode":"ojs"},{"id":679,"value":"r = d3.scaleSqrt()\n .domain(d3.extent(data, d => d.population))\n .range([1, 20]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":690,"value":"height2 = 350","pinned":false,"hidden":false,"mode":"ojs"},{"id":692,"value":"width2 = 700","pinned":false,"hidden":false,"mode":"ojs"},{"id":697,"value":"margin2 = ({top: 35, right: 60, bottom: 45, left: 80})","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}