31:Ta1c,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 < countries_mobile.length; r++) { const thisCountry = countries_mobile[r].values; countries_mobile[r].wind = countries_mobile[r].wind + randomIntFromInterval(-0.1, 0.1); if (countries_mobile[r].wind > 10) { countries_mobile[r].wind = 10; } else if (countries_mobile[r].wind < -10) { countries_mobile[r].wind = -10; } // 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(countries_mobile[r].sort_X_mobile); const translate_y = scaleY(countries_mobile[r].sort_Y); const translate_z = scaleZ(countries_mobile[r].total) const wind = countries_mobile[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, countries_mobile[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:T43b,function mouseOver(x, y, name, sketch) { let distance = Math.abs(x - sketch.mouseX); const ff = 0.005; const spaceFlower = (width - margin.r - margin.l) / countries_mobile.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, 40); 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":"7edd467d9aaae5fa839481e7466d5e2e85a6e7ec6b28951df6a36c06cd4a4f346439f48651f4d322506e1c79528121c1d371293799ba4f44188304012e7444fa","href":"https://static.observableusercontent.com/files/7edd467d9aaae5fa839481e7466d5e2e85a6e7ec6b28951df6a36c06cd4a4f346439f48651f4d322506e1c79528121c1d371293799ba4f44188304012e7444fa","name":"x_positions.csv","type":"text/csv","lastModified":1593526959164.163,"size":2483},{"id":"31f616ab2c24f6cd72d1760936f93ca2805de5a495e1f63c1cab6e38089a923cfb16aec034e84423f3e7e095c0d3bfd9701fd24eb7a8b6ed004b8af36bd7adff","href":"https://static.observableusercontent.com/files/31f616ab2c24f6cd72d1760936f93ca2805de5a495e1f63c1cab6e38089a923cfb16aec034e84423f3e7e095c0d3bfd9701fd24eb7a8b6ed004b8af36bd7adff","name":"coronavirus_timeseries_daily_22_june.csv","type":"text/csv","lastModified":1593526959164.163,"size":1034817}] 2f:{"title":"BBC Coronavirus tribute: all countries (weekly & mobile)","cells":[{"id":0,"value":"md`# BBC Coronavirus tribute: all countries (weekly & mobile)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2287,"value":"md`## All countries represented, weekly data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":822,"value":"md`Tools: WebGl, P5.js, D3.js`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2291,"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":2294,"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":2297,"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":false,"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":2166,"value":"width = 320 - 16","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"height = 296","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":1576,"value":"md`Tail is the representation of cumulative number of cases`","pinned":false,"hidden":false,"mode":"ojs"},{"id":215,"value":"width_tail = 40","pinned":false,"hidden":false,"mode":"ojs"},{"id":915,"value":"maxLengthTail = height - maxWeekR * 3 - lengthWeekBranch;","pinned":false,"hidden":false,"mode":"ojs"},{"id":1521,"value":"radiusTail = 4;","pinned":false,"hidden":false,"mode":"ojs"},{"id":1579,"value":"md`Week branch has a tail with a constant length, and a circle representing the number of deaths that happened that week`","pinned":false,"hidden":false,"mode":"ojs"},{"id":222,"value":"lengthWeekBranch = 60 / 4;","pinned":false,"hidden":false,"mode":"ojs"},{"id":931,"value":"maxWeekR = 16;","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":60,"value":"max_cases_world = Math.max(...data_updated.map(d => +d.cumulative_cases))","pinned":false,"hidden":false,"mode":"ojs"},{"id":2068,"value":"max_deaths_world_week = checkMaxDeathsR();","pinned":true,"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":true,"hidden":false,"mode":"ojs"},{"id":1124,"value":"md`Create variables to control animation`","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":510,"value":"speed = 1000 * 3600 * 24","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":1131,"value":"md`Weeks in the current animation`","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":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":262,"value":"scaleRadius = d3.scaleSqrt()\n .domain([1, max_deaths_world_week])\n .range([0.25, maxWeekR])","pinned":true,"hidden":false,"mode":"ojs"},{"id":948,"value":"completeWidth = lengthWeekBranch + maxWeekR * 2","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":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":955,"value":"completeHeight = maxLengthTail + lengthWeekBranch + maxWeekR","pinned":false,"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":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":1305,"value":"height - margin.b","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(...countries_mobile.map(d => d.sort_X_mobile))]","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":2174,"value":"md`Get only 15 random countries`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2254,"value":"selectedMobile = ['Mayotte', 'Sao Tome and Principe', 'Djibouti', 'South Africa', 'US', 'Canada', 'Saint-Martin (French part)', 'Chile', 'Peru', 'Brazil', 'Afghanistan', 'Pakistan', 'Maldives', 'India', 'San Marino', 'Belgium', 'Andorra', 'UK', 'Iran', 'Kuwait', 'Bahrain', 'Iraq', 'New Zealand', 'Australia']","pinned":false,"hidden":false,"mode":"ojs"},{"id":2171,"value":"countries_mobile = prepareMobileCountries();","pinned":false,"hidden":false,"mode":"ojs"},{"id":2185,"value":"function prepareMobileCountries() {\n \n const thisTop = dataByRegion.filter((d, i) => {\n let match = false;\n \n for (var n = 0; n < selectedMobile.length; n++) {\n if (d.key === selectedMobile[n]) match = true;\n }\n \n return match === true;\n \n });\n \n thisTop.sort((a, b) => a.sort_X - b.sort_X);\n \n for (var n = 0; n < thisTop.length; n++) {\n thisTop[n].sort_X_mobile = n\n }\n \n return thisTop;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2207,"value":"numbers = function ArrayN () {\n const array = [];\n for (var i = 0; i < dataByRegion.length; i++) {\n array.push(i)\n }\n return array\n}()","pinned":false,"hidden":false,"mode":"ojs"},{"id":2225,"value":"function shuffle(array) {\n array.sort(() => Math.random() - 0.5);\n}","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":true,"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"}