29:null 2a:["$","title",null,{"children":"draaft - map | teland's Workspace | Observable"}] 2f: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(); }30:[{"id":"b6944728f77a4c6e3af7632c85acb551936858d19df5a923f88d1a828e9a8ff22f4d58094cb9807fd0fc4702bbd053b68794216bbf1cc53374f80135108428b1","href":"https://static.observableusercontent.com/files/b6944728f77a4c6e3af7632c85acb551936858d19df5a923f88d1a828e9a8ff22f4d58094cb9807fd0fc4702bbd053b68794216bbf1cc53374f80135108428b1","name":"all.json","type":"application/json","lastModified":1701686518708.635,"size":586855},{"id":"a4c10e3b9cd72b783743dcdfc7728e467043c323a1f98bd8293d978d37666e3b9797d30b736c9134de679c3694e9d9c6aacc193ea55aeec042d8ede4f4777b4d","href":"https://static.observableusercontent.com/files/a4c10e3b9cd72b783743dcdfc7728e467043c323a1f98bd8293d978d37666e3b9797d30b736c9134de679c3694e9d9c6aacc193ea55aeec042d8ede4f4777b4d","name":"untitled.json","type":"application/json","lastModified":1701686752258.677,"size":619115},{"id":"96d10f6a7a96215c8b4abbc648b3d0621231a52ce4e4b2063f2529191132cac35145ef7f5b3d799ef1b09bc706adb77063c797f90962693ab8926a650e629dc2","href":"https://static.observableusercontent.com/files/96d10f6a7a96215c8b4abbc648b3d0621231a52ce4e4b2063f2529191132cac35145ef7f5b3d799ef1b09bc706adb77063c797f90962693ab8926a650e629dc2","name":"newWorldData.json","type":"application/json","lastModified":1701686843803.502,"size":99524}] 2d:{"id":"f2d9aa4045e1e2ba","slug":null,"title":"draaft - map","thumbnail":"ad233759adf90788bed714591c43723d6650e499efcaa3dd1fb9d104b025c13c","access_level":"public","create_time":"$D2023-12-04T10:41:58.708Z","update_time":"$D2023-12-04T19:16:43.073Z","view_time":null,"first_public_time":"$D2023-12-04T10:41:58.708Z","fork":{"id":"01df04ed701b70c8","slug":"coronavirus-time-animation-map","title":"COVID-19 mapped over time","owner":{"id":"25fee90bb47fd709","login":"joewdavies","name":"Joe Davies"}},"stars":0,"starred":false,"owner":{"type":"team","id":"a06c43110ea8e072","login":"teland-ws","name":"teland's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/66e06adb69eb109d30808192f3b5d41041d61155956b90c398f97c4f7b87c981","tier":"starter_2024"},"version":1359,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"e5ccc8f4e48262ae","login":"teland","name":"teland","avatar_url":"https://avatars-next.observableusercontent.com/fafb7873eb37692108bf905707c0ac082b9b691c267662161e213454d373b401","tier":null}],"members":[{"type":"individual","id":"e5ccc8f4e48262ae","login":"teland","name":"teland","avatar_url":"https://avatars-next.observableusercontent.com/fafb7873eb37692108bf905707c0ac082b9b691c267662161e213454d373b401","tier":null,"role":"editor"},{"type":"team","id":"a06c43110ea8e072","login":"teland-ws","name":"teland's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/66e06adb69eb109d30808192f3b5d41041d61155956b90c398f97c4f7b87c981","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"draaft - map","cells":[{"id":0,"value":"html`

draaft - map

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":24,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":1129,"value":"viewof sphereFill = color({\n value: \"#f0f8ff\",\n title: \"Background Colour\",\n description: \"Background colour of the map\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":18,"value":"height = Math.min(550, width)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":1028,"value":"md`_label positions_`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":1032,"value":"dateY = 5","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1001,"value":"legendX = 15","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1002,"value":"legendY = height - 280","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1060,"value":"fs = 13","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1063,"value":"brSpacing = 13","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":992,"value":"brx = width - 20","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":995,"value":"bry = height - 40","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1219,"value":"md`_d3 scale & projection_`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":904,"value":"deathsExtent = [0, 260000]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":623,"value":"circleScale = d3\n .scaleSqrt()\n .domain(deathsExtent)\n .range([2, 45])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":458,"value":"dpi = window.devicePixelRatio","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":114,"value":"colorScheme = d3.interpolateOrRd","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":86,"value":"colorScale = d3.scalePow().domain(domain)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":44,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":967,"value":"sphere = ({ type: \"Sphere\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":340,"value":"function extractDatesFromNewWorldData(newWorldData) {\n const dates = [];\n\n for (const countryName in newWorldData) {\n const countryData = newWorldData[countryName];\n for (const date in countryData) {\n // Check if the property name is a date (e.g., \"8/21/22\")\n if (/^\\d{1,2}\\/\\d{1,2}\\/\\d{2}$/.test(date)) {\n dates.push(date);\n }\n }\n }\n\n return dates;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1355,"value":"dates = extractDatesFromNewWorldData(newWorldData)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1352,"value":"newWorldData = FileAttachment(\"newWorldData.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":67,"value":"mergedData = FileAttachment(\"untitled.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":47,"value":"coronaData = d3\n .csv(\n \"https://raw.githubusercontent.com/CSSEGISandData/COVID-19/master/csse_covid_19_data/csse_covid_19_time_series/time_series_covid19_deaths_global.csv\"\n )\n .then(function(c) {\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 return c;\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":28,"value":"graticule = d3.geoGraticule10()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":14,"value":"countries = topojson.feature(world, world.objects.countries)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":41,"value":"md`## Dependencies`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1133,"value":"import { color } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":162,"value":"import { legend, swatches } from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"d3 = require(\"d3@5\", \"d3-geo@1\", \"d3-geo-projection@2\", \"d3-geo-polygon@1\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":335,"value":"import { Scrubber } from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":803,"value":"import { select } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":813,"value":"import { projectionInput } from \"@fil/d3-projections\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1128,"value":"import {colorPicker} from \"@shaunlebron/color-picker\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2e:"$2d:body"