3f:null 40:["$","title",null,{"children":"3. Clustering | Santiago Salcido | Observable"}] 46: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(); }47:Tae1,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(); } }48: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(); }49:[{"id":"fc2c06f0952f1669b7cc87db4e589926fc422f268c16a09fc2ba98f14ad0ca72f1baa33241cb0935df9e0dfde1a412d35f17c11ee399f20fffb4648926fe47a8","href":"https://static.observableusercontent.com/files/fc2c06f0952f1669b7cc87db4e589926fc422f268c16a09fc2ba98f14ad0ca72f1baa33241cb0935df9e0dfde1a412d35f17c11ee399f20fffb4648926fe47a8","name":"CountryClustered@1.csv","type":"text/csv","lastModified":1609880169116.675,"size":18690},{"id":"7b6ff41e373e01d7b5b95773e297d40625bd9ccc1936a023a066a7edd8da5eaadec4ab7a565303539e41e001f2e6730f3ee1e259fae4f19dc59e8d6b2f2ec22b","href":"https://static.observableusercontent.com/files/7b6ff41e373e01d7b5b95773e297d40625bd9ccc1936a023a066a7edd8da5eaadec4ab7a565303539e41e001f2e6730f3ee1e259fae4f19dc59e8d6b2f2ec22b","name":"land-50m.json","type":"application/json","lastModified":1609880169116.675,"size":545534},{"id":"f3fd67b739213db23653aa05dbc7420f340139cb2b4d52afb58c57a6b13631204ff6c3c031f3936e77add84bcef4a6fabb3a98b1f20534f563fde0de51b49762","href":"https://static.observableusercontent.com/files/f3fd67b739213db23653aa05dbc7420f340139cb2b4d52afb58c57a6b13631204ff6c3c031f3936e77add84bcef4a6fabb3a98b1f20534f563fde0de51b49762","name":"world-110m.geo.json","type":"application/json","lastModified":1609880169116.675,"size":252486}] 44:{"id":"6f5719ebb5bbb5f1","slug":"3-clustering","title":"3. Clustering","thumbnail":"b2cea03d8da9110e63936c2d1d13a6f95d7a76b44ad8c355ee492c809c7d398d","access_level":"public","create_time":"$D2021-01-05T20:56:09.116Z","update_time":"$D2021-01-05T22:20:51.869Z","view_time":null,"first_public_time":"$D2021-01-06T14:25:35.419Z","has_unpublished_edits":null,"fork":{"id":"5f2b414d67bb7f85","slug":"2-clustering-method","title":"2. Clustering method","owner":{"id":"b1ca7d0d24548993","login":"oriolvidal","name":""}},"stars":0,"starred":false,"owner":{"type":"team","id":"26ad3d0499b8e73a","login":"ssalcido","name":"Santiago Salcido","avatar_url":"https://avatars-next.observableusercontent.com/86ad7be14e345939560ec8a976ed8fc64a40a466b4baadef7e738548ec71d8e3","tier":"starter_2024","bio":"","following":false},"version":1184,"publish_version":1184,"role":null,"authored":false,"authors":[{"type":"individual","id":"42e7544461f30790","login":"ssalcido","name":"Santiago Salcido","avatar_url":"https://avatars-next.observableusercontent.com/86ad7be14e345939560ec8a976ed8fc64a40a466b4baadef7e738548ec71d8e3","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"42e7544461f30790","login":"ssalcido","name":"Santiago Salcido","avatar_url":"https://avatars-next.observableusercontent.com/86ad7be14e345939560ec8a976ed8fc64a40a466b4baadef7e738548ec71d8e3","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"4ede8333b4dad5cc","slug":"mvtec-group-assignment-1","title":"MVTEC | Group Assignment 1","owner":{"id":"26ad3d0499b8e73a","login":"ssalcido","name":"Santiago Salcido"}},"type":"notebook","body":{"titling":"auto","title":"3. Clustering","cells":[{"id":0,"value":"md`# 3. Clustering`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1161,"value":"md `## Introduction`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1095,"value":"md`For the clustering method we decide to... lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum purus turpis, euismod sit amet bibendum nec, mollis et ante. Aenean at nisl id eros sollicitudin luctus vitae sit amet diam.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1163,"value":"md `## Data Visualization`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":271,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$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","tool":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":639,"value":"$48","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1010,"value":"md` --------------------`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1176,"value":"md `## Conclusion`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1178,"value":"md `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum purus turpis, euismod sit amet bibendum nec, mollis et ante. Aenean at nisl id eros sollicitudin luctus vitae sit amet diam. Proin sed velit sit amet elit fermentum malesuada. Proin luctus nibh a neque finibus, vitae sagittis enim iaculis. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1169,"value":"md `## Apendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":546,"value":"md`### World map`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$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","tool":"$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","tool":"$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","tool":"$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","tool":"$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","tool":"$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","tool":"$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","tool":"$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","tool":"$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","tool":"$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","tool":"$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","tool":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":996,"value":"clusterlegend = svg => {\n const clusterlegend = svg.selectAll(\".legend\")\n .data(dataGroup)\n .enter();\n \n clusterlegend\n .append('text')\n .text(d => d[0])\n .attr('x', legendOrigin[0] + labelHeight * 1.2 -40)\n .attr('y', (d,i) => legendOrigin[1] + labelHeight + labelHeight * 1.2 *i +220)\n .style('font-family', 'Helvetica')\n .style('font-size', `${labelHeight-3}px`)\n .attr(\"opacity\", 0.7);\n \n clusterlegend\n .append('circle')\n .attr('cx', legendOrigin[0] -32)\n .attr('cy', (d,i) => legendOrigin[1] + labelHeight * 1.25 * i +232)\n .attr('r', 8)\n .attr('width', labelHeight)\n .attr('height', labelHeight)\n .attr('fill', (d) => color(d[0]))\n .attr(\"fill-opacity\",\".4\")\n .attr('stroke', (d) => color(d[0]))\n .style('stroke-width', '1.4px');\n \n \n return clusterlegend;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":884,"value":"labelHeight = 18;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$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","tool":"$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","tool":"$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","tool":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"width = 1000;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"height = 500;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$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","tool":"$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","tool":"$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","tool":"$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","tool":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":261,"value":"md` --------------------`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":263,"value":"md`### Beeswarm plot`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$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","tool":"$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","tool":"$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","tool":"$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","tool":"$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","tool":"$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","tool":"$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","tool":"$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","tool":"$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","tool":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":635,"value":"md` --------------------`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":632,"value":"md`### Scatterplot`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$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","tool":"$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","tool":"$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","tool":"$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","tool":"$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","tool":"$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","tool":"$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","tool":"$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","tool":"$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","tool":"$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","tool":"$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","tool":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":690,"value":"height2 = 350","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":692,"value":"width2 = 700","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W49","stdlib":"1"}} 45:"$44:body"