31:T14cc,chart = { const container = d3.create("div"); const svg = container .append("svg") .attr("width", width) .attr("height", height); const tooltip = container .append("div") .attr("class", "svg-tooltip") .style("position", "absolute") .style("bottom", "10px") .style("right", "10px") .style("background-color", "#ffffff") .style("padding", "10px") .style("border", "1px solid") .style("border-radius", "10px") .style("visibility", "hidden"); const path = d3.geoPath(projection); // sphere // let spheresvg = svg // .append("path") // .attr("fill", sphereFill) // .attr("opacity", 1) // .attr("stroke", "#000") // .attr("d", path(sphere)); // graticule // let graticules = svg // .append('path') // .attr('fill', 'none') // .attr("opacity", "0.4") // .attr('stroke', '#ccc') // .attr('d', path(graticule)); // countries topojson let countr = svg .append("g") .selectAll("path") .data(mergedData) .join("path") .attr("fill", (f) => colorFunction(f)) .attr("stroke", "#000") .attr("stroke-width", 0.2) .attr("d", path) .style("cursor", "pointer") .on("mouseover", function (d) { tooltip.style("visibility", "visible"); let htmlString = ""; htmlString = htmlString + "Country: " + d.properties.name + "
"; if (d.properties.population) { htmlString = htmlString + "Population: " + d.properties.population.toLocaleString("en").replace(/,/gi, " ") + "
"; } if (d.properties.corona) { htmlString = htmlString + "Confirmed Deaths as of " + date + ": " + parseFloat(d.properties.corona[date]) .toLocaleString("en") .replace(/,/gi, " ") + "
"; } tooltip.html(htmlString); }) .on("mousemove", function () { d3.select(this).attr("fill", "turquoise"); //.attr('stroke', 'turquoise') //.attr('stroke-width', 3); }) .on("mouseleave", function () { d3.select(this).attr("fill", (f) => colorFunction(f)); //.attr('stroke', '#000') //.attr('stroke-width', 0.2); tooltip.style("visibility", "hidden"); }); // proportional circles let propCircles = svg .selectAll("circle") .data(mergedData) .enter() .append("circle") .style("stroke", "black") .style("stroke-width", 0.5) .style("fill", "red") .style("opacity", "0.8") .style("pointer-events", "none") .attr("r", (d) => toRadius(d)) // now use the projection to project your coords .attr("cx", (d) => { if (d.properties.corona) { if (d.properties.corona[date] > 0) { let coordinates = [d.properties.corona.Long, d.properties.corona.Lat]; return projection(coordinates)[0]; } } }) .attr("cy", (d) => { if (d.properties.corona) { if (d.properties.corona[date] > 0) { let coordinates = [d.properties.corona.Long, d.properties.corona.Lat]; return projection(coordinates)[1]; } } }); // legend title const legendTitle = svg .append("g") .attr("fill", "#444") .attr("transform", "translate(" + legendX + "," + legendY + ")") .attr("text-anchor", "right") .style("font", "14px sans-serif"); legendTitle .append("text") .attr("font-weight", "bold") .attr("y", 5) .attr("x", 0) .attr("dy", "1.3em") .text("Confirmed deaths from COVID-19"); // legend const legend = svg .append("g") .attr("fill", "#444") .attr( "transform", "translate(" + (legendX + 70) + "," + (legendY + 125) + ")" ) .attr("text-anchor", "right") .style("font", "12px sans-serif") .selectAll("g") .data([250000, 100000, 30000]) .join("g"); legend .append("circle") .attr("fill", "none") .attr("stroke", "#444") .attr("cy", (d) => -circleScale(d)) .attr("r", circleScale); legend .append("text") .attr("y", (d) => -1 - 2 * circleScale(d)) .attr("x", 55) .attr("dy", "1.3em") .text((d) => { return parseInt(d).toLocaleString("en").replace(/,/gi, " "); }); let datestring = new Date(date).toLocaleDateString("en-GB"); let dateLabel = container .append("div") .attr( "style", `white-space:pre; left:${dateX}px; top:${dateY}px; position:absolute; font-size:20px` ); dateLabel.node().innerHTML = `Date: ${datestring} | Total confirmed deaths: ${totalDeaths.toLocaleString()}`; //bottom right const attribution = svg .append("text") .attr("font-size", fs) .text("Data: John Hopkins CSSE") .attr("text-anchor", "end") .attr("transform", `translate(${brx},${bry})`); const handle = svg .append("text") .attr("font-size", fs) .text("@joewdavies") .attr("text-anchor", "end") .attr("transform", `translate(${brx},${bry + brSpacing})`); const challenge = svg .append("text") .text("#30DayMapChallenge") .attr("font-size", fs) .attr("text-anchor", "end") .attr("transform", `translate(${brx},${bry + brSpacing * 2})`); return container.node(); }32:T5fc,mergedData = { let merged = []; //loop through countries topojson and add population/corona cases for (var i = 0; i < countries.features.length; i++) { let country = countries.features[i]; // countries topojson data as main object let obj = Object.assign({}, countries.features[i]); //add population for (var c = 0; c < populationData.length; c++) { if (populationData[c].name == country.properties.name) { obj.properties.population = populationData[c].population; } } //add corona data by country name for (var g = 0; g < coronaData.length; g++) { if (obj.properties.name == coronaData[g]["Country/Region"]) { if (!obj.properties.corona) { obj.properties.corona = coronaData[g]; } else { // sum each province for countries with multiple provinces for (var key in coronaData[g]) { if (!isNaN(key[0])) { obj.properties.corona[key] = parseInt(obj.properties.corona[key]) + parseInt(coronaData[g][key]); } } // set lat/lon as the object without province to avoid setting centroid in overseas territories if (coronaData[g]["Province/State"] == "") { obj.properties.corona.Long = coronaData[g].Long; obj.properties.corona.Lat = coronaData[g].Lat; } } } } if (!obj.properties.corona) { obj.properties.corona = null; } merged.push(obj); } return merged; }33:[{"id":"576ddbee735e5e398dc0c98aa656543c1842a3f3b68d1fab7199f096d3f560ae0b0f3178309e1042b83d9c17faea1d5ce24185a94783493afe32bdd90d78f83e","href":"https://static.observableusercontent.com/files/576ddbee735e5e398dc0c98aa656543c1842a3f3b68d1fab7199f096d3f560ae0b0f3178309e1042b83d9c17faea1d5ce24185a94783493afe32bdd90d78f83e","name":"time_series_covid19_deaths_global.csv","type":"text/csv","lastModified":1710924337323.964,"size":1255258},{"id":"b6944728f77a4c6e3af7632c85acb551936858d19df5a923f88d1a828e9a8ff22f4d58094cb9807fd0fc4702bbd053b68794216bbf1cc53374f80135108428b1","href":"https://static.observableusercontent.com/files/b6944728f77a4c6e3af7632c85acb551936858d19df5a923f88d1a828e9a8ff22f4d58094cb9807fd0fc4702bbd053b68794216bbf1cc53374f80135108428b1","name":"all.json","type":"application/json","lastModified":1632841585989.085,"size":586855}] 2f:{"title":"COVID-19 mapped over time","cells":[{"id":0,"value":"html`

COVID-19 mapped over time

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":542,"value":"html`Map showing the total confirmed deaths attributed to Covid-19 over time.
Data source: Johns Hopkins CSSE.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":334,"value":"viewof date = Scrubber(dates, {\n autoplay: false,\n format: date => date.toLocaleString(\"en\", { month: \"long\", day: \"numeric\" }),\n delay: 100\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":797,"value":"viewof projection = projectionInput({\n name: \"projection\",\n value:\n new URLSearchParams(html``.search).get(\"Robinson\") || \"Robinson\"\n})\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"height = Math.min(550, width)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1145,"value":"totalDeaths = {\n let total = 0;\n coronaData.map(d => {\n if (d[date]) {\n // round to nearest 1000\n total = total + parseInt(d[date]);\n }\n });\n return total;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1028,"value":"md`_label positions_`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1031,"value":"dateX = {\n if (width > 900) {\n return width / 2 - 250;\n } else {\n return 5;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1032,"value":"dateY = 5","pinned":false,"hidden":false,"mode":"ojs"},{"id":1001,"value":"legendX = 15","pinned":false,"hidden":false,"mode":"ojs"},{"id":1002,"value":"legendY = height - 280","pinned":false,"hidden":false,"mode":"ojs"},{"id":1060,"value":"fs = 13","pinned":false,"hidden":false,"mode":"ojs"},{"id":1063,"value":"brSpacing = 13","pinned":false,"hidden":false,"mode":"ojs"},{"id":992,"value":"brx = width - 20","pinned":false,"hidden":false,"mode":"ojs"},{"id":995,"value":"bry = height - 40","pinned":false,"hidden":false,"mode":"ojs"},{"id":1219,"value":"md`_d3 scale & projection_`","pinned":false,"hidden":false,"mode":"ojs"},{"id":842,"value":"adjustProj = {\n if (projection.fitSize) {\n projection.fitExtent(\n [\n [2, 20],\n [width, height]\n ],\n sphere\n );\n }\n return projection;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":904,"value":"deathsExtent = [0, 260000]","pinned":false,"hidden":false,"mode":"ojs"},{"id":623,"value":"circleScale = d3\n .scaleSqrt()\n .domain(deathsExtent)\n .range([2, 45])","pinned":false,"hidden":false,"mode":"ojs"},{"id":630,"value":"toRadius = function(d) {\n if (d.properties.corona) {\n return circleScale(d.properties.corona[date]);\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":458,"value":"dpi = window.devicePixelRatio","pinned":false,"hidden":false,"mode":"ojs"},{"id":537,"value":"colorFunction = function(f) {\n if (f.properties.corona) {\n if (f.properties.corona[date] > 0) {\n return \"#F9AFAF\";\n } else {\n return \"#fcfcfc\";\n }\n } else return \"white\";\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":114,"value":"colorScheme = d3.interpolateOrRd","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"colorScale = d3.scalePow().domain(domain)","pinned":false,"hidden":false,"mode":"ojs"},{"id":87,"value":"domain = d3.extent(mergedData, d => {\n if (d.properties.corona && d.properties.population)\n return d.properties.corona[date] / d.properties.population;\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":967,"value":"sphere = ({ type: \"Sphere\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":340,"value":"dates = {\n let d = [];\n for (var key in coronaData[0]) {\n if (!isNaN(key[0])) {\n d.push(key);\n // if (key.charAt(0) !== \"1\") {\n // //omit jan\n // d.push(key);\n // }\n }\n }\n return d;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":69,"value":"populationData = await FileAttachment(\"all.json\")\n .json()\n .then(function (data) {\n data.forEach((d) => {\n if (d.name === \"Iran (Islamic Republic of)\") {\n d.name = \"Iran\";\n } else if (d.name === \"Syrian Arab Republic\") {\n d.name = \"Syria\";\n } else if (d.name === \"Palestine, State of\") {\n d.name = \"Palestine\";\n } else if (d.name === \"Bolivia (Plurinational State of)\") {\n d.name = \"Bolivia\";\n } else if (d.name === \"Venezuela (Bolivarian Republic of)\") {\n d.name = \"Venezuela\";\n } else if (d.name === \"Russian Federation\") {\n d.name = \"Russia\";\n } else if (d.name === \"Viet Nam\") {\n d.name = \"Vietnam\";\n } else if (d.name === \"Korea (Republic of)\") {\n d.name = \"South Korea\";\n } else if (d.name === \"Congo (Democratic Republic of the)\") {\n d.name = \"Dem. Rep. Congo\";\n }\n });\n return data;\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1357,"value":"csvData = d3.csvParse(\n await FileAttachment(\"time_series_covid19_deaths_global.csv\").text()\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":47,"value":"coronaData = {\n let c = csvData;\n //rename certain countries to fit model\n for (let key in c) {\n if (c[key][\"Country/Region\"] == \"US\") {\n c[key][\"Country/Region\"] = \"United States of America\";\n } else if (c[key][\"Country/Region\"] == \"Korea, South\") {\n c[key][\"Country/Region\"] = \"South Korea\";\n } else if (c[key][\"Country/Region\"] == \"Burma\") {\n c[key][\"Country/Region\"] = \"Myanmar\";\n } else if (c[key][\"Country/Region\"] == \"Congo (Brazzaville)\") {\n c[key][\"Country/Region\"] = \"Congo\";\n } else if (c[key][\"Country/Region\"] == \"Congo (Kinshasa)\") {\n c[key][\"Country/Region\"] = \"Dem. Rep. Congo\";\n } else if (c[key][\"Country/Region\"] == \"Cote d'Ivoire\") {\n c[key][\"Country/Region\"] = \"Côte d'Ivoire\";\n }\n }\n\n return c;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"graticule = d3.geoGraticule10()","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"countries = topojson.feature(world, world.objects.countries)","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"world = await d3.json(\n \"https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"md`## Dependencies`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1133,"value":"import { color } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":162,"value":"import { legend, swatches } from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"d3 = require(\"d3@5\", \"d3-geo@1\", \"d3-geo-projection@2\", \"d3-geo-polygon@1\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":335,"value":"import { Scrubber } from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":803,"value":"import { select } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":813,"value":"import { projectionInput } from \"@fil/d3-projections\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1128,"value":"import {colorPicker} from \"@shaunlebron/color-picker\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}