3e:null 3f:["$","title",null,{"children":"Coronavirus map per country | Enrique Lopez Magallon | Observable"}] 45:T50d,chart = { // create SVG element var svg = d3.select(DOM.svg(width, height)); // construct the element svg .append('path') .datum(countries) .attr('d', pathGenerator) .attr('class', 'country') .attr('fill', 'gray') .attr('opacity', 0.5) .attr('stroke', 'black') .attr('stroke-width', '0.5'); var circles = svg .selectAll('path') .data(LatLngs) .enter() .append('circle'); circles .attr("cx", d => d[2][0]) .attr("cy", d => d[2][1]) .attr('r', d => Math.cbrt(d[3]) / 5) .attr('class', 'circle') .attr("fill", "#d60f23") .attr('opacity', 0.3) .on("click", function(d) { div .transition() .duration(200) .style("opacity", .9); div .html( "COUNTRY: " + d[0] + "
REGION: " + d[1] + "
CONFIRMED CASES: " + d[3] + "
AS OF " + llave ) .style("left", d3.event.pageX + "px") .style("top", d3.event.pageY - 28 + "px"); }) .on("mouseout", function(d) { div .transition() .duration(500) .style("opacity", 0); }); // pass to Observable to draw this block return svg.node(); }46:[] 43:{"id":"44541bc097c89f3d","slug":"coronavirus-map-per-region","title":"Coronavirus map per country","thumbnail":"8a773cf2ab793a5b0087ef5b4b954639fc88552408ddcefb871bc1f06c4fc545","access_level":"public","create_time":"$D2020-02-09T13:07:25.531Z","update_time":"$D2020-04-24T06:24:42.617Z","view_time":null,"first_public_time":"$D2020-02-16T18:29:18.277Z","has_unpublished_edits":null,"fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"528e119edc847b50","login":"enadol","name":"Enrique Lopez Magallon","avatar_url":"https://avatars-next.observableusercontent.com/79a51b675f7f678404c867b48d2c7c989966d97075cfd85da02b4b24327f12c0","tier":"starter_2024","bio":"Python, SQL, JQuery, HTML, CSS, Javascript, PHP, SQL, SQLite, QGIS. Currently hooked on R."},"version":984,"publish_version":984,"role":null,"authored":false,"authors":[{"type":"individual","id":"1ed29fe1308b28d1","login":"enadol","name":"Enrique Lopez Magallon","avatar_url":"https://avatars-next.observableusercontent.com/79a51b675f7f678404c867b48d2c7c989966d97075cfd85da02b4b24327f12c0","tier":null,"bio":"Python, SQL, JQuery, HTML, CSS, Javascript, PHP, SQL, SQLite, QGIS. Currently hooked on R."}],"members":[{"type":"individual","id":"1ed29fe1308b28d1","login":"enadol","name":"Enrique Lopez Magallon","avatar_url":"https://avatars-next.observableusercontent.com/79a51b675f7f678404c867b48d2c7c989966d97075cfd85da02b4b24327f12c0","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":5,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Coronavirus map per country","cells":[{"id":0,"value":"md`# Coronavirus map per country\nConfirmed cases\n\nJHU modified data structure on 24.03.2020\n\nData as per ${llave}\n\nSource: Johns Hopkins University`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"$45","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":272,"value":"LatLngs = []","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":611,"value":"import { callout } from \"@d3/line-chart-with-tooltip\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":955,"value":"claves = Object.keys(dataraw[0]).slice(4)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":711,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":929,"value":"(Object.size = function(obj) {\n var size = 0,\n key;\n for (key in obj) {\n if (obj.hasOwnProperty(key)) size++;\n }\n return size;\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":930,"value":"ix = Object.size(dataraw[0]) - 1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":933,"value":"llave = Object.keys(dataraw[0])[ix]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":273,"value":"{\n for (var i = 0; i <= factor; i++) {\n var LatLngElement = [\n dataraw[i]['Country/Region'],\n dataraw[i]['Province/State'],\n projection([parseFloat(dataraw[i].Long), parseFloat(dataraw[i].Lat)]),\n dataraw[i][llave]\n ];\n LatLngs[i] = LatLngElement;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":705,"value":"div = d3\n .select(\"body\")\n .append(\"div\")\n .attr(\"class\", \"tooltip\")\n .style(\"opacity\", 0)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"countries = d3.json(\n \"https://gist.githubusercontent.com/phil-pedruco/10447085/raw/426fb47f0a6793776a044f17e66d17cbbf8061ad/countries.geo.json\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":825,"value":"factor = dataraw.length - 1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"format = d => `${d}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"dataraw = d3.csv(\n \"https://raw.githubusercontent.com/CSSEGISandData/COVID-19/master/csse_covid_19_data/csse_covid_19_time_series/time_series_covid19_confirmed_global.csv\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":159,"value":"topojson = require(\"topojson-client@3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":388,"value":"path = d3.geoPath().projection(projection)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":164,"value":"pathGenerator = d3.geoPath().projection(projection)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"height = 720","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"projection = d3\n .geoMercator()\n .scale(150)\n .translate([width / 2, height / 1.5])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"width = 980","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W46","stdlib":"1"}} 44:"$43:body"