3e:null 3f:["$","title",null,{"children":"Map and timeline of Corona outbreak (\"La Roja\" version) | Enrique Lopez Magallon | Observable"}] 45:Tbfd,map = { const svg = d3 .create("svg") .attr('class', 'map') .attr("viewBox", [0, 0, chartWidth, 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 - 400})`); const date = svg .append('g') .attr('class', 'header') .attr('font-family', 'Helvetica Neue, sans-serif') .attr('transform', `translate(10, ${footerX - distance * 2})`); 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'); map .selectAll('countries') .append('g') .data(countries) .enter() .append('path') .attr('class', d => `${d.properties.id}`) .attr('fill', 'rgba(0,0,0,0.03)') .attr('linewidth', 0.5) .attr('stroke', 'rgba(0,0,0,0.08)') .attr('d', path); date .append('g') .append('text') .attr('font-size', `${headlineTextSize}px`) .attr('class', 'dateText'); footer .append('g') .attr('transform', 'translate(170,0)') .append('text') .attr('fill', '#333') .text('Nuevos:'); footer .append('g') .attr('transform', 'translate(120,0)') .append('text') .attr('fill', '#333') .text('Totales:'); footer .append('line') .attr('stroke', '#333') .style('stroke-opacity', 1) .attr('stroke-width', 0.7) .attr('x1', 0) .attr('x2', 210) .attr('y1', 10) .attr('y2', 10); // confirmed footer .append('g') .attr('transform', `translate(10,${distance * 1 + 10})`) .append('text') .attr('fill', '#333') .text('Confirmados:'); footer .append('g') .attr('transform', `translate(120,${distance * 1 + 10})`) .append('text') .attr('class', 'confirmed'); footer .append('g') .attr('transform', `translate(170,${distance * 1 + 10})`) .append('text') .attr('class', 'new-confirmed'); // dead footer .append('g') .attr('transform', `translate(10,${distance * 2 + 10})`) .append('text') .attr('fill', '#333') .text('Muertes:'); footer .append('g') .attr('transform', `translate(120,${distance * 2 + 10})`) .append('text') .attr('class', 'deaths'); footer .append('g') .attr('transform', `translate(170,${distance * 2 + 10})`) .append('text') .attr('class', 'new-deaths'); /* 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:Tad1,bubbles = { start; console.log('starting bubbles'); const bubbles = d3.select('.bubbles'); // add bubbles const t = bubbles.transition().duration(speed); const dateText = d3.select('.dateText'); // add a footertext const recoveredText = d3.select('.recovered'); const confirmedText = d3.select('.confirmed'); const newConfirmedText = d3.select('.new-confirmed'); const newRecoveredText = d3.select('.new-recovered'); const newDeathsText = d3.select('.new-deaths'); const deathsText = d3.select('.deaths'); const legends = d3.select('.legends'); bubbles .selectAll('circle') .data(timeline) .join( enter => enter .append('circle') .attr('class', d => d.name) .style('opacity', 0) .attr('r', 1) .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)})`), update => update.call(update => { update .transition(t) .attr('r', d => size(d.confirmed / 10)) .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 + "
CASES ON " + cummulativeByDate.date + ":
" + d.confirmed ) .style("left", d3.event.pageX + "px") .style("top", d3.event.pageY - 28 + "px"); }) .on("mouseout", function(d) { div .transition() .duration(100) .style("opacity", 0); }); legends.select('.ledgend-size').remove(); legends .append('g') .classed('ledgend-size', true) .call(legend); // 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); confirmedText.text(cummulativeByDate.confirmed); newConfirmedText.text(cummulativeByDate.newConfirmed); recoveredText.text(cummulativeByDate.recovered); newRecoveredText.text(cummulativeByDate.newRecovered); deathsText.text(cummulativeByDate.deaths); newDeathsText.text(cummulativeByDate.newDeaths); }47:Tf34,// this is the chart that shows the daily number of registered cases. Clicking on the chart will set the playhead to the new position and stop playback, blivcking again will restart playback changeChart = { start; console.log('startingchart '); const chart = d3.select('.chart').remove(); const t = chart.transition().duration(speed); // initalize on first call if (!chart.g) { chart.g = d3 .select('.map') .append("g") .attr('class', 'chart'); chart.rect = chart.g .append('rect') .attr('class', 'rect') .attr('x', chartX) .attr('y', height - 400) .attr('height', 300) .attr('width', chartWidth - chartX - 50) .style('fill', 'rgba(0,0,0,0)'); chart.lines = chart.g.append('g').classed('lines', true); chart.xAxis = chart.g .append("g") .classed("axis axis-x", true) .attr('font-size', '5px'); chart.yAxis = chart.g.append("g").classed("axis axis-y", true); chart.legend = chart.g .append("g") .classed("legend", true) .attr('transform', `translate(${chartX}, ${height - 80})`); chart.tooltip = chart.g.append('g').classed('tooltip', true); // add X axis chart.xAxis.call(xAxis); } // add y axis chart.yAxis.call(yAxis, yScale); const tooltip = chart.tooltip.append('g').attr('class', 'guide'); tooltip .append('line') .attr('stroke', '#ddd') .style('stroke-opacity', 0.2) .attr('stroke-width', 10) .attr('x1', chartX + 4) .attr('x2', chartX + 4) .attr('y1', height - 350) .attr('y2', height - 100); tooltip .append('line') .attr('stroke', '#333') .attr('stroke-width', 0.2) .attr('x1', chartX) .attr('x2', chartX) .attr('y1', height - 350) .attr('y2', height - 100); tooltip .append('line') .attr('stroke', '#333') .attr('stroke-width', 0.2) .attr('x1', chartX + 8) .attr('x2', chartX + 8) .attr('y1', height - 350) .attr('y2', height - 100); chart.lines.selectAll('path').remove(); chart.lines .append("g") .attr("fill", "none") .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .selectAll("path") .data(series) .join("path") .attr("stroke", '#4e79a7') .attr("d", d => changeLine(d.values)); // style axis and tick lines chart.yAxis .selectAll('.tick') .selectAll('line') .style('opacity', 0.25) .attr('stroke', '#ddd') .attr('fill', '#333'); chart.yAxis .selectAll('.tick') .selectAll('text') .attr('font-size', `${normalTextSize}px`) .attr('fill', '#333'); chart.xAxis .selectAll('.tick') .selectAll('line') .style('opacity', 0.25) .attr('stroke', '#ddd') .attr('fill', '#333'); chart.xAxis .selectAll('.tick') .selectAll('text') .attr('font-size', `${normalTextSize}px`) .attr('fill', '#333'); chart.xAxis .selectAll('.domain') .transition(t) .style('opacity', 0); chart.yAxis .selectAll('.domain') .transition(t) .style('opacity', 0); // legend chart.legend .append('line') .attr('stroke', '#4e79a7') .style('stroke-opacity', 1) .attr('stroke-width', 2) .attr('x1', 0) .attr('x2', 100) .attr('class', 'legend-line') .attr('y1', 17) .attr('y2', 17); chart.legend .append('g') .attr('transform', 'translate(110,20)') .append('text') .attr('font-size', `${normalTextSize}px`) .attr('fill', '#333') .text('Cantidad de nuevos casos diarios confirmados'); // tooltip chart.rect.on("click", function() { const xpos = d3.mouse(this)[0] - chartX; const width = this.getBBox().width; const widths = width / dates.length; mutable startIndex = Math.min(Math.round(xpos / widths), dates.length); mutable stop = !mutable stop; }); return chart; }48:T61f,inputData = { const files = [ 'https://raw.githubusercontent.com/CSSEGISandData/COVID-19/master/csse_covid_19_data/csse_covid_19_time_series/time_series_covid19_confirmed_global.csv', 'https://raw.githubusercontent.com/CSSEGISandData/COVID-19/master/csse_covid_19_data/csse_covid_19_time_series/time_series_covid19_deaths_global.csv' ]; // load all data (3 different raw csv files) const input = await Promise.all(files.map(url => d3.csv(url, d3.autoType))); const outputData = []; // load data segments matching the 3 files const segments = ['confirmed', 'deaths']; const output = input.forEach((array, i) => { array.forEach((obj, j) => { const state = obj['Province/State'] || obj['Country/Region']; const pos = [obj.Long, obj.Lat]; const country = obj['Country/Region']; // delete unused keys delete obj['Province/State']; delete obj['Country/Region']; delete obj.Lat; delete obj.Long; // if it is the first segment, create the original object // if (state !== 'Hubei') { Object.entries(obj).forEach(([key, value]) => { const index = outputData.findIndex( d => d.date === key && d.state === state ); if (index < 0) { const o = { state, pos, country, date: key }; o[segments[i]] = value; outputData.push(o); } else { outputData[index][segments[i]] = value; } }); // } }); }); return outputData; }49: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`)4a:[{"id":"254a99fef9cfdc739794cf276a25ffce226b9d17d64789497bbed4935f1fda7d621149894d3a06e546f0e5c53beda2580db0166433ff2fac65397af1aa3627ea","href":"https://static.observableusercontent.com/files/254a99fef9cfdc739794cf276a25ffce226b9d17d64789497bbed4935f1fda7d621149894d3a06e546f0e5c53beda2580db0166433ff2fac65397af1aa3627ea","name":"countries-50m.json","type":"application/json","lastModified":1583008157865.894,"size":756420}] 43:{"id":"a5c2cb9d21270246","slug":"map-and-timeline-of-corona-outbreak-la-roja-version","title":"Map and timeline of Corona outbreak (\"La Roja\" version)","thumbnail":"f0c84b71b44dcd3d8ec7d1cea0e4ff75ece0bd5740ed6d7b5f5ff8737d9a3a97","access_level":"public","create_time":"$D2020-02-29T20:29:17.865Z","update_time":"$D2020-12-22T09:15:25.278Z","view_time":null,"first_public_time":"$D2020-03-01T09:37:31.383Z","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":0,"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":3363,"publish_version":3363,"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":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Map and timeline of Corona outbreak (\"La Roja\" version)","cells":[{"id":0,"value":"md`# Map and timeline of Corona outbreak (\"La Roja\" version)\nThis is just an adaptation in spanish language from a wonderful develop by Kartoteket (Denmark, see fork reference).\n\nNOTE: As of 23.03.2020, JHU is no longer providing information on recovered cases. Since they considered this information on county level no longer reliable, they decided to do so. Accordingly, this information is no longer offered on this tool.\n\nDataSource: [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":2351,"value":"viewof replay = html`