31:Ta07,chart = { // const width = maxWidth; const svg = d3.create("svg") .attr("viewBox", [0, 0, maxWidth, height]) .attr("width", maxWidth) .attr("height", height) .style("overflow", "visible") .style("font-family", "sans-serif") .style("margin", "10px 0px"); svg.append("g").attr("class", "lines"); svg.append("g").attr("class", "labels").style("pointer-events", "none"); const dot = svg.append("g") .attr("display", "none") .style("pointer-events", "none") .attr("id", "dot"); dot.append("circle") .attr("r", 3.5); dot.append("text") .style("font", "10px sans-serif") .attr("text-anchor", "middle") .style("pointer-events", "none") .attr("y", -8); svg.append("g").attr("class", "x--axis") .attr("transform", `translate(0,${height - margin.bottom})`); svg.append("text") .attr("class", "x--axis--label") .style("pointer-events", "none") .text(xLabel) .attr("text-anchor", "start") // .attr("font-weight", "bold") .style("text-anchor", "end") .attr("x", maxWidth - margin.right ) .attr("y", height+7 ); svg.append("g").attr("class", "y--axis") .attr("transform", `translate(${margin.left},0)`); svg.append("text") .attr("class", "y--axis--label") .style("pointer-events", "none") .text(yLabel) .attr("text-anchor", "start") // .attr("font-weight", "bold") .style("text-anchor", "start") .attr("x", 5 ) .attr("y", 10 ); svg.append("g") .append("text") .attr("transform", `translate(${margin.left+10}, ${margin.top+70})`) .style("pointer-events", "none") .attr("class", "daysPassed") .style("font-size", "48pt") .style("fill", "#333") .style("opacity", 0.3) .text(""); const resEle = html`
${header} ${viewof animDate} ${viewof focusName} ${viewof useLinearScale} ${svg.node()}

${footer}
John Alexis Guerra Gómez @duto_guerra @guerravis
https://johnguerra.co/coronavirus

`; return resEle; }32:Tcd1,updateChart = (selection, data) => { const svg = selection.select("svg"); svg.select(".x--axis") .call(xAxis); // ---------- Path ------------- const path = svg.select(".lines") .attr("fill", "none") .attr("stroke-width", 3.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .selectAll("path") .data(data.series, d => d.name) .join("path") .style("opacity", d => d.name===focusName ? 1 : 0.3) // .style("-webkit-filter", "drop-shadow( 1px 1px 1px rgba(0, 0, 0, .3))") // .style("filter", "drop-shadow( 1px 1px 1px rgba(0, 0, 0, .3))") .attr("stroke", d => color(d.name)); path.filter(d => d.name ===focusName) .raise(); // ------------- Label --------------- const label = svg.select("g.labels") .style("font-size", "12pt") .style("font-family", "sans-serif") .selectAll(".dataLabel") .data(data.series .filter(d => d.values.length) .sort((a,b ) => a.name === focusName ? -1 : b.name === focusName ? 1 : d3.descending(a.values[a.values.length-1], b.values[b.values.length-1]) ) .slice(0, MAX_LABELS), d => d.name) .join((enter)=> { const text = enter .append("text") .attr("class", "dataLabel") .style("opacity", 0) .attr("transform", d => `translate(${x(data.dates[d.values.length-1])}, ${y(d.values[d.values.length-1])})`); text.append("tspan") .attr("y", 0) .attr("x", 10) .text(d => d.name); text.append("tspan") .attr("y", 15) .attr("x", 10) .attr("class", "count") .text(d => format(d.values[d.values.length-1])); return text; }) .attr("class", "dataLabel") .attr("fill", "black") .style("opacity", d => d.name===focusName ? 1 : 0.5); svg.call(hover, path, label); // Transitions const transitionFull = d3.transition().duration(delay); const transition1 = d3.transition().duration(delay/2) .end().then(() => { const transition2 = d3.transition().duration(delay/2) y.domain([0, d3.max(data.series, d => d3.max(d.values))+1]).nice(); svg.select(".y--axis") .transition(transition2) .call(yAxis); path.transition(transition2) .attr("d", d => line(d.values)); label .transition(transition2) .attr("transform", d => `translate(${x(data.dates[d.values.length-1])}, ${y(d.values[d.values.length-1])})`); }); path.transition(transition1) .attr("d", d => line(d.values)) label .transition(transition1) .attr("transform", d => `translate(${x(data.dates[d.values.length-1])}, ${y(d.values[d.values.length-1])})`); label .transition(transitionFull) .select("tspan.count") .textTween(function(d) { const i = d3.interpolate(this._current, format(d.values[d.values.length-1])); return function(t) { return this._current = format(i(t)); } }); svg.select(".daysPassed") .text(`${animDate}`); return svg.node(); }33:T817, function hover(svg, path, label) { if ("ontouchstart" in document) svg .style("-webkit-tap-highlight-color", "transparent") .on("touchmove", moved) .on("touchstart", entered) .on("touchend", left) else svg .on("mousemove", moved) .on("mouseenter", entered) .on("mouseleave", left); const dot = svg.select("#dot") .attr("display", "none"); function moved() { d3.event.preventDefault(); const ym = y.invert(d3.event.offsetY); const xm = x.invert(d3.event.offsetX); const i1 = d3.bisectLeft(data.dates, xm, 1); const i0 = i1 - 1; const i = xm - data.dates[i0] > data.dates[i1] - xm ? i1 : i0; let s = data.series .filter(d => d.values.length>i) .reduce((a, b) => (Math.abs(a.values[i] - ym) > Math.abs(b.values[i] - ym)) ? b : a ); path.attr("stroke", d => d === s || d.name===focusName ? color(d.name) : "#ccc" ).style("opacity", d => d.name === focusName ? 1 : d === s ? 0.9 : 0.3) .filter(d => d === s) .raise(); label.style("opacity", d => d === s ? 1.0 : d.name === focusName ? 0.7 : 0.1) .filter(d => d === s).raise(); dot.attr("transform", `translate(${x(data.dates[i])},${y(s.values[i])})`); dot.select("text").text(`${s.name}: ${s.values[i]}` ); } function entered() { path // .style("mix-blend-mode", null) .attr("stroke", "#ccc"); dot.attr("display", null); } function left() { console.log("left"); path // .style("mix-blend-mode", "multiply") .style("opacity", d => d.name === focusName ? 1 : 0.3) .attr("stroke", d => color(d.name)); dot.attr("display", "none"); label.style("opacity", d => d.name===focusName ? 1 : 0.3) } } 34:T499,rawData = { const confirmedPromise = d3.csv("https://raw.githubusercontent.com/CSSEGISandData/COVID-19/master/csse_covid_19_data/csse_covid_19_time_series/time_series_covid19_confirmed_global.csv"); const continentsPromise = FileAttachment("country-and-continent-codes-list-csv.csv") .text().then(d3.csvParse); return Promise.all([confirmedPromise, continentsPromise]) .then(([confirmedData, continentsData]) => { // US has different names in both datasets continentsData .forEach(row => row.Country_Name = (row.Country_Name === "United States of America") ? "US" : row.Country_Name ); // Add continents data confirmedData.forEach((row) => { row.Continent = null; for (let country of continentsData) { if (country.Country_Name.indexOf(row["Country/Region"])!==-1) { row.Continent = country.Continent_Name; break; } } }); const columns = confirmedData.columns; const filtered = confirmedData.filter(rowFilter); filtered.columns = columns; return filtered; }) }35:[{"id":"d36219d299ba044a85590c4a49abea31e9791c30e0f5704064972a7dad0fdaecef4ee3c5143ddfbaffabd8f30a6a4951ef49883452243a52163b6db38f1d8440","href":"https://static.observableusercontent.com/files/d36219d299ba044a85590c4a49abea31e9791c30e0f5704064972a7dad0fdaecef4ee3c5143ddfbaffabd8f30a6a4951ef49883452243a52163b6db38f1d8440","name":"country-and-continent-codes-list-csv.csv","type":"text/csv","lastModified":1584370136394.058,"size":12344}] 2f:{"title":"Coronavirus Latinoamérica","cells":[{"id":1030,"value":"md`# Coronavirus Latinoamérica\n`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1094,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":1413,"value":"updateChart(d3.select(chart), data);","pinned":true,"hidden":false,"mode":"ojs"},{"id":1387,"value":"chartByDate = chart","pinned":true,"hidden":false,"mode":"ojs"},{"id":1119,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":1379,"value":"header = html`

Evolución del Coronarivus en Latinoamérica

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":1383,"value":"footer = html`Según datos de John Hopkins University hasta ${dates[dates.length-1]}.`","pinned":true,"hidden":false,"mode":"ojs"},{"id":1242,"value":"format = d3.format(\"d\");","pinned":true,"hidden":false,"mode":"ojs"},{"id":1278,"value":"x = d3.scaleLinear()\n .domain(d3.extent(data.dates))\n .range([margin.left, maxWidth - margin.right]);\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":1147,"value":"y ={ \n const y = useLinearScale ? \n d3.scaleLinear() : \n d3.scalePow()\n .exponent(0.5);\n return y\n .domain([0,10])\n .range([height - margin.bottom, margin.top]);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1287,"value":"xAxis = g => g\n .call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1289,"value":"yAxis = g => g\n .call(d3.axisLeft(y).tickFormat(d3.format(\"d\")))\n // .call(g => g.select(\".domain\").remove());\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":1433,"value":"yLabel = \"Casos confirmados\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1436,"value":"xLabel = \"Días desde el primer caso\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1291,"value":"line = d3.line()\n .defined(d => !isNaN(d))\n .x((d, i) => x(data.dates[i]))\n .y(d => y(d));\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":1293,"value":"color = (d) => d===focusName ? \"steelblue\" : \"#ddd\";\n // const color = d3.scaleOrdinal(d3.schemeCategory10);\n // .range(d3.range(0, data.series.length).map(i => d3.interpolateRainbow(i/data.series.length)));\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":1286,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":44,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":1057,"value":"maxWidth = Math.min(800, width)","pinned":true,"hidden":false,"mode":"ojs"},{"id":48,"value":"margin = ({top: 20, right: 100, bottom: 30, left: 30})","pinned":false,"hidden":false,"mode":"ojs"},{"id":354,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":1230,"value":"rowFilter = (row) => {\n return (row.Continent===\"South America\" || row.Continent===\"North America\" \n && row[\"Country/Region\"]!==\"US\" && row[\"Country/Region\"]!==\"Canada\");\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":376,"value":"dates = rawData.columns.slice(4, rawData.columns.length+1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":379,"value":"// Aggregate data by country\nnestedData = d3.nest()\n .key(d => d[\"Country/Region\"])\n .rollup(v => ({ values : v, \n sumsByDate:\n dates.map(c => \n ({ date: d3.utcParse(\"%m/%d/%y\")(c), \n sum : v.map(d =>\n +d[c]).reduce((p,n) => p+n)\n })\n )\n }))\n .entries(rawData);\n\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":373,"value":"dateFirstCase = {\n const firstCases = new Map();\n \n\n for (let d of nestedData) {\n \n let minDateI = 0;\n for (let i = 0; \n i < d.value.sumsByDate.length && d.value.sumsByDate[i].sum <= ALIGN_CASES;\n i+=1\n ) {\n minDateI = i;\n }\n // console.log(d.key, d.value.sumsByDate, minDateI);\n \n const firstDate = d.value.sumsByDate[minDateI].date ;\n firstCases.set(d.key, {\n i: minDateI, \n firstDate\n });\n \n }\n \n \n return firstCases;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":435,"value":"nestedDataFirstCase = nestedData.map(k => {\n k.value.sumsByDate = k.value.sumsByDate.map((s,i, sumsByDate) => {\n s.daysSinceFirstCase = (s.date - dateFirstCase.get(k.key).firstDate)/(1000*24*3600); \n s.diff = (i > 0 && sumsByDate[i-1].sum > 0) ? \n (s.sum - sumsByDate[i-1].sum)/sumsByDate[i-1].sum : 0;\n return s;\n });\n \n return k;\n});","pinned":true,"hidden":false,"mode":"ojs"},{"id":415,"value":"data = {\n const animDateParsed = d3.utcParse(\"%m/%d/%y\")(animDate);\n const filteredData = nestedDataFirstCase.map(d => {\n return {\n ...d,\n value:{\n ...d.value, \n sumsByDate: d.value.sumsByDate.filter(d => d.date <= animDateParsed),\n filteredLength: d.value.sumsByDate.filter(d => d.date <= animDateParsed).length\n }\n };\n });\n \n return {\n y: \"Confirmed cases\",\n series: filteredData.map(d => ({\n name: d.key.replace(/, ([\\w-]+).*/, \" $1\"),\n values: d.value.sumsByDate\n .map(s => s.sum)\n .filter(d => d > 0),\n filteredLength: d.value.filteredLength\n })),\n dates: d3.range(0, d3.max(nestedDataFirstCase, d => d3.max(d.value.sumsByDate, e => e.daysSinceFirstCase))) \n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":659,"value":"ALIGN_CASES=0","pinned":true,"hidden":false,"mode":"ojs"},{"id":879,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":1441,"value":"a = dateFirstCase.values()","pinned":true,"hidden":false,"mode":"ojs"},{"id":588,"value":"viewof animDate = Scrubber(dates.slice(d3.min(Array.from(dateFirstCase.values()), d => d.i)), {delay:delay*1.2, loop: false})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1429,"value":"countryToFocus = \"Colombia\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":990,"value":"viewof focusName = select({\n title: \"País a comparar\",\n options: nestedData.map(d => d.key),\n value: countryToFocus\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1478,"value":"viewof useLinearScale = checkbox({\n options: [{label: \"Escala Lineal\", value:true}], \n value:[\"Escala Lineal\"]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1036,"value":"MAX_LABELS = 5","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"// d3 = require(\"d3@5\", \"d3-interpolate-path\")\nd3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":483,"value":"navio = require(\"navio\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":585,"value":"delay = 200","pinned":true,"hidden":false,"mode":"ojs"},{"id":582,"value":"import {Scrubber} from \"@mbostock/scrubber\"\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":1009,"value":"import {select, checkbox} from \"@jashkenas/inputs\"\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":1082,"value":"import {vl} from '@vega/vega-lite-api'\n","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}