28:null 29:["$","title",null,{"children":"Task of week 4 (27th October - 2nd November) | Stephanie Adeline | Observable"}] 2e:T830,// Copyright 2021, Observable Inc. // Released under the ISC license. // https://observablehq.com/@d3/color-legend function Swatches(color, { columns = null, format, unknown: formatUnknown, swatchSize = 15, swatchWidth = swatchSize, swatchHeight = swatchSize, marginLeft = 0 } = {}) { const id = `-swatches-${Math.random().toString(16).slice(2)}`; const unknown = formatUnknown == null ? undefined : color.unknown(); const unknowns = unknown == null || unknown === d3.scaleImplicit ? [] : [unknown]; const domain = color.domain().concat(unknowns); if (format === undefined) format = x => x === unknown ? formatUnknown : x; function entity(character) { return `&#${character.charCodeAt(0).toString()};`; } if (columns !== null) return htl.html`

${domain.map(value => { const label = `${format(value)}`; return htl.html`

${label}

`; })}

`; return htl.html`

${domain.map(value => htl.html`${format(value)}`)}

`; }2f:[] 2c:{"id":"4b8205dd12fcf80f","slug":null,"title":"Task of week 4 (27th October - 2nd November)","thumbnail":"d61adf44c48008f89c50723138d26e05a4643305affd8c970b605c10ca9f1a3d","access_level":"public","create_time":"$D2022-11-02T08:27:52.309Z","update_time":"$D2022-11-03T15:03:47.895Z","view_time":null,"first_public_time":"$D2022-11-02T09:19:19.435Z","has_unpublished_edits":null,"fork":{"id":"39cf270c90f48150","slug":null,"title":"Task of week 4 (27th October - 2nd November)","owner":{"id":"dc63de81f2766bde","login":"antonbardera","name":""}},"stars":0,"starred":false,"owner":{"type":"team","id":"15a59822afb543e3","login":"stephadeline","name":"Stephanie Adeline","avatar_url":"https://avatars-next.observableusercontent.com/2db225f104edbb9e1912a1455cb4d8f13b7a0b656c8cc9003f89ee4fe95d52b4","tier":"starter_2024"},"version":184,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"06571e2fdc13d6c9","login":"stephadeline","name":"Stephanie Adeline","avatar_url":"https://avatars-next.observableusercontent.com/2db225f104edbb9e1912a1455cb4d8f13b7a0b656c8cc9003f89ee4fe95d52b4","tier":null}],"members":[{"type":"individual","id":"06571e2fdc13d6c9","login":"stephadeline","name":"Stephanie Adeline","avatar_url":"https://avatars-next.observableusercontent.com/2db225f104edbb9e1912a1455cb4d8f13b7a0b656c8cc9003f89ee4fe95d52b4","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Task of week 4 (27th October - 2nd November)","cells":[{"id":0,"value":"md`# Task of week 4 (27th October - 2nd November)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"This week, we have presented an introduction to time plots (line plots and area plots). Please, take your time on reading again the notebook presented in this session in case any part wasn't clear at all.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":8,"value":"md`Here, you have links to notebooks that introduce similar plots than the ones presented this week:\n\n- [Multi-line chart](https://observablehq.com/@d3/multi-line-chart)\n- [Stacked area chart](https://observablehq.com/@d3/stacked-area-chart)\n- [Line](https://observablehq.com/@d3/line-with-missing-data) and [Area](https://observablehq.com/@d3/area-with-missing-data?collection=@d3/d3-shape) with missing data\n- [Radial area chart](https://observablehq.com/@d3/radial-area-chart?collection=@d3/d3-shape)\n- [Difference chart](https://observablehq.com/@d3/difference-chart)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"For this weekly task, we will use the [Oxford COVID-19 Government Response Tracker (OxCGRT)](https://www.bsg.ox.ac.uk/research/research-projects/coronavirus-government-response-tracker) dataset, which collects data on several different common policy responses that governments have taken to respond to the pandemic on 17 indicators such as school closures and travel restrictions. It now has data from more than 180 countries.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":56,"value":" OxCGRTdata = d3.csv(\"https://raw.githubusercontent.com/OxCGRT/covid-policy-tracker/master/data/OxCGRT_nat_latest.csv\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"dateCreator = function(str){\n var dt1 = parseInt(str.substring(6,8));\nvar mon1 = parseInt(str.substring(4,6));\nvar yr1 = parseInt(str.substring(0,4));\nvar date = new Date(yr1, mon1-1, dt1);\nreturn date;\n}; ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"In the first part of the task, you will have to create a line plot of the evolution of the confirmed cases in Italy in 2022 (up to the 30th of September).\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":60,"value":"cleanDataItaly = OxCGRTdata.filter(d => d.CountryName === \"Italy\" && d.Date >= \"20220101\" && d.Date <=\"20220930\")\n .map(d => {return {\n date : dateCreator(d.Date),\n cases : +d.ConfirmedCases,\n deaths : +d.ConfirmedDeaths\n };}\n );","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"### Confirmed cases in Italy in 2022 up until Sept 30","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":84,"value":"{\n const svg = d3.create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", height)\n .attr(\"viewBox\",[0, 0, width, height]);\n\n svg.append(\"g\")\n .call(xAxis);\n\n svg.append(\"g\")\n .call(yAxis);\n\n\n svg.append(\"path\")\n .datum(cleanDataItaly)\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"purple\")\n .attr(\"stroke-width\", 1.5)\n .attr(\"stroke-linejoin\", \"round\")\n .attr(\"stroke-linecap\", \"round\")\n .attr(\"d\", line('cases'));\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"In the second part of the task, you will have to do a multiline plot comparing different countries (all that appear in the *cleanDataSelectedCountries*: ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":77,"value":"cleanDataSelectedCountries = OxCGRTdata.filter(d => (d.CountryName === \"Italy\" || d.CountryName === \"Canada\" || d.CountryName === \"Finland\" || d.CountryName === \"Spain\") && d.Date >= \"20220101\" && d.Date <=\"20220930\")\n .map(d => {return {\n country : d.CountryName,\n date : dateCreator(d.Date),\n cases : +d.ConfirmedCases,\n deaths : +d.ConfirmedDeaths\n };}\n );","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"groupedCountries = d3.groups(cleanDataSelectedCountries, d => d.country);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"### Confirmed cases in selected countries","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":178,"value":"Swatches(d3.scaleOrdinal(countryList, d3.schemeCategory10))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"{\n const svg = d3.create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", height)\n .attr(\"viewBox\",[0, 0, width, height]);\n\n svg.append(\"g\")\n .call(xAxisCountries);\n\n svg.append(\"g\")\n .call(yAxisCountries);\n\n\n svg.selectAll(\".line\")\n .data(groupedCountries)\n .join(\"path\")\n .attr(\"class\", \"line\")\n .attr(\"d\", d => lineCountries(d[1]))\n .attr(\"stroke\", d => colorScale(d[0]))\n .style(\"fill\", \"none\")\n .style(\"stroke-width\", 1.5);\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"### Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":88,"value":"height = 400","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"width = 800","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"margin = ({top: 20, right: 30, bottom: 30, left: 60})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"d3 = require(\"d3@7\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"xScale = d3.scaleUtc()\n .domain(d3.extent(cleanDataItaly, d => d.date))\n .range([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"xScaleCountries = d3.scaleUtc()\n .domain(d3.extent(cleanDataSelectedCountries, d => d.date))\n .range([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"yScale = d3.scaleLinear()\n .domain([0, d3.max(cleanDataItaly, d => d.cases)])\n .range([height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"yScaleCountries = d3.scaleLinear()\n .domain([0, d3.max(cleanDataSelectedCountries, d => d.cases)])\n .range([height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"line = key => {return d3.line()\n .defined(d => !isNaN(d.date) && !isNaN(d[key]) )\n .x(d => xScale(d.date)) \n .y(d => yScale(d[key]))}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"lineCountries = d3.line()\n .defined(d => !isNaN(d.date) && !isNaN(d.cases) )\n .x(d => xScaleCountries(d.date)) \n .y(d => yScaleCountries(d.cases))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(xScale))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"xAxisCountries = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(xScaleCountries))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(yScale))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"yAxisCountries = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(yScaleCountries))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"colorScale = d3.scaleOrdinal()\n .domain(countryList)\n .range(d3.schemeCategory10);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"countryList = groupedCountries.map(d=> d[0])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":175,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2f","stdlib":"1"}} 2d:"$2c:body"