2b:null 2c:["$","title",null,{"children":"Esercitazione 1 - aprile: | danielefadda | Observable"}] 31:T46c,descrizione = md`## Cosa è Gapminder. Gapminder Foundation è un'impresa senza scopo di lucro registrata a Stoccolma, in Svezia, che promuove lo sviluppo globale sostenibile e il raggiungimento degli Obiettivi di sviluppo del millennio delle Nazioni Unite attraverso un maggiore uso e comprensione di statistiche e altre informazioni sullo sviluppo sociale, economico e ambientale a livello locale, nazionale e livelli globali. *fonte [Wikipedia](https://www.wikiwand.com/en/Gapminder_Foundation)* ![L'applicazione sviluppata da Gapminder durante una demo](https://s3-eu-west-1.amazonaws.com/static.gapminder.org/GapminderMedia/wp-uploads/20180916154132/gapminder_home_bg_3.jpg) Famosa per l'applicazione omonima (Gapminder World, rinominata nel 2007 Trendalyzer), la tecnica utilizzata per raccontare i dati è quella del bubble chart interattivo che, di default, mostra cinque variabili: due variabili numeriche sugli assi X e Y, la grandezza delle bolle ed il colore e una variabile temporale che può essere manipolata con una barra di scorrimento. [Per maggiori informazioni](https://www.gapminder.org/about-gapminder/) `32:T4e4,lineChart = { const data = statiEuropa.map(d => ({ x: gm.filter(f => f.Country === d).map((d, i) => d.Year), y: gm.filter(f => f.Country === d).map(d => d[`${selectVariable2}`]), name: d, opacity: d === `${selectEuState}` ? 1 : 0.5, line: { width: d === `${selectEuState}` ? 3 : 1, color: d === `${selectEuState}` ? "red" : "gray", shape: "spline" }, hovertemplate: `${d} (%{x})
` + `%{y: ,.2f}` + ` ${toCompare2.find(obj => obj.val == selectVariable2).measure}
` + `` })); const layout = { title: `Andamento per ${ toCompare2.find(obj => obj.val == selectVariable2).name } in ${selectEuState}`, // width: width, // height: (width / 3) * 2, showlegend: false, hovermode: 'closest', // accetta valori: "x" | "y" | "closest" | false - default "x" hoverlabel: { bgcolor: "#FFF" }, xaxis: { showgrid: false }, yaxis: { showgrid: true, gridwidth: 0.25, linecolor: '#636363', title: `${toCompare2.find(obj => obj.val == selectVariable2).name}
` } }; const div = DOM.element('div'); Plotly.newPlot(div, data, layout); return div; }33:T4cd,gapminder = { const trace = { x: visualizedYear.map(d => d[`${gmX}`]), y: visualizedYear.map(d => d[`${gmY}`]), text: visualizedYear.map(d => d.Country), type: 'scatter', mode: 'markers', opacity: 0.7, marker: { color: visualizedYear.map(d => colorScale(d.region)), size: visualizedYear.map(d => populationScale(d.population)) // ridimensionamento utilizzando le scale di } }; const data = [trace]; const layout = { title: `${gmX.replace('_', ' ')} VS ${gmY.replace( '_', ' ' )} - anno ${currentYear}`, width: width, height: (width * 2) / 3, xaxis: { title: `${gmX.replace('_', ' ')}`, range: [ -(d3.extent(gm.map(d => d[`${gmX}`]))[1] / 10), // il range potrebbe partire da zero ma le bubble sarebbero tagliate d3.extent(gm.map(d => d[`${gmX}`]))[1] ] }, yaxis: { title: `${gmY.replace('_', ' ')}`, range: [ -(d3.extent(gm.map(d => d[`${gmY}`]))[1] / 10), d3.extent(gm.map(d => d[`${gmY}`]))[1] ] }, margins: { autoexpand: true } }; const div = DOM.element('div'); Plotly.newPlot(div, data, layout, { displayModeBar: false }); return div; }34:[{"id":"9256012cf7f93ae380d2d050de3c746d387ac283266c4a1784a412cae4c290dc6a7ef9a5a15b6e9b1a22ed00e95de5826ddd1726a103388148d0581570b3faaf","href":"https://static.observableusercontent.com/files/9256012cf7f93ae380d2d050de3c746d387ac283266c4a1784a412cae4c290dc6a7ef9a5a15b6e9b1a22ed00e95de5826ddd1726a103388148d0581570b3faaf","name":"plotly_structure.png","type":"image/png","lastModified":1585738543281.274,"size":40670},{"id":"9b0c4ac1bc6e655f509c11211ca3457d2e9f34916b34328dc2ecdeb0ab816fea24d6b48dd27d030211e73a55bff58e520fe6776cab8dea423ddfb2e9371141c8","href":"https://static.observableusercontent.com/files/9b0c4ac1bc6e655f509c11211ca3457d2e9f34916b34328dc2ecdeb0ab816fea24d6b48dd27d030211e73a55bff58e520fe6776cab8dea423ddfb2e9371141c8","name":"gapminder_tidy.csv","type":"text/csv","lastModified":1585738952346.121,"size":734079}] 2f:{"id":"c357a499bbac70ea","slug":"esercitazione-1-aprile","title":"Esercitazione 1 - aprile:","thumbnail":"5a871eb6a52d85aab7222ec5c4a98bfe6eaf6a650737acd52a560189340c4045","access_level":"public","create_time":"$D2020-04-01T10:55:43.281Z","update_time":"$D2021-03-16T13:18:45.123Z","view_time":null,"first_public_time":"$D2020-04-01T11:30:03.489Z","fork":true,"stars":2,"starred":false,"owner":{"type":"team","id":"3f139cfa303b0c24","login":"danielefadda","name":"","avatar_url":"https://avatars-next.observableusercontent.com/2e4d5f1c8929dbcff080c076f08005795f71679d9246ee69d8e5111b06834b6c","tier":"starter_2024"},"version":1627,"publish_version":1627,"role":null,"authored":false,"authors":[{"type":"individual","id":"e7b357fa951249c6","login":"danielefadda","name":"","avatar_url":"https://avatars-next.observableusercontent.com/2e4d5f1c8929dbcff080c076f08005795f71679d9246ee69d8e5111b06834b6c","tier":null}],"members":[{"type":"individual","id":"e7b357fa951249c6","login":"danielefadda","name":"","avatar_url":"https://avatars-next.observableusercontent.com/2e4d5f1c8929dbcff080c076f08005795f71679d9246ee69d8e5111b06834b6c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":18,"collection":null,"type":"notebook","body":{"title":"Esercitazione 1 - aprile:","cells":[{"id":0,"value":"md`# Esercitazione 1 - aprile:\n## Ricostruiamo Gapminder `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"md`## Data Preparation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"md`importiamo i dati già caricati online`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"onlineFile = d3.json(\n \"https://cdn.rawgit.com/timruffles/gapminder-data-json/74aee1c2878e92608a6219c27986e7cd96154482/gapminder.min.json\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"md`scarichiamo da Kaggle.com lo stesso dataset, con qualche riga in più: [source](https://www.kaggle.com/aman1py/gapminder)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":165,"value":"gm_K = FileAttachment(\"gapminder_tidy.csv\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":182,"value":"md`e facciamo il parsing del file`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"gm_K.text().then(txt => d3.dsvFormat(',').parse(txt, d3.autoType))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"md`Oppure importiamo la funzione del parsing già creata in un precedente foglio. L'import viene scritto per consuetudine alla fine del foglio observable, nella sezione *appendice*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"value":"dataset = parseLocalFile(gm_K, ',')\n// parseLocalFile() è la funzione vista durante la lezione che viene importata nel foglio corrente, per i dettagli su come importarla, guardare la sezione Appendice in fondo al foglio","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"md`print delle prime 5 righe`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1497,"value":"dataset.slice(0, 5)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"printTable(dataset.slice(0, 5))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":209,"value":"md`print delle ultime 5 righe del dataset e grazie a [Wikipedia](https://it.wikipedia.org/wiki/Isole_%C3%85land?oldformat=true) scopro che \"Åland\" è una provincia autonoma della Finlandia in cui si parla svedese`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":212,"value":"printTable(dataset.slice(-5))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":308,"value":"md`estraggo il nome delle colonne e lo salvo in una variabile`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":312,"value":"colonne = dataset.columns","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":324,"value":"md`Faccio un controllo preliminare sul mio dataset`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":320,"value":"descrizioneDati = dataDescribe(dataset)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":362,"value":"md`conto il numero di righe e di colonne`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":360,"value":"md`**${dataset.length}** righe, **${Object.keys(dataset[0]).length}** colonne`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":240,"value":"md`Decido che la variabile su cui effettuerò tutte le analisi è il *gdp* per cui decido di eliminare tutte le righe (oggetti) che non hanno questo valore.\n\nControllo quindi in quali stati accade:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":225,"value":"toRemove = d3\n .set(dataset.filter(d => d.gdp != null).map(d => d.Country))\n .values()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":251,"value":"md`Creo una copia del dataset filtrato`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":256,"value":"gm = dataset.filter(d => d.gdp != null)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":338,"value":"md`## Visualizzare i dati`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":342,"value":"FileAttachment(\"plotly_structure.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1288,"value":"md`La documentazione di Plotly per Javascript la trovate a questo [link](https://plotly.com/javascript/)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":348,"value":"md`## Un po' di Spoiler\n\nDi seguito, qualche anticipazione su cosa troverete in questo foglio Observable:\n\n- Selezionare soli i dati dell'Italia e visualizzare l'andamento della fertitlità\n- Visualizzare la stessa proprietà per tutta l'Europa\n- Mostrare gli aggregati per continente della popolazione\n- Costruzione di gapminder:\n - Step 1: Scegliere l'ultimo anno disponibile nel dataset e creare il primo scatterplot usando le variabili gdp, fertilità\n - Step 2: Pesare le bubble per popolazione e colorarle per continente\n - Step 3: Creare uno slider per l'anno\n - Step 4: Parametrizzare gli assi x e y\n- Bonus track: fare un boxplot di una variabile`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":375,"value":"md`### Selezionare solo l'Italia e plottare il tasso di fertitlità`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":336,"value":"dataItaly = gm.filter(d => d.Country === \"Italy\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":383,"value":"fItaly = {\n const trace1 = {\n x: dataItaly.map((d, i) => d.Year),\n y: dataItaly.map((d, i) => d.fertility),\n // type: 'scatter', // di deafault plotly assume che il grafico sia uno scatterplot\n mode: 'lines+markers'\n };\n\n const data = [trace1];\n const layout = {\n width: 800,\n title: `Indice di fertilità in Italia dal ${d3.min(\n dataItaly.map(d => d.Year)\n )} al ${d3.max(dataItaly.map(d => d.Year))}`,\n yaxis: {\n title: 'fertilità'\n }\n };\n\n const div = DOM.element('div');\n Plotly.newPlot(div, data, layout);\n return div;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1308,"value":"md`### Visualizzare la proprietà fertitlità per tutti gli stati dell'Europa e Asia Centrale`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":410,"value":"regions = d3.set(gm.map(d => d.region)).values()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":415,"value":"statiEuropa = d3\n .set(gm.filter(d => d.region === \"Europe & Central Asia\").map(d => d.Country))\n .values()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1536,"value":"statiEuropa","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":551,"value":"{\n const data = statiEuropa.map(d => ({\n x: gm.filter(f => f.Country === d).map(d => d.Year),\n y: gm.filter(f => f.Country === d).map(d => d.fertility),\n name: d,\n opacity: 0.5\n }));\n\n const layout = {\n title: `Fertitlità`,\n width: width,\n height: (width / 3) * 2\n };\n\n const div = DOM.element('div');\n Plotly.newPlot(div, data, layout);\n return div;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":596,"value":"md`### Visualizzare nel tempo la fertitilità dell'Italia, confrontandola con gli altri stati appartenenti al gruppo: *Europe & Central Asia*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":404,"value":"country_cumulative_cases_by_time = {\n const data = statiEuropa.map(d => ({\n x: dataset.filter(f => f.Country === d).map((d, i) => d.Year),\n y: dataset.filter(f => f.Country === d).map(d => d.fertility),\n name: d,\n opacity: d === \"Italy\" ? 1 : 0.5,\n line: {\n width: d === \"Italy\" ? 3 : 1,\n color: d === \"Italy\" ? \"red\" : \"gray\",\n shape: \"spline\"\n }\n }));\n\n const layout = {\n title: `Andamento della fertilità in Italia`,\n width: width,\n height: (width / 3) * 2,\n showlegend: false,\n hovermode: 'closest',\n xaxis: {\n showgrid: false\n },\n yaxis: {\n showgrid: true,\n gridwidth: 0.25,\n linecolor: '#636363',\n title: `fertilità`\n }\n };\n\n const div = DOM.element('div');\n Plotly.newPlot(div, data, layout);\n return div;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":563,"value":"md`**[IMPROVEMENT]** Permettere all'utente di selezionare lo stato desiderato e migliorare i nomi degli indicatori osservabili`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":607,"value":"md`\n- improvement di interazione: \n - Permettere la scelta della variabile da visualizzare sull'asse delle y\n - Visualizzare solamente i dati della line su cui è posizionato il mouse\n\n- improvement grafici:\n - Mettere in evidenza solo l'Italia\n - Migliorare la formattazione del testo al passaggio del mouse\n - Evidenziare nel titolo gli elementi che cambiano usando i selettori\n - Ammorbidire le curve`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1316,"value":"md`Seleziono gli indicatori che voglio plottare`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":447,"value":"toCompare = [\"fertility\", \"life\", \"population\", \"child_mortality\", \"gdp\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":452,"value":"viewof selectVariable = select({ value: 'gdp', options: toCompare })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":621,"value":"viewof selectEuState = select({ value: 'Italy', options: statiEuropa })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":628,"value":"toCompare2 = [\n { val: 'fertility', name: \"fertilità\", measure: \"figli per famiglia\" },\n { val: \"life\", name: \"aspettativa di vita\", measure: \"anni\" },\n { val: \"population\", name: \"popolazione\", measure: \" abitanti\" },\n { val: \"child_mortality\", name: \"mortalità infantile\", measure: \"‰\" },\n { val: \"gdp\", name: \"prodotto interno lordo\", measure: \"$\" }\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":880,"value":"toCompare2.find(obj => obj.val == 'fertility').name","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":847,"value":"viewof selectVariable2 = select({\n value: 'gdp',\n options: toCompare2.map(d => {\n return { label: d.name, value: d.val };\n })\n // display: toCompare2.find(obj => obj.val == 'fertility').name\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":619,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":644,"value":"md`### Aggregare i dati per continente e mostrare la popolazione dell'ultimo anno disponibile`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1372,"value":"md`Seleziono tutti i dati solo per l'ultimo anno disponibile`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1555,"value":"anno = d3.max(gm.map(e => e.Year))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":762,"value":"lastYearData = gm.filter(d => d.Year == anno)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":671,"value":"md`Numero di stati per continente (group by)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":667,"value":"statesCount = d3\n .nest()\n .key(d => d.region)\n .rollup(v => v.length)\n .entries(lastYearData)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":714,"value":"md`Numero di abitanti per continente`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":677,"value":"gByContinent = d3\n .nest()\n .key(d => d.region) // variabile su cui aggregare\n .rollup(v => d3.sum(v, d => d.population)) // funzione di rollup e campo su cui applicarla\n .entries(lastYearData) // dataset","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1364,"value":"md`Esempio di group by su più chiavi:\n\nNumero di abitanti per continente per ciascun anno`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1356,"value":"d3\n .nest()\n .key(d => d.region)\n .key(d => d.Year)\n .rollup(v => d3.sum(v, d => d.population))\n .entries(gm)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1377,"value":"md`Parsing dei dati per ritornare ad una formattazione dei dati più leggibile`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":681,"value":"popByRegionData = gByContinent.map(d => {\n return {\n continent: d.key,\n population: d.value\n };\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":701,"value":"{\n const trace = {\n x: popByRegionData.map(d => d.continent),\n y: popByRegionData.map(d => d.population),\n type: 'bar'\n };\n const data = [trace];\n\n const layout = {\n title: `Popolazione`,\n width: width,\n height: (width / 3) * 2\n };\n\n const div = DOM.element('div');\n Plotly.newPlot(div, data, layout);\n return div;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":718,"value":"md`**[IMPROVEMENT]** migliorare la leggibilità del grafico`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":732,"value":"popByRegionDataS = popByRegionData.sort((a, b) =>\n d3.descending(a.population, b.population)\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1570,"value":"d3.max(popByRegionDataS.map(d => d.continent.length))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":723,"value":"{\n const trace = {\n y: popByRegionDataS.map(d => d.continent),\n x: popByRegionDataS.map(d => d.population), // invertire l'ordine degli assi se {orientation: 'h'}\n type: 'bar',\n orientation: 'h', // ora le scritte sono leggibili in maniera più naturale\n hovertemplate: '%{x: ,.0f}Popolazione' // \",\" il separatore delle migliaia \".0f\" è il numero di decimali a cui arrotondare\n };\n const data = [trace];\n\n const layout = {\n title: `Popolazione`,\n height: width / 2,\n margin: {\n // l: 180, // aumenta il margine sinistro \"l:\"\n l: d3.max(popByRegionDataS.map(d => d.continent.length)) * 7, // aumenta in funzione della lunghezza delle stringhe\n pad: 5 // distanzia le scritte dall'asse \"pad:\"\n }\n };\n\n const div = DOM.element('div');\n Plotly.newPlot(div, data, layout);\n return div;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":393,"value":"md`### Scegliere l'ultimo anno disponibile e creare il primo scatterplot`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":897,"value":"cYear = 2013","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1473,"value":"md`filtro il dataset usando cYear`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":399,"value":"selectedYear = gm.filter(d => d.Year === cYear)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":903,"value":"{\n const trace = {\n x: selectedYear.map(d => d.gdp),\n y: selectedYear.map(d => d.fertility), \n text: selectedYear.map(d => d.Country),\n type: 'scatter',\n mode: 'markers'\n };\n const data = [trace];\n\n const layout = {\n title: `Building Gapminder - anno ${cYear}`,\n width: width,\n height: (width * 2) / 3,\n xaxis: {\n title: 'gdp'\n },\n yaxis: {\n title: 'fertility'\n }\n };\n\n const div = DOM.element('div');\n Plotly.newPlot(div, data, layout);\n return div;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":921,"value":"md`### Pesare le bubble per popolazione e colorarle per regione`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1476,"value":"md`Creo una scala categorica per mappare i colori delle regioni`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":934,"value":"regions","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":933,"value":"colorScale = d3\n .scaleOrdinal()\n .domain(regions) // array di valori\n .range(d3.schemeCategory10)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1459,"value":"md`Reference delle scale di colore di d3: [link](https://github.com/d3/d3-scale-chromatic/blob/master/README.md)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":949,"value":"populationScale = d3\n .scaleSqrt()\n .domain(d3.extent(gm.map(d => d.population))) //max min del range da mappare\n .range([5, 80])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":955,"value":"d3.extent(gm.map(d => d.population))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":974,"value":"{\n const trace = {\n x: selectedYear.map(d => d.gdp),\n y: selectedYear.map(d => d.fertility),\n text: selectedYear.map(d => d.Country),\n type: 'scatter',\n mode: 'markers',\n opacity: 0.7,\n marker: {\n color: selectedYear.map(d => colorScale(d.region)),\n size: selectedYear.map(d => populationScale(d.population)) // ridimensionamento utilizzando le scale di d3JS\n\n // // *** alternativa ridimensionamento con plotly ***\n\n // size: lastYear.map(d => d.population),\n // sizemin: 3,\n // sizeref: 300000, // fattore di scala (funziona sul max della serie)\n // sizemode: 'area'\n }\n };\n const data = [trace];\n\n const layout = {\n title: `Building Gapminder - anno ${cYear}`,\n width: width,\n height: (width * 2) / 3,\n xaxis: {\n title: 'gdp'\n },\n yaxis: {\n title: 'fertility'\n }\n };\n\n const div = DOM.element('div');\n Plotly.newPlot(div, data, layout);\n return div;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1032,"value":"md`### Aggiungere uno slider per la selezione dell'anno`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1025,"value":"allYears = d3.set(gm.map(d => d.Year)).values()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1465,"value":"md`creo il dataset dell'anno selezionato`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1055,"value":"visualizedYear = gm.filter(d => d.Year === currentYear)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1469,"value":"md`ricreo una selezione delle variabili che voglio visualizzare sugli assi`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1436,"value":"toCompare2.map(d => d.val)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1085,"value":"viewof gmX = select({ value: 'life', options: toCompare2.map(d => d.val) })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1078,"value":"viewof gmY = select({ value: 'fertility', options: toCompare2.map(d => d.val) })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1034,"value":"viewof currentYear = slider({\n min: d3.min(allYears),\n max: d3.max(allYears),\n step: 1,\n value: d3.min(allYears),\n title: \"Anno\",\n description: `Seleziona l'anno da visualizzare: ${d3.min(\n allYears\n )} - ${d3.max(allYears)}`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1595,"value":"-(d3.extent(gm.map(d => d[`${gmX}`]))[1] / 10)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1052,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1220,"value":"md`## Bonus Track`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1223,"value":"{\n const trace = {\n y: visualizedYear.map(d => d[`${gmX}`]),\n boxpoints: 'all',\n jitter: 0.3,\n pointpos: -1.8,\n type: 'box',\n text: visualizedYear.map(d => d[`Country`]),\n name: `${gmX.replace('_', ' ')}`\n };\n const data = [trace];\n const layout = {\n title: `${gmX.replace('_', ' ')}`\n };\n const div = DOM.element('div');\n Plotly.newPlot(div, data, layout);\n return div;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"md`# Appendice`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"md`qui per consuetudine andranno caricate le librerie esterne e i riferimenti ad altri fogli observable`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"d3 = require('d3@v5')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"import {\n parseLocalFile,\n dataDescribe\n} from \"@rinziv/introduction-to-js-and-observable\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"import { printTable } from '@uwdata/data-utilities'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":386,"value":"Plotly = require(\"https://cdn.plot.ly/plotly-latest.min.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":453,"value":"import { select, slider } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 30:"$2f:body"