31:T64c,chart_3 = { const plot = d3.create('svg') .attr('width', width_1 + margin.left + margin.right) .attr('height', ((heightBar + margin.between) * (data.length + 4)) + margin.top + margin.bottom) .style('background-color', '#f2f2f2'); const serie = plot.selectAll(".country") .data(data) .enter() .append('g') .attr("class", "country") .attr('transform', (d, i) => `translate(${margin.left}, ${margin.top + i * (heightBar + margin.between * 2)})`); const country = serie.selectAll(".one_country") .data(d => d.values.filter(d => d.roll_avg > 0)) .enter(); serie.append('text') .attr("class", "one_country") .text(d => d.key) .attr('x', 0) .attr('y', heightBar) .style('fill', '#222'); serie.append('rect') .attr("class", "one_country") .attr('x', start) .attr('y', 0) .attr('width', width_1 - end) .attr('height', heightBar) .style('fill', '#f2f2f2'); serie .selectAll('.day') .data(all_days) .enter() .append("rect") .attr("class", "day") .attr("fill" , '#e4e4e4') .attr("stroke", "#fff") .attr("stroke-width", 0.5) .attr("x", (d,i) => scale_X(d.date)) .attr("height", heightBar) .attr("y", 0) .attr("width", width_bar); country .append("rect") .attr("class", "one_country") .attr("fill" , d => scaleColorBand(d.roll_avg)) .attr("stroke", "#fff") .attr("stroke-width", 0.5) .attr("x", (d,i) => scale_X(d.date)) .attr("height", heightBar) .attr("y", 0) .attr("width" , width_bar); return plot.node(); }32:T5cd,chart = { const plot = d3.create('svg') .attr('width', width_1 + margin.left + margin.right) .attr('height', height_1 + margin.top + margin.bottom) .style('background-color', '#f2f2f2'); const serie = plot.selectAll(".country") .data(data) .enter() .append('g') .attr("class", "country") .attr('transform', (d, i) => `translate(${margin.left}, ${margin.top + i * (sub_height + margin.between)})`); const country = serie.selectAll(".one_country") .data(d => d.values) .enter(); serie.append('text') .attr("class", "one_country") .text(d => d.key) .attr('x', 0) .attr('y', sub_height) .style('fill', '#222'); serie.append('rect') .attr("class", "one_country") .attr('x', start) .attr('y', 0) .attr('width', width_1 - end) .attr('height', sub_height) .style('fill', '#f2f2f2'); country .append("rect") .attr("class", "one_country") .attr("fill" , '#990000') .attr("stroke", "none") .attr("x", (d,i) => scale_X(new Date(d.date))) .attr("height", d => scale_height(d.roll_avg)) .attr("y", d => sub_height - scale_height(d.roll_avg)) .attr("width" , (end - start) / nested_countries[0].values.length - 1); serie .append('line') .attr("class", "one_country") .attr('x1', start) .attr('y1', sub_height) .attr('x2', end) .attr('y2', sub_height) .style('stroke', '#222'); return plot.node(); }33:T522,chart_2 = { const plot = d3.create('svg') .attr('width', width_1 + margin.left + margin.right) .attr('height', height_1 + margin.top + margin.bottom) .style('background-color', '#f2f2f2'); const serie = plot.selectAll(".country") .data(data) .enter() .append('g') .attr("class", d => `country ${d.key}`) .attr('transform', (d, i) => `translate(${margin.left}, ${margin.top + i * (sub_height + margin.between)})`); serie.append('text') .attr("class", "one_country") .text(d => d.key) .attr('x', 0) .attr('y', sub_height - margin.between) .style('fill', '#222'); serie.append('rect') .attr("class", "one_country") .attr('x', width_1 / 2) .attr('y', 0) .attr('width', width_1 - end) .attr('height', sub_height - margin.between) .style('fill', '#f2f2f2'); serie .append('line') .attr("class", "one_country") .attr('x1', start) .attr('y1', scale_Y(0.01)) .attr('x2', end) .attr('y2', scale_Y(0.01)) .style('stroke', '#222'); serie .append('path') .attr("class", "one_country") .attr('d', d => { return line(d.values); }) .style('fill', 'none') .style('stroke-width', 2) .style('stroke', '#990000'); return plot.node(); }34:[{"id":"e6e0c78e38b710bf38a99a3bebcbc02103a277ec01bd1d5d7e2ff518d41eff570825c4d5ef362e991f52a0d891184ea7432baefc27859789c37133c7579304fa","href":"https://static.observableusercontent.com/files/e6e0c78e38b710bf38a99a3bebcbc02103a277ec01bd1d5d7e2ff518d41eff570825c4d5ef362e991f52a0d891184ea7432baefc27859789c37133c7579304fa","name":"countries_coronavirus_top_10@1.csv","type":"text/csv","lastModified":1584376774085.223,"size":2178},{"id":"d092259754ef635f6ff10eb6335e7754e7c7ee11026c17f8ecd436bece67bd91ab61b3e5dd8f0411f56b097cffd9a5b9a099513be3179d092957d05cf175a820","href":"https://static.observableusercontent.com/files/d092259754ef635f6ff10eb6335e7754e7c7ee11026c17f8ecd436bece67bd91ab61b3e5dd8f0411f56b097cffd9a5b9a099513be3179d092957d05cf175a820","name":"daily_world_coronavirus_cases.csv","type":"text/csv","lastModified":1585230515968.203,"size":81423}] 2f:{"title":"Prototypes - New cases of Coronavirus","cells":[{"id":0,"value":"md`# Prototypes - New cases of Coronavirus`","pinned":false,"hidden":false,"mode":"ojs"},{"id":753,"value":"md`Prototypes done for BBC News with Johns Hopkins University data from 03-12-20, https://coronavirus.jhu.edu/map.html`","pinned":false,"hidden":false,"mode":"ojs"},{"id":892,"value":"md`Final design in https://www.bbc.com/news/world-51235105?app=news.world.story.51235105.page`","pinned":false,"hidden":false,"mode":"ojs"},{"id":509,"value":"md`## Matrix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":539,"value":"md`Evolution of number of cases, colour represents new cases`","pinned":false,"hidden":false,"mode":"ojs"},{"id":512,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":291,"value":"md`## Mini BarChart`","pinned":false,"hidden":false,"mode":"ojs"},{"id":325,"value":"md`It uses a logarithmic scale to draw the bars. A moving average has been used to represent new cases per day`","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":497,"value":"md`## Sparkling line`","pinned":false,"hidden":false,"mode":"ojs"},{"id":501,"value":"md`It uses a logarithmic scale to draw the lines. A moving average has been used to represent new cases per day`","pinned":false,"hidden":false,"mode":"ojs"},{"id":297,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":565,"value":"md`## Plotting the SVG`","pinned":false,"hidden":false,"mode":"ojs"},{"id":800,"value":"md`### Constructor`","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"width_1 = 600;","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"height_1 = 600 - margin.bottom - margin.top;","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"margin = ({top: 20, right: 5, bottom: 5, left: 20, between: 10})","pinned":false,"hidden":false,"mode":"ojs"},{"id":568,"value":"md`**sub_height** is the height of the multiple (of the group for the country, and the height of the line chart and bar chart), while **height_bar** is the height of the rectangle in the matrix.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":116,"value":"sub_height = (height_1 / 10) - margin.between;","pinned":false,"hidden":false,"mode":"ojs"},{"id":514,"value":"heightBar = 15;","pinned":false,"hidden":false,"mode":"ojs"},{"id":807,"value":"md`### Scales Y`","pinned":false,"hidden":false,"mode":"ojs"},{"id":573,"value":"md`The height of the barcharts, or the Y position of the linecharts, depend on a logarithmic scale **scale_height** where the extent is [1, max_value_data]`","pinned":false,"hidden":false,"mode":"ojs"},{"id":119,"value":"scale_height = d3.scaleLog().domain([1, value_domain[1]]).range([0, sub_height - margin.between]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":608,"value":"md`The **scale_Y** used for the line chart is the same, however lines are drawn differently than rectangles. That's why it needs a different calculation`","pinned":false,"hidden":false,"mode":"ojs"},{"id":315,"value":"scale_Y = d3.scaleLog().domain([0.01, value_domain[1]]).range([sub_height - margin.between, 0]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":813,"value":"md`### Scales X`","pinned":false,"hidden":false,"mode":"ojs"},{"id":580,"value":"md`**start** is the starting point of the graphic (0), while **end** is the ending point. The distance between these two points and the number of dates per country indicate the width of the bars`","pinned":false,"hidden":false,"mode":"ojs"},{"id":448,"value":"start = width_1 / 2","pinned":false,"hidden":false,"mode":"ojs"},{"id":451,"value":"end = start + width_1 / 4","pinned":false,"hidden":false,"mode":"ojs"},{"id":488,"value":"width_bar = (end - start) / all_days.length","pinned":false,"hidden":false,"mode":"ojs"},{"id":588,"value":"md`The x position is calculated with a time scale. In the barchart, the width of the individual bar is included in the calculation **scale_X**.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"scale_X = d3.scaleTime().domain(time_domain).range([start, end - width_bar]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":493,"value":"scale_X_2 = d3.scaleTime().domain(time_domain).range([start, end]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":816,"value":"md`### Scales Colours - Matrix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":623,"value":"md`**scaleColorBand** is a function that provides four specific colours using the following breaks: 0, 1, 10, 100, 1000, 5000`","pinned":false,"hidden":false,"mode":"ojs"},{"id":532,"value":"function scaleColorBand(value) {\n if (value === 0) {\n return '#e4e4e4'\n } else if (value > 0 && value <= 10) {\n return '#ffda64'\n } else if (value > 10 && value <= 100) {\n return '#faab18'\n } else if (value > 100 && value <= 1000) {\n return '#d46666'\n } else if (value > 1000 && value <= 5000) {\n return '#990000'\n } else {\n return '#222222'\n }\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":823,"value":"md`### Other functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":826,"value":"md`**axisX** is the function that draws the X axis`","pinned":false,"hidden":false,"mode":"ojs"},{"id":103,"value":"axisX = d3.axisBottom()\n .scale(scale_X)\n .tickPadding(5);","pinned":false,"hidden":false,"mode":"ojs"},{"id":614,"value":"md`**line** is the function that draws the sparkling line. It only draws values above 0`","pinned":false,"hidden":false,"mode":"ojs"},{"id":304,"value":"line = d3.line()\n .x(d => scale_X_2(d.date))\n .y(d => {\n let value = d.roll_avg;\n \n if (value <= 0) {\n value = 1;\n }\n return scale_Y(value)\n })\n// .curve(d3.curveStepAfter())","pinned":false,"hidden":false,"mode":"ojs"},{"id":766,"value":"md`## Structure data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":559,"value":"md`Calculate the time extent and the min and the maximum values of the data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"time_domain = d3.extent(csv, d => d.date);","pinned":false,"hidden":false,"mode":"ojs"},{"id":849,"value":"all_days = allDays();","pinned":true,"hidden":false,"mode":"ojs"},{"id":850,"value":"function allDays() {\n const all_days = [];\n const oneDay = 1000 * 3600 * 24;\n for (var t = time_domain[0].getTime(); t < time_domain[1].getTime() + oneDay; t = t + oneDay) {\n all_days.push({\n date: new Date(t),\n })\n }\n return all_days;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":122,"value":"value_domain = [0, d3.max(csv, d => d.cases)]","pinned":false,"hidden":false,"mode":"ojs"},{"id":556,"value":"md`Group the entries by country`","pinned":false,"hidden":false,"mode":"ojs"},{"id":110,"value":"nested_countries = d3.nest()\n .key(d => d.country)\n .entries(csv);","pinned":false,"hidden":false,"mode":"ojs"},{"id":711,"value":"md`Function to calculate moving average`","pinned":false,"hidden":false,"mode":"ojs"},{"id":714,"value":"nDays = 3","pinned":false,"hidden":false,"mode":"ojs"},{"id":717,"value":"function rollingAvg() {\n const thisData = nested_countries;\n thisData.forEach(country => {\n for (var i = 0; i < (country.values).length; i++) {\n if (i < nDays) {\n country.values[i].roll_avg = country.values[i].cases\n } else {\n // filter points to calculate roll average\n const theseValues = (country.values).filter((d,f) => f <= i && f > i - nDays);\n const meanValue = d3.mean(theseValues, d => d.cases);\n country.values[i].roll_avg = +meanValue.toFixed(2);\n }\n }\n })\n return thisData;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":779,"value":"md`Plot only the first 10 countries for the prototype, sum total values to select those with more cases (at that time), and calculate rolling averages`","pinned":false,"hidden":false,"mode":"ojs"},{"id":675,"value":"data = checkTotal();","pinned":true,"hidden":false,"mode":"ojs"},{"id":668,"value":"function checkTotal() {\n const data = rollingAvg();\n data.forEach(d => {\n d.total = d3.sum(d.values, e => e.cases);\n })\n data.sort((a, b) => b.total - a.total);\n const data_10 = data.filter((d, i) => i < 10)\n return data_10\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":550,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":544,"value":"md`Import data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"csv = d3.csvParse(await FileAttachment(\"daily_world_coronavirus_cases.csv\").text(), d3.autoType)","pinned":false,"hidden":false,"mode":"ojs"},{"id":757,"value":"md`## JavaScript libraries`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"md`Import D3.js`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}