31:T9df,p5(sketch => { let t = timeMin - speed; // create canvas sketch.setup = function() { sketch.createCanvas(width, height, sketch.WEBGL); sketch.ortho(); sketch.background(sky); sketch.frameRate(30); }; sketch.draw = function() { // Webgl translates to draw from center sketch.translate(- width / 2, - height / 2, 0); // console.log(sketch.mouseX, sketch.mouseY); // re-start drawing sketch.background(sky); // checkMargins(sketch); // go through every country for (let r = 0; r < dataByRegion.length; r++) { const thisCountry = dataByRegion[r].values; dataByRegion[r].wind = dataByRegion[r].wind + randomIntFromInterval(-0.25, 0.25); if (dataByRegion[r].wind > 5) { dataByRegion[r].wind = 5; } else if (dataByRegion[r].wind < -5) { dataByRegion[r].wind = -5; } // get only values older than current date const dataDraw = thisCountry.filter(d => { const time = new Date(d.Date).getTime(); return time <= t && +d.cumulative_cases > 0 }); // calculate the lenght of the tail const maxCases = Math.max(...dataDraw.map(d => +d.cumulative_cases)); const lengthBranch = scaleMainBranch(maxCases); const translate_x = scaleX(dataByRegion[r].sort_X); const translate_y = scaleY(dataByRegion[r].sort_Y); const translate_z = scaleZ(dataByRegion[r].total) const wind = dataByRegion[r].wind; let mouse_distance = 0; // the mouse is inside the canvas -- very bad behaviour in observable if (sketch.mouseX > margin.l && sketch.mouseX < width - margin.r && sketch.mouseY > margin.t && sketch.mouseY < height - margin.b) { mouse_distance = mouseOver(translate_x, translate_y, dataByRegion[r].key, sketch); } if (dataDraw.length > 0) { const orderedBranches = dataDraw.sort((a, b) => { return new Date(a.Date) - new Date(b.Date) }); sketch.push(); sketch.translate(translate_x + mouse_distance, height - margin.b, translate_z); branchCountry(lengthBranch, wind, sketch); branchWeeks(lengthBranch, wind, orderedBranches, sketch); sketch.pop(); } } if (t < timeMax) { t = t + speed; mutable time = t; } else { // sketch.noLoop(); // stop animation } } })32:T5af,function checkMargins(sketch) { sketch.stroke('white'); sketch.strokeWeight(1); sketch.noFill(); // margins sketch.line(margin.l, margin.t, 0, width - margin.r, margin.t, 0); sketch.line(width - margin.r, margin.t, 0, width - margin.r, height - margin.b, 0); sketch.line(width - margin.r, height - margin.b, 0, margin.l, height - margin.b, 0); sketch.line(margin.l, height - margin.b, 0, margin.l, margin.t, 0); // lines for flowers sketch.line(margin.l, scaleY(-5), 0, width - margin.r, scaleY(-5), 0); sketch.line(margin.l, scaleY(-4), 0, width - margin.r, scaleY(-4), 0); sketch.line(margin.l, scaleY(-3), 0, width - margin.r, scaleY(-3), 0); sketch.line(margin.l, scaleY(-2), 0, width - margin.r, scaleY(-2), 0); sketch.line(margin.l, scaleY(-1), 0, width - margin.r, scaleY(-1), 0); sketch.line(margin.l, scaleY(0), 0, width - margin.r, scaleY(0), 0); sketch.line(margin.l, scaleY(1), 0, width - margin.r, scaleY(1), 0); sketch.line(margin.l, scaleY(2), 0, width - margin.r, scaleY(2), 0); sketch.line(margin.l, scaleY(3), 0, width - margin.r, scaleY(3), 0); sketch.line(margin.l, scaleY(4), 0, width - margin.r, scaleY(4), 0); sketch.line(margin.l, scaleY(5), 0, width - margin.r, scaleY(5), 0); }33:T437,function mouseOver(x, y, name, sketch) { let distance = Math.abs(x - sketch.mouseX); const ff = 0.005; const spaceFlower = (width - margin.r - margin.l) / dataByRegion.length; const minDistance = spaceFlower; // if mouse is within a specific range don't move flowers (right now it selects 2) if (distance >= (-1 * minDistance) && distance <= minDistance) { distance = ff; // draw circles sketch.fill(flower); sketch.ellipse(x, y + margin.b, 4, 4, 50); // write name --- not sure how! }; // calculate distance from normal position const zoomFactor = (1 / (sketch.sqrt(sketch.sqrt(ff * distance))) + 1); const centre = (1 / (sketch.sqrt(sketch.sqrt(ff * ff))) + 1); let spaceAxis = sketch.map(zoomFactor, centre, sketch.exp(0.5), 0, 60); if (x < sketch.mouseX) spaceAxis = -1 * spaceAxis; // don't let the flowers be drawn outside the canvas if ((x + spaceAxis) < margin.l) spaceAxis = x - margin.l; if ((x + spaceAxis) > width - margin.r) spaceAxis = (width - margin.r) - x; return spaceAxis; }34:[{"id":"31f616ab2c24f6cd72d1760936f93ca2805de5a495e1f63c1cab6e38089a923cfb16aec034e84423f3e7e095c0d3bfd9701fd24eb7a8b6ed004b8af36bd7adff","href":"https://static.observableusercontent.com/files/31f616ab2c24f6cd72d1760936f93ca2805de5a495e1f63c1cab6e38089a923cfb16aec034e84423f3e7e095c0d3bfd9701fd24eb7a8b6ed004b8af36bd7adff","name":"coronavirus_timeseries_daily_22_june.csv","type":"text/csv","lastModified":1592901101621.503,"size":1034817},{"id":"7edd467d9aaae5fa839481e7466d5e2e85a6e7ec6b28951df6a36c06cd4a4f346439f48651f4d322506e1c79528121c1d371293799ba4f44188304012e7444fa","href":"https://static.observableusercontent.com/files/7edd467d9aaae5fa839481e7466d5e2e85a6e7ec6b28951df6a36c06cd4a4f346439f48651f4d322506e1c79528121c1d371293799ba4f44188304012e7444fa","name":"x_positions.csv","type":"text/csv","lastModified":1592900294282.953,"size":2483}] 2f:{"title":"BBC Coronavirus tribute: all countries (weekly)","cells":[{"id":0,"value":"md`# BBC Coronavirus tribute: all countries (weekly)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2166,"value":"md`## All countries represented, weekly data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2160,"value":"md`Tools: WebGl, P5.js, D3.js`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2170,"value":"md`Prototype done for BBC News with Johns Hopkins University data from 21-06-20 https://coronavirus.jhu.edu/map.html`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2173,"value":"md`The final project can be seen in https://www.bbc.co.uk/news/resources/idt-7464500a-6368-4029-aa41-ab94e0ee09fb with data until the 7th December`","pinned":false,"hidden":false,"mode":"ojs"},{"id":822,"value":"md`This design was finally not implemented because it was hard to draw on mobile devices. It was finally changed for one flower that represented the global data. The prototype can be seen in https://observablehq.com/d/5c7894aad256194b`","pinned":false,"hidden":false,"mode":"ojs"},{"id":830,"value":"`${new Date(time).getDate()} ${new Date(time).toLocaleString('default', { month: 'long' })} ${new Date(time).getFullYear()}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":1489,"value":"md`## Functions that draw the flower (all come from the code that builds one flower for each country)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1494,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1498,"value":"function branchCountry(lengthBranch, mouse_distance, sketch) { \n const start = {x: 0, y: 0};\n const end = {x: width_tail + mouse_distance, y: lengthBranch};\n const bezier_x = -0.5 * end.x / 2;\n const bezier_y = 1.5 * end.y / 2;\n\n // dot --- zoom\n // sketch.strokeWeight(2);\n sketch.fill(tail);\n sketch.noStroke();\n sketch.ellipse(end.x, end.y, radiusTail, radiusTail);\n\n\n // line\n sketch.stroke(tail);\n sketch.noFill();\n sketch.bezier(0, start.x, 0,\n 0, start.y / 2, 0,\n bezier_x, bezier_y, 0,\n end.x, end.y, 0); \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1526,"value":"function branchWeeks(lengthBranch, mouse_distance, thisData, sketch) {\n // move to end of country branch\n sketch.translate(width_tail + mouse_distance, lengthBranch);\n\n // rotate to start from 0 clockwise\n sketch.rotate(-angle * nWeeks / 4);\n \n const drawWeeks = d3.nest()\n .key(d => +d.week - 4) // make them start in week 0\n .sortKeys((a, b) => a.week - b.week)\n .entries(thisData);\n\n for (var i = 0; i < drawWeeks.length; i++) {\n const thisWeekDeaths = d3.sum(drawWeeks[i].values, d => d.new_daily_deaths);\n const thisWeek = +drawWeeks[i].key;\n\n let diameter = 0;\n\n if (thisWeekDeaths > 0) {\n diameter = scaleRadius(thisWeekDeaths) * 2;\n oneDay(diameter, thisWeek, angle, sketch);\n }\n }\n \n sketch.rotate(angle * nWeeks / 4); \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1530,"value":"function oneDay(diameter, index, angle, sketch) {\n const x = sketch.cos(angle * index) * lengthWeekBranch;\n const y = sketch.sin(angle * index) * lengthWeekBranch;\n const xCircle = sketch.cos(angle * index) * (lengthWeekBranch + diameter / 2);\n const yCircle = sketch.sin(angle * index) * (lengthWeekBranch + diameter / 2);\n const start = {x: 0, y: 0};\n const end = {x: x, y: y};\n const bezier_x = end.x / 2;\n const bezier_y = 1.5 * end.y / 2;\n\n sketch.strokeWeight(1);\n sketch.stroke(flower);\n sketch.noFill();\n sketch.bezier(0, start.x, 0,\n 0, start.y / 2, 0,\n bezier_x, bezier_y, 0,\n end.x, end.y, 0);\n\n sketch.fill(flower);\n sketch.noStroke();\n sketch.ellipse(xCircle, yCircle, diameter, diameter, 50);\n\n }","pinned":true,"hidden":false,"mode":"ojs"},{"id":1608,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":14,"value":"md`## Constructor`","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"height = 492","pinned":false,"hidden":false,"mode":"ojs"},{"id":387,"value":"md`P5 works better with colours in RGBA if you need to add opacity`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1509,"value":"sky = '#083745'","pinned":false,"hidden":false,"mode":"ojs"},{"id":1506,"value":"tail = 'rgba(82, 170, 196, 0.7)'","pinned":false,"hidden":false,"mode":"ojs"},{"id":1542,"value":"flower = \"rgba(224, 242, 242, 0.7)\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1218,"value":"md`Point top left: 0, 0.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":959,"value":"margin = ({\n l: lengthWeekBranch + maxWeekR * 1.5,\n r: lengthWeekBranch + maxWeekR * 5,\n t: maxLengthTail + lengthWeekBranch + maxWeekR,\n b: 25,\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1606,"value":"// from https://stackoverflow.com/questions/4959975/generate-random-number-between-two-numbers-in-javascript\n\nfunction randomIntFromInterval(min, max) {\n return Math.floor(Math.random() * (max - min + 1) + min);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"md`## Data analysis`","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"md`Check extent of cases, this will be used to draw the main branch of the countries`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1124,"value":"md`Create variables to control animation`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1138,"value":"md`Create function to parse dates (not needed with the current CSV)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":483,"value":"\nfunction parseDate(date) {\n console.log(date);\n const thisDate = date.split(\"-\");\n \n // year - month - day\n const newDate = new Date(+thisDate[2], +thisDate[1] - 1, +thisDate[0])\n \n return newDate\n\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1143,"value":"md`Create variables to represent deaths, that are proportional to the areas of the circles being drawn`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1147,"value":"md`Create variables to represent cases, tails proportional to cumulative cases`","pinned":false,"hidden":false,"mode":"ojs"},{"id":955,"value":"completeHeight = maxLengthTail + lengthWeekBranch + maxWeekR","pinned":false,"hidden":false,"mode":"ojs"},{"id":2203,"value":"md`## Scales (all come from the code that builds one flower for each country)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2206,"value":"md`max_deaths_world_week is used to control the maximum radius of the petals`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2068,"value":"max_deaths_world_week = checkMaxDeathsR();","pinned":false,"hidden":false,"mode":"ojs"},{"id":2070,"value":"function checkMaxDeathsR () {\n const thisData = dataByRegion;\n thisData.forEach(d => {\n const weeks = d3.nest()\n .key(e => `${e.week}_${e.country_region}`)\n .rollup(e => d3.sum(e, f => +f.new_daily_deaths))\n .entries(d.values)\n \n const maxWeek = d3.max(weeks, e => e.value);\n d.total_max_week = maxWeek;\n })\n\n const maxWeekCountries = d3.max(thisData, e => e.total_max_week);\n \n return maxWeekCountries;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2211,"value":"md`And max_cases_world controls the height of the stem`","pinned":false,"hidden":false,"mode":"ojs"},{"id":60,"value":"max_cases_world = Math.max(...data_updated.map(d => +d.cumulative_cases))","pinned":false,"hidden":false,"mode":"ojs"},{"id":2218,"value":"md`Let's check what's the maximum radius of the petal, and use it to control the margins`","pinned":false,"hidden":false,"mode":"ojs"},{"id":931,"value":"maxWeekR = 16;","pinned":false,"hidden":false,"mode":"ojs"},{"id":262,"value":"scaleRadius = d3.scaleSqrt()\n .domain([1, max_deaths_world_week])\n .range([0.25, maxWeekR])","pinned":true,"hidden":false,"mode":"ojs"},{"id":2227,"value":"md`Let's also add a width for the line that separates the petals from the pistil (end of the stem). That way we can see the circles better.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":222,"value":"lengthWeekBranch = 60 / 4;","pinned":false,"hidden":false,"mode":"ojs"},{"id":948,"value":"completeWidth = lengthWeekBranch + maxWeekR * 2","pinned":false,"hidden":false,"mode":"ojs"},{"id":2245,"value":"md`And finally, let's calculate the start and end positions of the stem considering that there will be circles higher than the pistil`","pinned":false,"hidden":false,"mode":"ojs"},{"id":915,"value":"maxLengthTail = 400;","pinned":false,"hidden":false,"mode":"ojs"},{"id":344,"value":"scaleMainBranch = d3.scaleLog()\n .domain([1, max_cases_world])\n .range([-2, -maxLengthTail])\n .clamp(true);","pinned":true,"hidden":false,"mode":"ojs"},{"id":2249,"value":"md`Let's include a width for the stem, that way it won't be an straight line and it'll look more organic`","pinned":false,"hidden":false,"mode":"ojs"},{"id":215,"value":"width_tail = 40","pinned":false,"hidden":false,"mode":"ojs"},{"id":1521,"value":"radiusTail = 4;","pinned":false,"hidden":false,"mode":"ojs"},{"id":2259,"value":"md`We also need to know the number of weeks included in the dataset, from the beginning of the pandemic to the last day. They will be used to calculate the angle of the branches`","pinned":false,"hidden":false,"mode":"ojs"},{"id":653,"value":"nWeeks = Math.ceil((timeMax - timeMin) / (1000 * 3600 * 24 * 7))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1573,"value":"md`Angle is 360 / total number of weeks in the data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1533,"value":"angle = 2 * Math.PI / (nWeeks);","pinned":false,"hidden":false,"mode":"ojs"},{"id":2180,"value":"md`## Variables & functions to position the flowers`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1174,"value":"md`Create variables to place the flowers. It should start from the 0 point in the canvas (margin.l) and end on the the right side leaving enough space for another flower to be drawn (canvas_width - margin.r - completeWidth)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":901,"value":"scaleX = d3.scaleLinear()\n .domain(extentX)\n .range([margin.l, width - margin.r])\n .clamp(true)","pinned":true,"hidden":false,"mode":"ojs"},{"id":911,"value":"scaleY = d3.scaleLinear()\n .domain([-5, 5])\n .range([height - margin.b, margin.t])\n .clamp(true);","pinned":true,"hidden":false,"mode":"ojs"},{"id":1590,"value":"md`Create variables to position the flowers in the Z coordinate (flowers with biggest number of cases will be drawn behind)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1589,"value":"scaleZ = d3.scaleLog()\n .domain([1, max_cases_world])\n .range([0, -10])\n .clamp(true);","pinned":true,"hidden":false,"mode":"ojs"},{"id":1305,"value":"height - margin.b","pinned":true,"hidden":false,"mode":"ojs"},{"id":2178,"value":"md`## Variables & functions to control animation`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2189,"value":"md`Speed allows us to control the animation. It should be one day`","pinned":false,"hidden":false,"mode":"ojs"},{"id":510,"value":"speed = 1000 * 3600 * 24","pinned":false,"hidden":false,"mode":"ojs"},{"id":2193,"value":"md`Time min let's us start and finish the animation. The way the date is parsed is similar to how the country flower works`","pinned":false,"hidden":false,"mode":"ojs"},{"id":479,"value":"timeMin = Math.min(...data_updated.map(d => new Date(d.Date)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1473,"value":"dateMin = new Date(timeMin);","pinned":false,"hidden":false,"mode":"ojs"},{"id":506,"value":"timeMax = Math.max(...data_updated.map(d => new Date(d.Date)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1470,"value":"dateMax = new Date(timeMax);","pinned":false,"hidden":false,"mode":"ojs"},{"id":1128,"value":"md`Time will be used at the top of the module to see which date is being represented`","pinned":false,"hidden":false,"mode":"ojs"},{"id":825,"value":"mutable time = timeMin - speed;","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"md`## Import data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1670,"value":"md`Data of cases and deaths by country and week`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1847,"value":"md`This array should be called _data_ but there's a cache problem with Observable and if the name remains the same the data is not updated`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1838,"value":"data_updated = d3.csvParse(await FileAttachment(\"coronavirus_timeseries_daily_22_june.csv\").text(), d3.autoType)","pinned":false,"hidden":false,"mode":"ojs"},{"id":354,"value":"nameRegions = function getRegionNames() {\n \n const nestedRegions = d3.nest()\n .key(d => d.country_region)\n .entries(data_updated)\n \n const allRegions = [];\n \n nestedRegions.forEach(d => allRegions.push(d.key));\n \n allRegions.sort();\n \n return allRegions\n}()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1833,"value":"x_pos = d3.csvParse(await FileAttachment(\"x_positions.csv\").text(), d3.autoType)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1008,"value":"extentX = [0, Math.max(...x_pos.map(d => d.x))]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1708,"value":"function prepareData() {\n const thisData = data_updated;\n \n // group by country\n // sort by date\n const dataByRegion = d3.nest()\n .key(d => d.country_region)\n .sortValues((a, b) => new Date (a.Date) - new Date (b.Date))\n .entries(thisData);\n \n for (var i = 0; i < dataByRegion.length; i++) {\n const thisCountry = dataByRegion[i];\n const thisIso = dataByRegion[i].values[0].iso3;\n \n for (var j = 0; j < x_pos.length; j++) {\n if (x_pos[j].iso3 === thisIso) {\n thisCountry.sort_X = x_pos[j].x;\n }\n }\n \n thisCountry.total = thisCountry.values[thisCountry.values.length - 1].cumulative_cases;\n thisCountry.sort_Y = 0;\n thisCountry.wind = 0\n \n }\n\n // draw last the ones with smallest number of cases (they will be on top)\n const sortedData = dataByRegion.sort((a, b) => b.total - a.total);\n \n return sortedData;\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1711,"value":"dataByRegion = prepareData();","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"md`## JavaScript Libraries`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"md`Import p5 library`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"import {p5} from \"@tmcw/p5\";","pinned":false,"hidden":false,"mode":"ojs"},{"id":364,"value":"md`Import d3 libraries`","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1929,"value":"md`Import buttons`","pinned":false,"hidden":false,"mode":"ojs"},{"id":373,"value":"import {select} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}