29:null 2a:["$","title",null,{"children":"COVID-19 nas cidades no Brasil | Bernardo Ferrari | Observable"}] 2f:T4cb,overall = { const container = d3.select(html`

`) .style('font-family', 'sans-serif') .style('width', `${width}px`) .style('text-align', 'center') const confirmedCases = {value: d3.sum(confirmedByCountryLatestForTable, d => d.confirmed), label: 'casos confirmados', key:'confirmed'}; const newCases = {value: d3.sum(confirmedByCountryLatestForTable, d => d.new), label: 'novos casos confirmados', key:'new'}; const deathsCases = {value: d3.sum(confirmedByCountryLatestForTable, d => d.deaths), label: 'mortes', key:'deaths'}; const date = confirmedByCountryLatestForTable[0].date; const board = container.selectAll('div') .data([confirmedCases, deathsCases, newCases]) .join('div') .style('width', '100px') .style('padding', '0 1em') .style('line-height', 1.2) .style('font-size', '.9em') .style('color', '#808080') .style('display', 'inline-block') .style('text-align', 'center') .style('vertical-align','top') // .style('border-right','1px dotted #BDBDBD') .html(d => { return `${number(d.value)}
${d.label}` }) return container.node(); }30:T981,table = { const rows = Math.ceil(width / 240), padding = width * .01; const tileSize = 100/rows - 3; const chartWidth = width * (tileSize/100) const chartHeight = chartWidth * .25; const container = d3.select(html`

`) .style('font-family', 'sans-serif'); const facets = container.selectAll('div') .data(dataFacets.show) .join('div') .style('width', `${tileSize}%`) .style('display', 'inline-block') .style('background', '#f8f8f8') .style('margin', `0 ${padding}px ${padding}px 0`) .style('padding', `${padding * 2}px ${padding}px ${padding}px ${padding}px`) facets.append('h4') .style('font-size', '.9em') .html(d => d[d.length - 1].city); facets.append('p') .style('font-size', '.8em') .style('color', '#808080') .style('margin-bottom', 0) .html(d => `${number(d[d.length - 1].confirmed)} confirmed cases` ); facets.append('p') .style('font-size', '.8em') .style('color', '#808080') .style('margin-bottom', 0) .html(d => `${number(d[d.length - 1].deaths)} deaths` ); const chartsTop = facets.append('svg') .attr("viewBox", [0, -1, chartWidth, 2 * chartHeight + padding * 2 + 1]); const chartsConf = chartsTop.append('g') const chartsDR = chartsTop.append('g') drawChart(chartsConf, 'confirmed', '#ff9500', chartWidth, 2 * chartHeight, padding); drawStack(chartsDR, chartWidth, 2 * chartHeight, padding); facets.append('p') .style('font-size', '.8em') .style('color', '#808080') .style('margin-bottom', 0) .html(d => `+${number(d[d.length - 1].new)} novos casos em ${new Date(d[d.length - 1].date).toLocaleDateString()}` ); const chartsNew = facets.append('svg') .attr("viewBox", [0, -1, chartWidth, chartHeight + padding * 2 + 1]); drawChart(chartsNew, 'new', '#808080', chartWidth, chartHeight, padding); facets.append('p') .style('font-size', '.7em') .style('color', '#999') .style('margin-bottom', 0) .style('line-height', 1.2) .html(d => `A linha cinza grossa mostra a média semanal dos casos diários` ); return container.node(); }31:T74a,confirmedRaw = d3.csv('https://brasil.io/dataset/covid19/caso?format=csv', d => (d.place_type === "city" && d.city_ibge_code != "") ? d : null) .then((dd) => { dd.forEach(function(d){ d.confirmed = +d.confirmed; d.deaths = +d.deaths; }); let data_with_holes = Array.from(d3.group(dd, d => d.date), ([key, value]) => value).sort((a,b) => a.date - b.date).reverse(); let mutableArray = [...data_with_holes].filter(function (el) { return el != null; }); for (let i = 1; i < data_with_holes.length; i++) { for (let j = 0; j < mutableArray[i - 1].length; j++) { let found = mutableArray[i].find(element => element.state === mutableArray[i - 1][j].state && element.city === mutableArray[i - 1][j].city); if (found !== undefined) { continue; } let newCase = {...data_with_holes[i - 1][j]}; newCase.date = data_with_holes[i][0].date; mutableArray[i].push(newCase); } } // // this can also be commented, transition will still be buggy // // now backtrack to fill the data with zeros // for (let i = data_with_holes.length - 2; i >= 0; i--) { // for (let j = 0; j < mutableArray[i + 1].length; j++) { // let found = mutableArray[i].find(element => element.state === mutableArray[i + 1][j].state && element.city === mutableArray[i + 1][j].city); // if (found !== undefined) { // continue; // } // let newCase = {...data_with_holes[i + 1][j]}; // newCase.confirmed = 0; // newCase.deaths = 0; // newCase.date = mutableArray[i][0].date; // mutableArray[i].push(newCase); // } // // trying to sort // mutableArray[i] = mutableArray[i].sort((a,b) => `${a.state}${a.city}`.localeCompare(`${b.state}${b.city}`)); // } return mutableArray; })32:T739,function drawChart(svg, data, color, w, h, padding) { yScale.range([h, 0]); xScale.range([0, w]) const area = d3.area() .x(d => xScale(date(d.date))) .y0(d => yScale(d[data])) .y1(h) .curve(d3.curveStepBefore) const line = d3.line() .x(d => xScale(date(d.date))) .y(d => yScale(d[data])) .curve(d3.curveStepBefore) const avg = d3.line() .x(d => xScale(date(d.date))) .y(d => yScale(d.weeklyAvg)) .curve(d3.curveCardinal) const xAxis = d3.axisBottom(xScale) .ticks(3); const g = svg.append('g') g.append('path') .attr('d', d => { yScale.domain([0, d3.max(d, d=> d[(data === 'new')? 'new':'confirmed'])]); return area(d) }) .attr('fill', color) .attr('fill-opacity', (data === 'new' || data === 'confirmed')?.2:1); g.append('path') .attr('d', d => { yScale.domain([0, d3.max(d, d=> d[(data === 'new')?'new':'confirmed'])]); return line(d) }) .attr('stroke', color) .attr('fill', 'none'); if(data === 'new') { g.append('path') .attr('d', d => { yScale.domain([0, d3.max(d, d=> d.new)]); return avg(d) }) .attr('stroke', '#505050') .attr('stroke-width', 2) .attr('fill', 'none'); } const xa = g.append("g") .call(xAxis) .attr('transform', `translate(${0},${h})`) xa.select(".domain").remove(); xa.selectAll(".tick text") .attr('fill', '#999'); xa.selectAll(".tick line") .attr('stroke', '#999'); // const ya = g.append("g") // .call(yAxis) // .attr('transform', `translate(10,${0})`) // ya.select(".domain").remove(); // ya.selectAll(".tick text") // .attr('fill', '#AAAAA0'); // ya.selectAll(".tick line") // .attr('stroke', '#f6f6f4') // .attr('stroke-opacity', .3); }33:[] 2d:{"id":"7698b9cee538be19","slug":"covid-19-nas-cidades-no-brasil","title":"COVID-19 nas cidades no Brasil","thumbnail":"6be2b9bfc840ae5ea9cabd9d31ce76a5944ea3840aafa41f2410177dc588bd5c","access_level":"public","create_time":"$D2020-04-11T18:14:37.591Z","update_time":"$D2020-04-15T15:02:35.850Z","view_time":null,"first_public_time":"$D2020-04-11T20:52:25.859Z","has_unpublished_edits":null,"fork":{"id":"467cdfcb5a57014e","slug":"covid-19-outbreak-in-maps-and-charts","title":"COVID-19 outbreak in maps and charts","owner":{"id":"f69d350b474cbc9b","login":"xaquingv","name":""}},"stars":0,"starred":false,"owner":{"type":"team","id":"7814627280fa5d96","login":"bernaferrari","name":"Bernardo Ferrari","avatar_url":"https://avatars-next.observableusercontent.com/a47270a556a531352d9f7d5c6dd4c0b979841902900733a4cfdbdd90cfca2798","tier":"starter_2024"},"version":2864,"publish_version":2864,"role":null,"authored":false,"authors":[{"type":"individual","id":"1502d5bea7ec80b6","login":"bernaferrari","name":"Bernardo Ferrari","avatar_url":"https://avatars-next.observableusercontent.com/a47270a556a531352d9f7d5c6dd4c0b979841902900733a4cfdbdd90cfca2798","tier":null}],"members":[{"type":"individual","id":"1502d5bea7ec80b6","login":"bernaferrari","name":"Bernardo Ferrari","avatar_url":"https://avatars-next.observableusercontent.com/a47270a556a531352d9f7d5c6dd4c0b979841902900733a4cfdbdd90cfca2798","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":7,"collection":null,"type":"notebook","body":{"title":"COVID-19 nas cidades no Brasil","cells":[{"id":0,"value":"md `# COVID-19 nas cidades no Brasil`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1377,"value":"md `Situação até ${(new Date(confirmedByCountryLatestForTable[0].date).toLocaleDateString())}.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1341,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":958,"value":"md `## Cada cidade está em um estágio diferente da epidemia\n\nYou can see that in the set of charts underneath. It shows the top countries by ${viewof order.bind(html``)}. Até ${(new Date(dataFacets.show[0][dataFacets.show[0].length - 1].date).toLocaleDateString())}, há **${dataFacets.show.length} cidades** com mais de ${number(viewThreshold)} ${order}.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2823,"value":"viewof selectedState = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2349,"value":"viewof viewThreshold = slider({\n min: 10/threshOrder(order), \n max: 250/threshOrder(order), \n step: 20/threshOrder(order),\n value: 10/threshOrder(order), \n format:v => `${number(v)} ${order}`,\n title: \"Showing cities with more than ...\" \n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":379,"value":"$30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1861,"value":"colors = d3.scaleOrdinal()\n .domain(['recovered','deaths','confirmed','new'])\n .range(['#25c45b', '#c9166a','#ff9500','#808080'])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":975,"value":"dataFacets = {\n const obj = {};\n \n obj.confirmed = allTimeseries\n .sort((a,b) => b[b.length - 1].confirmed - a[a.length - 1].confirmed)\n .filter(d => d[d.length - 1].confirmed > viewThreshold);\n \n obj.deaths = allTimeseries\n .sort((a,b) => b[b.length - 1].deaths - a[a.length - 1].deaths)\n .filter(d => d[d.length - 1].deaths > viewThreshold);\n \n obj.new = allTimeseries\n .sort((a,b) => b[b.length - 1].new - a[a.length - 1].new)\n .filter(d => d[d.length - 1].new > viewThreshold);\n \n if (order === 'confirmed cases') obj.show = obj.confirmed;\n else if (order === 'new daily cases') obj.show = obj.new;\n else if (order === 'deaths') obj.show = obj.deaths;\n else obj.show = obj.confirmed\n \n return obj;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":527,"value":"confirmedByCountryLatestForTable = confirmedByCountryTimeseries\n .map(d=> d[d.length - 1])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1671,"value":"stackedDeathsAndRecovered = confirmedByCountryTimeseries.map(d => d3.stack().keys(['deaths', 'deaths'])(d))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2059,"value":"startDateTimeseries = {\n const _allTimeseries = allTimeseries.map(d => d);\n const confirmedBigOnly = _allTimeseries.map(d => d.filter(d => d.confirmed > 10))\n const confirmedLongTime = confirmedBigOnly.filter(d => d.length > 1 && d[d.length - 1].confirmed > 100)\n return confirmedLongTime;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1782,"value":"allTimeseries = confirmedByCountryTimeseries.map(d => {\n const city = d[0].city\n d.stack = stackedDeathsAndRecovered.find(d => d[0][0].data.city === city)\n return d;\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2488,"value":"confirmedMovingAvg = confirmedByCountryTimeseries.map(d => movAvg(d, 'new'))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":397,"value":"confirmedByCountryTimeseries = {\n confirmedWithNew.flat()\n \n const byCountry = Array.from(d3.group(confirmedWithNew.flat(), d=> `${d.city}${d.state}`), ([key, value]) => value);\n \n let addNew = byCountry.map(d => d.map((dd,i) => {\n dd.new = (i > 0) ? dd.confirmed - d[i - 1].confirmed : 0;\n return dd;\n }))\n \n return addNew.map(d => d.sort((a,b) => a.date - b.date));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2305,"value":"confirmedUSLatest = {\n const data = Array.from(d3.group(confirmedRaw, d => d.date), ([key, value]) => value)\n .sort((a,b) => b.date - a.date)\n .reverse()\n \n const _data = data.filter((d,i) => i === data.length - 1).flat().sort((a,b) => b.confirmed - a.confirmed);\n \n return _data; \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1616,"value":"deathsLatest = confirmedRaw.map(d => d[d.length - 1]).sort((a,b) => b.deaths - a.deaths)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":241,"value":"confirmedLatest = confirmedRaw.map(d => d[d.length - 1]).sort((a,b) => b.confirmed - a.confirmed)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2039,"value":"confirmedWithNew = confirmedRaw.map(d => d.filter(dd => dd.state === selectedState))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"md `### Libraries and utility functions\nWe used **D3** for the data transformations and visualization, and **topojson** for all map-related operations.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"d3 = {\n const d3 = await require(\"d3-array@^2.2\", \"d3-shape@1\", \"d3-axis@1\", \"d3-format@1\", \"d3-random@1\", \"d3-scale@2\", \"d3-random@1\", \"d3-selection@1\", \"d3-fetch@1\", \"d3-brush\",\"d3-zoom\",\"d3-interpolate\", \"d3-transition@1\", \"d3-scale-chromatic@1\", \"d3-time-format\", \"d3-geo-projection@2\", \"d3-force@1\");\n d3.bin = d3.histogram;\n d3.area = d3.area;\n return d3;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1430,"value":"md `Everything else is maps, chart-drawing functions, scales, formats and lookup lists to keep country names consistent.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":959,"value":"viewof order = new View('confirmed cases')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2569,"value":"function movAvg(data, accessor, window = 7) {\n const tArray = [...new Array(Math.floor(data.length))];\n \n const means = tArray.map((d, i) => {\n const w = ((i + window < data.length)?window:data.length - i);\n const sums = d3.sum(data.slice(i,i+7), d => d[accessor]);\n const _d = data[i];\n _d.weeklyAvg = sums/w;\n return _d;\n })\n \n return means;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1680,"value":"function drawStack(svg, w, h, padding) {\n \n yScale.range([h, 0]);\n xScale.range([0, w]);\n \n const area = d3.area()\n .x(d => xScale(date(d.data.date)))\n .y0(d => yScale(d[0]))\n .y1(d => yScale(d[1]))\n .curve(d3.curveStepBefore)\n \n const g = svg.append('g')\n \n g.selectAll('path')\n .data(d => {\n yScale.domain([0, d3.max(d, dd=> dd.confirmed)])\n d.stack[0].y = yScale.domain()\n d.stack[1].y = yScale.domain()\n return d.stack;\n })\n .join('path')\n .attr('d', d => {\n yScale.domain(d.y)\n return area(d)\n })\n .attr('fill', ({key}) => colors(key))\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1013,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":380,"value":"yScale = d3.scaleLinear()\n .domain([0,d3.max(confirmedRaw.flat(),d => d.confirmed)])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":382,"value":"xScale = d3.scaleTime()\n .domain(d3.extent(confirmedWithNew.flat(), d => date(d.date)))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":391,"value":"number = d3.format(',.2~f')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":823,"value":"date = d3.utcParse(\"%Y-%m-%d\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2357,"value":"threshOrder = d3.scaleOrdinal()\n .domain(['confirmed cases','new daily cases','deaths'])\n .range([1,10,40])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2351,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":954,"value":"import {View} from \"@mbostock/synchronized-views\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 2e:"$2d:body"