2a:null 2b:["$","title",null,{"children":"2. Clustering method | oriolvidal | Observable"}] 30: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(); }31: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(); } }32: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(); }33: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; }34:[{"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}] 2e:{"id":"5f2b414d67bb7f85","slug":"2-clustering-method","title":"2. Clustering method","thumbnail":"0de507222f1364901447a401574e7d430b6e528fbd4114d1f75354e5d557515e","access_level":"public","create_time":"$D2020-12-24T10:40:56.103Z","update_time":"$D2021-01-07T15:08:22.743Z","view_time":null,"first_public_time":"$D2020-12-26T23:53:48.508Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"b1ca7d0d24548993","login":"oriolvidal","name":"","avatar_url":"https://avatars-next.observableusercontent.com/443ce1117e8b5594873c8902f71c967fd82063ed8b359c0ad88e3b4a8cf96fd5","tier":"starter_2024"},"version":1324,"publish_version":1324,"role":null,"authored":false,"authors":[{"type":"individual","id":"8f24078f68f08e6e","login":"oriolvidal","name":"","avatar_url":"https://avatars-next.observableusercontent.com/443ce1117e8b5594873c8902f71c967fd82063ed8b359c0ad88e3b4a8cf96fd5","tier":null}],"members":[{"type":"individual","id":"8f24078f68f08e6e","login":"oriolvidal","name":"","avatar_url":"https://avatars-next.observableusercontent.com/443ce1117e8b5594873c8902f71c967fd82063ed8b359c0ad88e3b4a8cf96fd5","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":{"id":"21f263ad065c96a5","slug":"notebooks","title":"Notebooks","owner":{"id":"b1ca7d0d24548993","login":"oriolvidal","name":""}},"type":"notebook","body":{"titling":"auto","title":"2. Clustering method","cells":[{"id":0,"value":"md`# 2. Clustering method`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1229,"value":"md` --------------------`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1184,"value":"md `## Data Visualization`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1145,"value":"md`### COVID CASES IN THE WORLD FOR SELECTED COUNTRIES`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1277,"value":"md` --------------------`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1141,"value":"md`### COVID CASES PER COUNTRY FOR EACH CLUSTER`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":271,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1280,"value":"md` --------------------`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1148,"value":"md`### COVID CASES PER MILLION COMPARED WITH DIFFERENT DIMENSIONS`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":639,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1010,"value":"md` --------------------`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1159,"value":"md`## Improvements`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1210,"value":"md` --------------------`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1190,"value":"md `## Conclusions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1161,"value":"md` --------------------`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":546,"value":"md`## World map: Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"OWiDdata = FileAttachment(\"CountryClustered@1.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":888,"value":"dataGroup = d3.groups(OWiDdata, d => d.cluster_num)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"world = FileAttachment(\"world-110m.geo.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"worldTopojson = FileAttachment(\"land-50m.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"projection = d3.geoNaturalEarth1();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"path = d3.geoPath(projection)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"graticule = d3.geoGraticule10();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"outline = ({type: \"Sphere\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":996,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":884,"value":"labelHeight = 18;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":885,"value":"legendOrigin = [100,50];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"radius = d3.scaleSqrt([0, d3.max(OWiDdata, d => d.total_cases)], [0, 50]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"format = d3.format(\",.0f\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"width = 1000;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"height = 500;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":298,"value":"margin = ({\n left: 120,\n right: 120,\n top: 100,\n bottom: 0\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"import {form} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"import {legend} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":527,"value":"styles = html`\n `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":261,"value":"md` --------------------`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":263,"value":"md`## Beeswarm plot: Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":274,"value":"color = d3.scaleOrdinal()\n .domain(cluster_num)\n .range(d3.schemeTableau10)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":276,"value":"y = d3.scaleBand()\n .domain(cluster_num)\n .range([height + margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":282,"value":"size = d3.scaleLinear()\n .domain(popExtent)\n .nice()\n .range([3, 20])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":288,"value":"cluster_num = ['1', '2', '3', '4']","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":300,"value":"padding = 1.5","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":635,"value":"md` --------------------`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":632,"value":"md`## Scatterplot: Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":641,"value":"data = d3.csvParse(await FileAttachment(\"CountryClustered@1.csv\").text(), d3.autoType)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":648,"value":"keys = Object.keys(selectedData[0]).slice(6,12);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":670,"value":"import {form} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":673,"value":"d3.max(data, d => d.total_cases_per_million)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":676,"value":"d3.min(data, d => d.total_cases_per_million)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":679,"value":"r = d3.scaleSqrt()\n .domain(d3.extent(data, d => d.population))\n .range([1, 20]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":690,"value":"height2 = 350","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":692,"value":"width2 = 700","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":697,"value":"margin2 = ({top: 35, right: 60, bottom: 45, left: 80})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 2f:"$2e:body"