3e:null 3f:["$","title",null,{"children":"Coronavirus day-to-day % growth rate | Enrique Lopez Magallon | Observable"}] 45:T609,map = { const svg = d3 .create("svg") .attr('class', 'map') .attr("viewBox", [0, -100, width, height]); const path = d3.geoPath(projection); const map = svg.append('g').classed('world', true); const bubbles = svg.append('g').attr('class', 'bubbles'); const chart = svg .append('g') .attr('class', 'chart') .attr('transform', `translate(200, ${height})`); const date = svg .append('g') .attr('class', 'header') .attr('font-family', 'Helvetica Neue, sans-serif') .attr('transform', `translate(20, ${footerX - distance * 2})`); map .selectAll('countries') .append('g') .data(countries) .enter() .append('path') .attr('class', d => `${d.properties.id}`) .attr('fill', 'rgba(0,0,0,0.07)') .attr('linewidth', 0.5) .attr('stroke', 'rgba(0,0,0,0.08)') .attr('d', path); const footer = svg .append('g') .attr('class', 'footer') .attr('font-family', 'Helvetica Neue, sans-serif') .attr('font-size', `${normalTextSize}px`) .attr('transform', `translate(0, ${footerX})`); // legend svg .append("g") .classed("legends", true) .attr('transform', `translate(10,${footerX + distance * 6})`) .attr('font-size', `${normalTextSize}px`) .style('fill', '#2B3F4E') .attr('color', '#2B3F4E'); /* Alternate approach is to map data to countries and use path.centroid: see: https://observablehq.com/@d3/bubble-map */ invalidation.then(() => svg.remove()); mutable start = !mutable start; return svg.node(); }46:T821,bubbles = { start; console.log('starting bubbles'); const bubbles = d3.select('.bubbles'); // add bubbles const t = bubbles.transition().duration(speed - 100); const dateText = d3.select('.dateText'); // add a footertext bubbles .selectAll('circle') .data(timeline) .join( enter => enter .append('circle') .attr('class', d => d.name) .style('opacity', 0) .attr('r', 0) .attr('linewidth', 0.5) .attr('stroke', '#333') .style('fill', d => '#d60f23') //color(d.name)) .style('stroke', '#333') .call(enter => enter.transition(t).style('opacity', 0.1)) .attr("transform", d => `translate(${projection(d.pos)})`) .append('text') .text(d => d.country), update => update.call(update => { update .transition(t) .attr('r', d => Math.sqrt(d.confirmed)) .style('opacity', d => opacity(d.confirmed)); }), exit => exit.call(exit => exit .transition(t) .style('opacity', 0) .remove() ) ) .on("click", function(d) { div .transition() .duration(200) .style("opacity", .9); div .html( "COUNTRY: " + d.country + "
REGION: " + d.state + "
GROWTH ON " + cummulativeByDate.date + ": " + d.confirmed.toFixed(2) + " %" ) .style("left", d3.event.pageX + "px") .style("top", d3.event.pageY - 28 + "px"); }) .on("mouseout", function(d) { div .transition() .duration(100) .style("opacity", 0); }); // monkeypatching the linewidth and fonts d3.select('.ledgend-size') .selectAll('text') .attr('font-size', normalTextSize); d3.select('.legend-size') .selectAll('circle') .attr('linewidth', 0.5); dateText.text(cummulativeByDate.date); }47:T9ca,locations = d3.csvParse(`Province,Country,Lat,Long Anhui,Mainland China,31.82571,117.2264 Beijing,Mainland China,40.18238,116.4142 Chongqing,Mainland China,30.05718,107.874 Fujian,Mainland China,26.07783,117.9895 Gansu,Mainland China,36.0611,103.8343 Guangdong,Mainland China,23.33841,113.422 Guangxi,Mainland China,23.82908,108.7881 Guizhou,Mainland China,26.81536,106.8748 Hainan,Mainland China,19.19673,109.7455 Hebei,Mainland China,38.0428,114.5149 Heilongjiang,Mainland China,47.862,127.7622 Henan,Mainland China,33.88202,113.614 Hubei,Mainland China,30.97564,112.2707 Hunan,Mainland China,27.61041,111.7088 Inner Mongolia,Mainland China,44.09448,113.9456 Jiangsu,Mainland China,32.97027,119.464 Jiangxi,Mainland China,27.61401,115.7221 Jilin,Mainland China,43.66657,126.1917 Liaoning,Mainland China,41.29284,122.6086 Ningxia,Mainland China,37.26923,106.1655 Qinghai,Mainland China,35.65945,96.02564 Shaanxi,Mainland China,35.19165,108.8701 Shandong,Mainland China,36.34377,118.1529 Shanghai,Mainland China,31.20327,121.4554 Shanxi,Mainland China,37.57769,112.2922 Sichuan,Mainland China,30.61714,102.7103 Tianjin,Mainland China,39.29362,117.333 Tibet,Mainland China,30.1534,88.7879 Xinjiang,Mainland China,41.11981,85.17822 Yunnan,Mainland China,24.97411,101.4868 Zhejiang,Mainland China,29.18251,120.0985 ,Thailand,13.7563,100.5018 ,Japan,35.6762,139.6503 ,South Korea,37.5665,126.978 Taiwan,Taiwan,23.6978,120.9605 Seattle WA,US,47.7511,-120.74 Chicago IL,US,40.6331,-89.3985 Tempe AZ,US,34.0489,-111.094 Macau,Macau,22.1987,113.5439 Hong Kong,Hong Kong,22.3193,114.1694 ,Singapore,1.3521,103.8198 ,Vietnam,21.0278,105.8342 ,France,46.2276,2.2137 ,Nepal,28.3949,84.124 ,Malaysia,4.2105,101.9758 Toronto ON,Canada,43.6532,-79.3832 British Columbia,Canada,49.2827,-123.121 Orange CA,US,33.7879,-117.8531 Los Angeles CA,US,34.0522,-118.2437 New South Wales,Australia,-33.8688,151.2093 Victoria,Australia,-37.8136,144.9631 Queensland,Australia,-27.4698,153.0251 ,Cambodia,12.5657,104.991 ,Sri Lanka,7.8731,80.7718 ,Germany,51.1657,10.4515 ,Finland,61.9241,25.7482 ,United Arab Emirates,23.4241,53.8478 ,Philippines,12.8797,121.774 ,India,20.5937,78.9629 London ON,Canada,42.9849,-81.2453 ,Italy,41.8719,12.5674 ,UK,55.3781,-3.436 ,Russia,61.524,105.3188 ,Sweden,60.1282,18.6435 Santa Clara,CA US,37.3541,-121.9552 ,Spain,40.4637,-3.7492 South Australia,Australia,-34.9285,138.6007 Boston MA,US,42.3601,-71.0589 San Benito CA,US,36.5761,-120.9876 ,Belgium,50.5039,4.4699 Madison WI,US,43.0731,-89.4012`)48:[{"id":"254a99fef9cfdc739794cf276a25ffce226b9d17d64789497bbed4935f1fda7d621149894d3a06e546f0e5c53beda2580db0166433ff2fac65397af1aa3627ea","href":"https://static.observableusercontent.com/files/254a99fef9cfdc739794cf276a25ffce226b9d17d64789497bbed4935f1fda7d621149894d3a06e546f0e5c53beda2580db0166433ff2fac65397af1aa3627ea","name":"countries-50m.json","type":"application/json","lastModified":1582910113598.87,"size":756420},{"id":"e7d541ba337d8c79e93140072bddaddd5cdef659af736efbdbb838afa61530ad90003a8829034b4539d9c84a6ef9a42e7689ee04c020294dc5ddbc9e45b351eb","href":"https://static.observableusercontent.com/files/e7d541ba337d8c79e93140072bddaddd5cdef659af736efbdbb838afa61530ad90003a8829034b4539d9c84a6ef9a42e7689ee04c020294dc5ddbc9e45b351eb","name":"inputData(22).json","type":"application/json","lastModified":1586849619522.716,"size":2114873},{"id":"c76c1cb902b0989e8b430d7aed409392fb80207a56f2ed963f1f68387a97fb0ba02ed0da7a145bde3c8755fb73dc3437b68d657aec9cb6be0448d95d325e6dc7","href":"https://static.observableusercontent.com/files/c76c1cb902b0989e8b430d7aed409392fb80207a56f2ed963f1f68387a97fb0ba02ed0da7a145bde3c8755fb73dc3437b68d657aec9cb6be0448d95d325e6dc7","name":"inputData(20).json","type":"application/json","lastModified":1586680342706.631,"size":2056379},{"id":"c1bee879fa4cb1e9d68d3d8b009622356d0face0d3516e2c85b8037e6a01b9eb139e7c00378888f2354ecf422489a5c0bdeb12ed3c6b595256525d97ca4fd8d1","href":"https://static.observableusercontent.com/files/c1bee879fa4cb1e9d68d3d8b009622356d0face0d3516e2c85b8037e6a01b9eb139e7c00378888f2354ecf422489a5c0bdeb12ed3c6b595256525d97ca4fd8d1","name":"inputData(1)@3.json","type":"application/json","lastModified":1587017951358.861,"size":2163864},{"id":"6e3a219bb9227642e5fd9ef732adceaca0d8e7f3cb2611d47e125578bd13bfbafb89dc49f591a9a6a7579d076d9b7813e880961fda934d87de48e4acf7544325","href":"https://static.observableusercontent.com/files/6e3a219bb9227642e5fd9ef732adceaca0d8e7f3cb2611d47e125578bd13bfbafb89dc49f591a9a6a7579d076d9b7813e880961fda934d87de48e4acf7544325","name":"inputData(21).json","type":"application/json","lastModified":1586764649139.005,"size":2073814},{"id":"50096049c81fdc9b66fa5e2197f8d1b7e62606eac0e158d5ed57ba7d0b045b58e7d1c5410eddd762f08debaac8b0261bab991fa319727e13743891000008d604","href":"https://static.observableusercontent.com/files/50096049c81fdc9b66fa5e2197f8d1b7e62606eac0e158d5ed57ba7d0b045b58e7d1c5410eddd762f08debaac8b0261bab991fa319727e13743891000008d604","name":"inputData@4.json","type":"application/json","lastModified":1586963192376.046,"size":2136798},{"id":"cbac9a237ecc9b56f76ae7ecca64345fa6de769df8cff0bc5c2ef68fda3101d27e2165c062b802176a9aaac784e1da7b6dce3d05e8921ea10934ea76e2a720a6","href":"https://static.observableusercontent.com/files/cbac9a237ecc9b56f76ae7ecca64345fa6de769df8cff0bc5c2ef68fda3101d27e2165c062b802176a9aaac784e1da7b6dce3d05e8921ea10934ea76e2a720a6","name":"inputData (1)@1.json","type":"application/json","lastModified":1587104564081.122,"size":2190631},{"id":"af7bc0a8c962eb603fe4d1b94acc9949cdc1cfebf5d96c7baa9ea0d48682969ef9a7bb9606a6258576d47b1e2c40bf4b786cf667f4e3efe4fd290b4c6bf0ced3","href":"https://static.observableusercontent.com/files/af7bc0a8c962eb603fe4d1b94acc9949cdc1cfebf5d96c7baa9ea0d48682969ef9a7bb9606a6258576d47b1e2c40bf4b786cf667f4e3efe4fd290b4c6bf0ced3","name":"inputData(2)@3.json","type":"application/json","lastModified":1587187523962.757,"size":2274504}] 43:{"id":"e06c88813a376cb6","slug":"coronavirus-daily-growth-rate","title":"Coronavirus day-to-day % growth rate","thumbnail":"83cd917688b75a962354035c8446c2786a511dd9c8ae06c33c7480ce7105d636","access_level":"public","create_time":"$D2020-02-28T17:15:13.598Z","update_time":"$D2020-06-16T06:51:09.145Z","view_time":null,"first_public_time":"$D2020-03-01T09:45:29.879Z","has_unpublished_edits":null,"fork":{"id":"17f433735335117b","slug":"map-and-timeline-of-corona-outbreak","title":"Map and timeline of Corona outbreak","owner":{"id":"30282bed62c6b392","login":"kartoteket","name":"Kartoteket"}},"stars":2,"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":3764,"publish_version":3764,"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":7,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Coronavirus day-to-day % growth rate","cells":[{"id":0,"value":"md`# Coronavirus day-to-day % growth rate\nMap of daily hotspots\n\nThis map doesn't represent number of cases, but rather the growth in percentage (clusters) compared to the day before. Its purpose is to ilustrate the location of the main hotspots of each day since the beginning of the crisis, as separate units.\nData up to ${ayer}.\n\nSource: [Johns Hopkins CSSE](https://gisanddata.maps.arcgis.com/apps/opsdashboard/index.html#/bda7594740fd40299423467b48e9ecf6).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3382,"value":"html`

${cummulativeByDate.date}

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1566,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3413,"value":"titel = {\n d3.select('h2')\n .attr('class', 'dateText')\n .text(d => `${cummulativeByDate.date}`);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3552,"value":"ayer = {\n var hoy = new Date();\n var dd = String(hoy.getDate()).padStart(2, '0') - 1;\n var mm = String(hoy.getMonth() + 1).padStart(2, '0'); //January is 0!\n var yy = hoy\n .getFullYear()\n .toString()\n .substr(-2);\n\n var ayer = mm + '/' + dd + '/' + yy;\n return ayer;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3593,"value":"delay = 2000","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3749,"value":"import { select } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3751,"value":"viewof dd = select(forlabel)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2351,"value":"viewof replay = html`