25:["$","title",null,{"children":"Exercise 1 - COVID WAVES | Vogelmann | Observable"}] 49:T5c3,viewof facet_static_graph = { let num_columns = 4; let data_selection_static = data.filter(d => (d.parsedDate >= new Date("2020-03-01")) & (d.parsedDate < new Date("2021-01-03") )) .filter(d => country_hardcoded_selection.includes(d.full_name)); return Plot332.plot({ width: Math.min(1400, width), height: Math.min(700, width * 0.6), facet: { data: data_selection_static, y: "id", marginRight: 80, marginTop : 20, marginBottom : 20, columns: num_columns }, y: { type: "linear", grid: true, label: "↑ New cases per milion (smoothed, 7-day mean)" }, x:{ label: "Time →", grid : true, nice: true }, color: { legend: true, scheme: "dark2", }, marks: [ Plot332.ruleX([new Date("2020-06-01")], {stroke: "red", strokeDasharray : 5}), Plot332.ruleY([0]), Plot332.line(data_selection_static, {x: "parsedDate", y: "new_cases_smoothed_per_million", stroke: "full_name"}), Plot332.areaY(data_selection_static, {x: "parsedDate", y: "new_cases_smoothed_per_million", z: "full_name", fill: "full_name", fillOpacity: 0.5}), Plot332.text(data_selection_static, Plot.selectFirst({fontSize:20, text: "full_name", x: new Date('2020-10-03'), y : 1500, fill : "full_name"})) //Plot.areaY(data_selection, {x: "parsedDate", y2: "new_cases_smoothed_per_million", fill: "full_name", fillOpacity: 0.5}), ], }) }4a:T66c,viewof line_interactive_graph = { let height = 100; let showarea = false; let fill_opacity = 0; if (showarea){ fill_opacity = 0.5; } let data_selection = data.filter(d => (d.parsedDate >= first_wave_start_date & d.parsedDate < second_wave_end_date )) .filter(d => convert_item_selection_to_array(items).includes(d.full_name)); if (data_selection.length == 0){ const context = DOM.context2d(width, height+50); context.clearRect(0, 0, width, height); context.font = "20px Segoe UI"; //context.fontSize = 10; context.fillText(" ↑↑ Selecciona almenys un pais de la llista per veure la seva evolució ↑↑" , 20, height ); return context.canvas; } return Plot.plot({ height: 500, width : width, y: { type: "linear", grid: true, label: "↑ New cases per million (smoothed, 7-day mean)" }, x:{ label: "Temps →", grid : true }, color: { legend: true, scheme: "dark2" }, marks: [ Plot.ruleX([new Date("2020-12-08")], {stroke: "blue", strokeDasharray : 10}), Plot.ruleX([new Date("2020-06-01")], {stroke: "red", strokeDasharray : 5}), Plot.ruleY([0]), Plot.line(data_selection, {x: "parsedDate", y: "new_cases_smoothed_per_million", stroke: "full_name"}), //Plot.areaY(data_selection, {x: "parsedDate", y2: "new_cases_smoothed_per_million", z: "full_name", fill: "full_name", fillOpacity: fill_opacity}), //Plot.areaY(data_selection, {x: "parsedDate", y2: "new_cases_smoothed_per_million", fill: "full_name", fillOpacity: 0.5}), ], }) }4b:T8d1,viewof chart = { const svg = d3 .create("svg") .attr("id", "map-denegations") .attr("width", mapWidth) .attr("height", mapHeight); // Global layer const globalLayer = svg.append("g") // Provinces and CCAA layer const regionsLayer = globalLayer .append("g") const canaryLineLayer = globalLayer .append("g") // Pass value (the hovered province information) to the element const element = svg.node(); element.value = []; regionsLayer .selectAll("path") .data(spainProvinces.features) .join("path") .attr("class", "province") .attr("d", polygonPath) .attr("fill", function(d) { let max_value = max_data_spain.get(d.id); if(max_value < 25000){ return "floralwhite"; } if(max_value < 100000) { return "moccasin"; } if(max_value < 500000) { return "sandybrown"; } else{ return "chocolate"; } }) .style("stroke", "white") .style("stroke-width", "0.25px") .style("fill-opacity", 0.8) .style("cursor", "pointer"); regionsLayer .selectAll(".ccaa") .data(topojson.feature(spain, spain.objects.autonomous_regions).features) .enter() .append("path") .attr("class", "ccaa") .attr("fill", "none") .attr("stroke", "white") .attr("stroke-width", "1.5px") .attr("stroke-linejoin", "round") .attr("d", polygonPath); regionsLayer .selectAll(".province") .on("mouseover", onMouseOver) .on("mouseout", onMouseOut); canaryLineLayer .append("path") .attr("d", projection.getCompositionBorders()) .attr("fill", "none") .attr("stroke", "#c1c1c1"); function onMouseOver(event, d, i) { const myCountryId = d.id; mutable selected_province = d.id; // Highlight country d3.select(this).raise().style("stroke", "black").style("stroke-width", 1.5); // Update cell value!! element.value = myCountryId; element.dispatchEvent(new CustomEvent("input")); } function onMouseOut(event, d, i) { mutable selected_province = "NONE"; d3.select(this) .lower() .style("stroke", "white") .style("stroke-width", "0.25px"); } return svg.node(); }4c:T9b1,viewof selected_province_evolution = { let data_selection = data_spain.filter(d => (d.id == parseInt(selected_province))); let height = Math.min(700, width); let width_local = Math.min(1400, width); let scale = "linear"; let fillopacity = 0.3; if(spain_options.includes("Hide fill area")) { fillopacity = 0; } if(spain_options.includes("Log scale")) { scale = "log"; } if(selected_province == "NONE"){ const context = DOM.context2d(width_local, height); context.clearRect(0, 0, width_local, height); context.font = "20px Segoe UI"; //context.fillText(" ↑↑ Select a province from the map ↑↑" , width_local / 3 , height/3 ); return context.canvas; } if(spain_options.includes("Fixed Y axis")) { let ymax = 27000; let ymin = 0; if (scale == "log") { ymax = 25000; ymin = 0.1 } return Plot.plot({ height: height, width : width_local, marginLeft: 70, y: { type: "linear", grid: true, label: "↑ New cases (smoothed, 7-day mean)", type : scale, domain : [ymin, ymax], }, x:{ label: "Time →", grid : true }, marks: [ Plot.ruleX([new Date("2020-12-26")], {stroke: "blue", strokeDasharray : 10}), Plot.text(data_selection, Plot.selectFirst({fill : "gainsboro", fontSize:90, text: "provincia_nombre", x: new Date('2021-02-03')})), Plot.line(data_selection, Plot.windowY({x: "parsedDate", y: "ncasos", k : 7, stroke: "#c6780a"})), Plot.areaY(data_selection, Plot.windowY({x: "parsedDate", y: "ncasos", k : 7, fill : "#c6780a", fillOpacity: fillopacity})), ] }) } return Plot.plot({ height: height, width : width_local, marginLeft: 70, y: { type: "linear", grid: true, label: "↑ New cases (smoothed, 7-day mean)", type : scale, //domain : [0, 27000], }, x:{ label: "Time →", grid : true }, marks: [ Plot.ruleX([new Date("2020-12-26")], {stroke: "blue", strokeDasharray : 10}), Plot.text(data_selection, Plot.selectFirst({fill : "gainsboro", fontSize:90, text: "provincia_nombre", x: new Date('2021-02-03')})), Plot.line(data_selection, Plot.windowY({x: "parsedDate", y: "ncasos", k : 7, stroke: "#c6780a"})), Plot.areaY(data_selection, Plot.windowY({x: "parsedDate", y: "ncasos", k : 7, fill : "#c6780a", fillOpacity: fillopacity})), ] }) }4d:[{"id":"eb3cac3d5b7d6c58dae32fdc4c59f692f1eb52e8d5fff2e03c5c7e267c710dd19f42662b4645baf03a3433c620cb08ac4b4489b7e01163446807a2a7a1c846d7","href":"https://static.observableusercontent.com/files/eb3cac3d5b7d6c58dae32fdc4c59f692f1eb52e8d5fff2e03c5c7e267c710dd19f42662b4645baf03a3433c620cb08ac4b4489b7e01163446807a2a7a1c846d7","name":"dataset_covid_VIZ_ej1@1.csv","type":"text/csv","lastModified":1669855207430.376,"size":1731075}] 29:{"id":"5b4df34d832303db","slug":null,"title":"Exercise 1 - COVID WAVES","thumbnail":"4844a35b93b52808c5fa70ed5a3942e8b8d9746aebdf60c1362e97305d905dbb","access_level":"public","create_time":"$D2022-11-30T11:40:03.514Z","update_time":"$D2023-01-08T22:26:49.167Z","view_time":null,"first_public_time":"$D2022-11-30T11:40:03.514Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"cf0cffacb5e3b6d7","login":"vogelmann","name":"Vogelmann","avatar_url":"https://avatars-next.observableusercontent.com/14e783e7de3ed861fe13f88f792dbecaf952c64d82da1fcd4d9583136876450d","tier":"starter_2024","bio":"🐦⚙️ Level 28 Aarakocra Tinkerer ||\n🔢♾️ Mathematician & Data Scientist ||\n🚀🤖 PhD (AI + Astrodynamics)\n☕💀 Fueled by caffeine and spite.","followed_by_you":false,"follows_you":false},"version":901,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"ddb96b3865d46af6","login":"vogelmann","name":"Vogelmann","avatar_url":"https://avatars-next.observableusercontent.com/14e783e7de3ed861fe13f88f792dbecaf952c64d82da1fcd4d9583136876450d","tier":null,"bio":"🐦⚙️ Level 28 Aarakocra Tinkerer ||\n🔢♾️ Mathematician & Data Scientist ||\n🚀🤖 PhD (AI + Astrodynamics)\n☕💀 Fueled by caffeine and spite.","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"ddb96b3865d46af6","login":"vogelmann","name":"Vogelmann","avatar_url":"https://avatars-next.observableusercontent.com/14e783e7de3ed861fe13f88f792dbecaf952c64d82da1fcd4d9583136876450d","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"f9a8ef1628983b82","slug":"msc-tasks-exercises","title":"MSc DS tasks & exercises","owner":{"id":"cf0cffacb5e3b6d7","login":"vogelmann","name":"Vogelmann"}},"type":"notebook","body":{"titling":"auto","title":"Exercise 1 - COVID WAVES","cells":[{"id":0,"value":"# Exercise 1 - COVID WAVES","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"---\n\n# Part 1 - COVID Dataset","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":653,"value":"En la primera part d'aquest exercici intentarem contestar a la pregunta: **quins països van resultar més afectats per la segona onada de la pandèmia?**
\n\nPer simplicitat, treballarem sota l'asumpció de que la primera onada de la pandèmia va ocórre durant la Primavera de 2020 (Març-Juny), i la segona onada va ocórre durant els últims dies de l'Estiu i durant tota la Tardor de 2020 (Agost-Desembre).
\n\nPer comparar dos països, usarem el nombre de casos nous per milió d'habitants, donat que aquesta dada ens permet eliminar la diferència del volum de població; no seria adequat comparar en nombre absolut de casos un país com la Xina, que té prop de 1.412 milions d'habitans, amb un país com Andorra que en prou feines arriba als 50.000 . ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":13,"value":"### Les dades","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":16,"value":"Comencem carregant i aplanant el dataset que se'ns ha proporcionat amb l'enunciat original de l'exercici:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":18,"value":"rawdata = (\n await fetch(\n \"https://raw.githubusercontent.com/xaquingv/data-for-mds/main/owid-covid-data.json\"\n )\n).json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"data = Object.entries(rawdata)\n .map(([key, value]) => (\n [...value.data.map(d => ({id: key, full_name: value.location, parsedDate: new Date(d.date), ...d}))]\n )).flat()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"
Creem també un diccionari que relacioni els codis i els noms de cada païs:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":37,"value":"country_dictionary = Object.entries(rawdata).map(([key, value]) => ({id: key, full_name : value.location}))\n.reduce((acc, x) => ({...acc, [x.id]: x.full_name}), {})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":668,"value":"first_wave_start_date = new Date(\"2020-03-01\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":673,"value":"first_wave_end_date = new Date('2020-06-01')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":675,"value":"second_wave_start_date = new Date('2020-07-01')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":677,"value":"second_wave_end_date = new Date('2021-01-01')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":662,"value":"Anem ara a buscar els països amb major nombre de casos totals per milió, entre ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":149,"value":"max_data = d3.rollup(\n data.filter(d => (d.parsedDate >= second_wave_start_date) & (d.parsedDate < second_wave_end_date )),\n v => d3.sum(v, d => d.new_cases_per_million), \n d => d.full_name \n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"Inputs.table(max_data, {sort: \"1\", reverse: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":682,"value":"Si ordenem la taula anterior en ordre decreixent, observem que el top 12 de paisos són: Andorra, Montenegro, Luxembourg, Czechia, la Polinèsia Francesa, Eslovènia, Geòrgia, Liechenstein, els EEUU, Lituània, Croàcia i Bèlgica (Gibraltar l'ignorem perquè forma part del Regne Unit). Creem una llista amb els noms d'aquests paisos:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":426,"value":"country_hardcoded_selection = [\"Andorra\", \"Montenegro\", \"Luxembourg\", \"Czechia\", \"French Polynesia\", \"Slovenia\", \"Georgia\", \"Liechtenstein\", \"United States\", \"Lithuania\", \"Croatia\", \"Belgium\"];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":686,"value":"Hem triat 12 paisos senzillament perquè més endavant farem un gràfic de tipus *facet*, i 12 elements es poden organitzar fàcilment en 3 files de 4 columnes cada una.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":25,"value":"### Funcions auxiliars","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":27,"value":"Abans de començar a dibuixar visualitzacions, definirem dues funcions que ens ajudaràn amb els algorismes que generen les gràfiques interactives:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":30,"value":"function data_dictionary_to_country (dict) {\n let array_to_return = [];\n\n let value_blacklist = ['High income', 'Low income', 'Lower middle income', 'Upper middle income'];\n\n for (const [key, value] of Object.entries(dict)) {\n if(!value_blacklist.includes(value)) {\n array_to_return.push({\"name\": String(value)});\n }\n }\n\n return array_to_return;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"function convert_item_selection_to_array(item_selection) {\n let array_to_return = [];\n\n for (const [key, value] of Object.entries(item_selection)) { \n array_to_return.push(value.name);\n }\n \n return array_to_return\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"---\n## Plot 1 - Top 12 de paisos (casos nous / milió)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":232,"value":"Aquesta primera visualització mostra el **top 12** de paisos amb major **total de casos per milió durant la segona onada**. A les gràfiques apareix tant la primera com la segona onada, i permet fer una comparació; observem tots els paisos van tenir una segona onada molt més severa que la primera.\nLa línia vertical ${textcolor('vermella', 'red')} indica la data aproximada en que es va acabar la primera onada globalment.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":169,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"---\n## Plot 2 - Gràfic comparatiu interactiu","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":103,"value":"Aquest és un gràfic interactiu: \n* **Selecciona paisos/regions** de la llista per comparar la seva evolució durant la primera i la segona onada (mesurat en casos nous / milió d'habitants).\n \n* La línia vertical ${textcolor('vermella', 'red')} indica la **data aproximada en que va finalitzar la primera onada** globalment.\n \n* La línia vertical ${textcolor('blava', 'blue')} indica la **data en que la vacuna d'Astrazeneca va començar a administrar-se** per primer cop al Regne Unit (recordem que va ser la primera vacuna contra el virus que arribà al públic general).\n\n

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":35,"value":"viewof items = Inputs.table(data_dictionary_to_country(country_dictionary), {header : {name : \"Select/Unselect ALL\"},width: width, maxHeight: 250, required: false})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"

\n--- ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":246,"value":"---\n\n# Part 2 - Covid a Espanya","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":826,"value":"La segona part de l'exercici ens demanava escollir algun dataset i mostrar-lo de dues maneres diferents:\n* Com a *facets*, a l'estil de l'article del New York Times que mostrava l'enunciat.\n* Seguint alguna altra visualització.\n\nMalgrat que volia canviar de tema i fer servir alguna altra font de dades que no tingués a veure amb pandèmies, he acabat elegint un dataset sobre casos de COVID al nostre país entre l'1 de Gener de 2020 i el dia d'avui. \n

\nPer tant, intentarem veure **l'evolució del nombre d'infectats de COVID al nostre país** (en nombres absoluts).
","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":870,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":480,"value":"### Adquisició del dataset","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":829,"value":"El dataset que utilitzarem el vaig crear per l'assignatura d'Adquisició de Dades d'aquest mateix màster. Les dades provenen de la següent font:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":482,"value":"https://cnecovid.isciii.es/covid19/#documentaci%C3%B3n-y-datos .","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":835,"value":"Les dades es van agrupar per provincia i data, i es van afegir el camp referent al nom complert de la provincia. Per aquest exercici en particular, hi he afegit també el codi numèric de cada provínica.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":437,"value":"### Les dades","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":839,"value":"Com abans, comencem carregant les dades i aplanant-les:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":440,"value":"rawdata_covid_spain = FileAttachment(\"dataset_covid_VIZ_ej1@1.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":443,"value":"data_spain = Object.entries(rawdata_covid_spain)\n .map(([key, value]) => ({id : value.provincia_codigo, provincia_nombre: value.provincia_nombre, parsedDate: new Date(value.fecha), ncasos : value.num_casos}))\n .flat()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":435,"value":"
\nEn una de les visualitzacions usarem un mapa d'Espanya. Per tant, ens cal carregar les dades de les corbes poligonals de les províncies, per tal de dibuixar-les, i els identificadors que ens permetin localitzar-les i creuar-les amb les dades que tenim:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":344,"value":"spain = await d3.json(\"https://data.civio.es/common/spain-municipalities.json\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":342,"value":"spainProvinces = topojson.feature(spain, spain.objects.provinces);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":857,"value":"
\nGuardem també la suma total de casos per cada província:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":852,"value":"max_data_spain = d3.rollup(\n data_spain,\n v => d3.sum(v, d => d.ncasos), \n d => d.id \n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":845,"value":"
\nCreem també una variable per guardar la província que s'ha seleccionat en el mapa interactiu:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":379,"value":"mutable selected_province = \"\";","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":720,"value":"
\n---\n## Plot 1 - Facets","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":783,"value":"La següent visualització mostra l'evolució de totes les províncies des de l'1 de Gener de 2020 fins a dia d'avui. L'eix vertical es troba en escala logarítmica. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":722,"value":"viewof facet_spain_static_graph = {\n\n let num_columns = 4;\n\n return Plot332.plot({\n width: Math.min(1400, width),\n height: 200*15,\n facet: {\n data: data_spain,\n y : \"id\",\n columns: num_columns,\n nice : true\n },\n y: {\n type: \"log\",\n grid: true,\n label: \"↑ New cases (smoothed, 7-day mean, log scale)\",\n nice : true\n },\n x:{\n label: \"Time →\",\n grid : true,\n nice: true\n },\n marks: [\n Plot332.ruleY([0]),\n Plot332.line(data_spain, Plot.windowY({x: \"parsedDate\", y: \"ncasos\", stroke: \"id\", k : 7})),\n Plot332.text(data_spain, Plot.selectFirst({fontSize:20, text: \"provincia_nombre\", y: (1e4+1e5)/4, fill : \"id\"}))\n ],\n \n });\n\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":713,"value":"
\n## Plot 2 - Mapa interactiu","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":590,"value":"Passa el cursor per sobre una província per veure la seva evolució des de l'inici de la pandèmia. La línia vertical ${textcolor('blava', 'blue')} que apareix al gràfic indica el començament de la primera campanya de vacunació al nostre país.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":331,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":612,"value":"viewof spain_options = Inputs.checkbox([\"Log scale\", \"Fixed Y axis\", \"Hide fill area\"], {label: \"Options : \"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":487,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":821,"value":"*Disclaimer - per generar el dibuix vectorial del mapa m'he basat **bastant** en els següents exemples:*\n\nhttps://observablehq.com/@civio/671-mapa-del-porcentaje-causas-de-denegacion-del-imv\n\nhttps://observablehq.com/@adrimaqueda/spike-spain-map","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":131,"value":"
\n
\n---\n### Addendum...","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":724,"value":"**Textcolor** - Per poder resaltar text fent servir colors (duh.)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":133,"value":"import {textcolor} from \"@observablehq/text-color-annotations-in-markdown\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":726,"value":"
\n**Plot322** - Per poder fer visualitzacions de tipus facet de l'estil del NYT. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":185,"value":"import {Plot as Plot332} from \"@fil/facet-wrap-332\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":732,"value":"
\n**Composite projections** - Per fer projeccions que ajuntin varis territoris geogràficament molt separats. Ho fem servir per pintar les canàries.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":349,"value":"composite = require(\"d3-composite-projections\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":739,"value":"
\nDimensions del mapa d'Espanya:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":365,"value":"mapWidth = width * 0.75","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":368,"value":"mapHeight = mapWidth * 0.8","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":741,"value":"
\nProjecció del mapa d'Espanya (necessari per dibuixar-lo amb d3 i saber a on hem fet clic):","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":360,"value":"projection = composite\n .geoConicConformalSpain()\n .fitSize(\n [mapWidth, mapHeight],\n topojson.feature(spain, spain.objects.provinces)\n );","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":743,"value":"
\nPer poder dibuixar camins sobre el llenç que tinguin en compte la projecció:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":357,"value":"polygonPath = d3.geoPath(projection);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4d","stdlib":"1"}} 24:null