31:[] 2f:{"title":"Introduction to JS and Observable","cells":[{"id":0,"value":"md`# Introduction to JS and Observable`","pinned":false,"hidden":false,"mode":"ojs"},{"id":192,"value":"md`MD sta per Mark Down e comprende la possibilità di formattare il testo in _corsivo_, **bold**, and \\`monospace\\`, così come potete inserire degli [hyperlink](https://www.youtube.com/watch?v=xfr64zoBTAQ).\n\n- Ah, e narutralmente le liste\n- Mai dimenticare\n- le liste\n - e le liste\n - di liste\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":856,"value":"md`# Observable`","pinned":false,"hidden":false,"mode":"ojs"},{"id":437,"value":"cells = md`## Celle\n\nShortcut per muoversi più agevolmente nel foglio Observable\n

${keys(\"Shift-Enter\")}: Esegui la cella corrente.
${keys(mac ? \"Alt-Tab\" : \"Alt-Shift-Down\")}: Spostati alla cella successiva
${keys(mac ? \"Alt-Shift-Tab\" : \"Alt-Shift-Up\")}: Spostati alla cella precedente
${keys(\"Alt-Enter\")}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":861,"value":"md`### Expressions\nLe expression possono racchiudere definizioni semplici (dichiarazioni di variabili globali) o semplici calcoli\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":865,"value":"Pippo = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":1201,"value":"md`L'assegnazione di un nome alla cella, permette di poter richiamare il valore restituito in altre celle. Ad esempio:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1204,"value":"Pippo+500","pinned":true,"hidden":false,"mode":"ojs"},{"id":869,"value":"md`### Blocks\nI blocchi sono circondati da parentesi graffe, e si usano per definizioni più complesse rispetto alle espressioni (possono andare su più righe rispetto alle expressions)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":873,"value":"{\n let a = 0;\n for (let i = 1; i <= 10; ++i) {\n a += i;\n }\n return a;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1196,"value":"md`Le variabili definite all'interno di un blocco sono variabili locali e non possono essere viste all'esterno `","pinned":true,"hidden":false,"mode":"ojs"},{"id":1193,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":977,"value":"md`Le celle non vengono eseguite dall'alto verso il basso, ma sono \"reactive\": aggiornando una cella si aggiornano tutte quelle collegate (come avviene in Excel)\n\nN.B. per questo motivo le variabili possono essere definite una sola volta.\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1387,"value":"md`## Views\n\n*views* sono un tipo speciale di celle che vengono controllate attraverso interfacce utente\n\nUna *view* consiste in due parti:\n\n1. Una *view*, che è generalmente una interfaccia utente appartenente al DOM.\n\n2. il *value*, che può essere un qualsiasi valore JavaScript.\n\nPer esempio, una vista può essere un elemento *range* dell'html il cui *value* è rappresentato da un singolo numero.`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1219,"value":"md`Cambiando una cella collegata ad altre si aggiornano tutte contemporaneamente`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1231,"value":"Pippo + val","pinned":true,"hidden":false,"mode":"ojs"},{"id":1223,"value":"viewof val = slider({\n min: 0, \n max: 100, \n step: 1,\n description: \"Seleziona un valore tra 1 e 100\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1393,"value":"md`N.B. Per caricare nel nostro notebook le *view* stiamo importando i componenti, già scritti, da un altro notebook [@jashkenas/inputs](https://observablehq.com/@jashkenas/inputs)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1265,"value":"md`### Importare altri notebook`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1268,"value":"md`In Observable è possibile importare delle funzioni da utilizzare all'interno di un altro notebook. In questo esempio importeremo la funzione \\`table\\` utile a visualizzare meglio i dati`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1226,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1217,"value":"md`## Tipi di cella`","pinned":false,"hidden":false,"mode":"ojs"},{"id":986,"value":"md`Esiste un solo tipo di cella (a differenza dei jupyter notebook), pertanto sarà la dichiarazione iniziale a specificare il comportamento della cella stessa.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":980,"value":"svg``","pinned":true,"hidden":false,"mode":"ojs"},{"id":989,"value":"tex`-b \\pm \\sqrt{a + b} \\over c`","pinned":true,"hidden":false,"mode":"ojs"},{"id":1236,"value":"html`

Questo è un DIV

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":997,"value":"md`### I vantaggi del coding con Observable`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1000,"value":"md`\n- **Condivisione con un click. ** Cliccando su “Publish” il notebook viene reso pubblico per una condivisione selettiva premere su enable link sharing all'interno del menu **⋯** menu in alto a destra. Altri utenti che visualizzano il notebook possono farne un fork e proseguire con le proprie modifiche o caricare i propri dati.\n\n- **Download e embed.** È possibile condividere una visualizzazione senza mostrare il codice [(embed a cell in another website)](https://observablehq.com/@observablehq/downloading-and-embedding-notebooks). Inoltre è possibile scaricare il codice di un notebook come se fosse un modulo ed usarlo in altri codici Javascript.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1269,"value":"import {table} from \"@tmcw/tables@513\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":973,"value":"md`# JS`","pinned":false,"hidden":false,"mode":"ojs"},{"id":808,"value":"md`## Print`","pinned":false,"hidden":false,"mode":"ojs"},{"id":812,"value":"{\n console.log(\"Hello world\");\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":819,"value":"md`il risultato apparirà nella console del vostro browser`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"md`## Numeri`","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"md`Per convertire le stringhe in numeri`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"+\"1.23\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":26,"value":"md`valor _Null_ o meglio ancora: **N**ot **a** **N**umber`","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"a = NaN","pinned":true,"hidden":false,"mode":"ojs"},{"id":28,"value":"Math.random()","pinned":true,"hidden":false,"mode":"ojs"},{"id":47,"value":"md`Round a 2 decimali`","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"Math.round(213.53434225*100)/100","pinned":true,"hidden":false,"mode":"ojs"},{"id":52,"value":"md`## Buleani e operatori logici`","pinned":false,"hidden":false,"mode":"ojs"},{"id":488,"value":"md`\nBoolean values can be applied to logical operators.\n\n- &&: AND operator. True only if both values are true. \n- ||: OR operator. True if one or both values are true.\n- !: NOT operator. True if statement is false.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"!true","pinned":true,"hidden":false,"mode":"ojs"},{"id":62,"value":"md`OR`","pinned":false,"hidden":false,"mode":"ojs"},{"id":60,"value":"true || false","pinned":true,"hidden":false,"mode":"ojs"},{"id":65,"value":"md`AND`","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"true && false","pinned":true,"hidden":false,"mode":"ojs"},{"id":69,"value":"md`## Stringhe`","pinned":false,"hidden":false,"mode":"ojs"},{"id":73,"value":"stringa = \"I can concat two strings \"+'using plus (+) operator'","pinned":true,"hidden":false,"mode":"ojs"},{"id":853,"value":"md`ci sono diverse proprietà applicabili alle stringhe`","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"stringa.length","pinned":true,"hidden":false,"mode":"ojs"},{"id":842,"value":"md`ci sono diversi metodi applicabili alle stringhe`","pinned":false,"hidden":false,"mode":"ojs"},{"id":845,"value":"stringa.toUpperCase()","pinned":true,"hidden":false,"mode":"ojs"},{"id":875,"value":"stringa.replace(\"e\", \"3\");\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":848,"value":"stringa.split(' ')","pinned":true,"hidden":false,"mode":"ojs"},{"id":886,"value":"md`trova la posizione della prima lettera \"c\"`","pinned":false,"hidden":false,"mode":"ojs"},{"id":879,"value":"stringa.indexOf(\"c\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":898,"value":"md`porzione di stringa dalla posizione 2 alla posizione 6`","pinned":false,"hidden":false,"mode":"ojs"},{"id":889,"value":"stringa.slice(2,5);","pinned":true,"hidden":false,"mode":"ojs"},{"id":83,"value":"name = \"Daniele Fadda\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":509,"value":"md`questa è una stringa variabile (Observable)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":87,"value":"md`Mi presento sono ${name}`","pinned":true,"hidden":false,"mode":"ojs"},{"id":491,"value":"md `\n### Null\nThe special *null* value does not belong to any of the types above. It refers to a \"non-existing object\", and can be thought of as \"nothing,\" \"empty,\" or \"value unknown.\" If we need to create an empty or unknown value to a variable, you can do so by assigning it null.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":494,"value":"md `\n### Undefined\nLike null, *undefined* does not fall into any of the standard primative types. However, unlike null, which is an assigned value, undefined means exactly that, that the value is not assigned.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":169,"value":"md`## data (and generic variables) containers:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":500,"value":"md`ARRAY`","pinned":false,"hidden":false,"mode":"ojs"},{"id":99,"value":"array = [2, 3, 5, 7, 11, 13]","pinned":true,"hidden":false,"mode":"ojs"},{"id":497,"value":"array[0]","pinned":true,"hidden":false,"mode":"ojs"},{"id":505,"value":"md`OBJECT`","pinned":false,"hidden":false,"mode":"ojs"},{"id":102,"value":"// come definire un oggetto (in Observable)\nid = ({\"nome\":\"James\",\"cognome\":\"Bond\"})\n/* javascript\nid = {\n id.nome = 'James'\n id.cognome = 'Bond'\n}*/","pinned":true,"hidden":false,"mode":"ojs"},{"id":113,"value":"md`Il mio nome è ${id.cognome}, ${id.nome} ${id.cognome}.`","pinned":true,"hidden":false,"mode":"ojs"},{"id":129,"value":"dataTest = [\n {nome:'Daniele',cognome:'Fadda'},\n {nome:'Salvo',cognome:'Rinzivillo'}\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":174,"value":"md`**OBSERVABLE:** Un piccolo trucco: puoi importare funzioni da altri notebook per usarli nel tuo, qui ad esempio importiamo una funzione per visualizzare gli oggetti in forma di tabella`","pinned":false,"hidden":false,"mode":"ojs"},{"id":172,"value":"import {printTable} from '@uwdata/data-utilities'","pinned":false,"hidden":false,"mode":"ojs"},{"id":177,"value":"printTable(dataTest)","pinned":true,"hidden":false,"mode":"ojs"},{"id":133,"value":"md`## Functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":144,"value":"md`Dichiarare una funzione (JS classico):`","pinned":false,"hidden":false,"mode":"ojs"},{"id":140,"value":"function sommami(a, b){ // function signature: name and input arguments\n return a+b; // function body, with return statement for output\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":151,"value":"md`invocare una funzione:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":154,"value":"sommami(\"Daniele \",\"Fadda\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":162,"value":"md`arrow functions [**SALVO**, io scriverei due righe sulla differenza tra le due (a livello teorico)]`","pinned":false,"hidden":false,"mode":"ojs"},{"id":165,"value":"sommami2 = (a,b) => a+b","pinned":true,"hidden":false,"mode":"ojs"},{"id":167,"value":"sommami2(3,6)","pinned":true,"hidden":false,"mode":"ojs"},{"id":205,"value":"md`# Data Management`","pinned":false,"hidden":false,"mode":"ojs"},{"id":457,"value":"md`## Upload dei dati nel notebook:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":464,"value":"md`Il modo più veloce per caricare dei dati in un Notebook è usare il [file attachment](https://observablehq.com/@observablehq/file-attachments).\n\n_Premi_ ${keys(\"Cmd-Shift-U\")} mentre stai editando una cella o apri il pannello attraverso il menu … e trascina il file nel pannello.\n\nPremi su: *Copy code* e il file sarà inserito.\n\nPer visualizzarlo in formato testuale aggiungi alla stringa generata *.text()*`","pinned":false,"hidden":false,"mode":"ojs"},{"id":793,"value":"md`## Caricare i dati da un file esterno (online):`","pinned":false,"hidden":false,"mode":"ojs"},{"id":913,"value":"md`Per caricare un file che si trova online (ad esempio su un repository github) https://raw.githubusercontent.com/danielefadda/dvva2017/master/dipinti/assets/joined_data_definitivo.csv`","pinned":false,"hidden":false,"mode":"ojs"},{"id":926,"value":"onlineFile = 'https://raw.githubusercontent.com/danielefadda/dvva2017/master/dipinti/assets/joined_data_definitivo.csv'","pinned":true,"hidden":false,"mode":"ojs"},{"id":1040,"value":"md`una volta caricato, bisogna farne il parsing per convertirlo in un array:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":911,"value":"d3.csv(onlineFile, d3.autoType)","pinned":true,"hidden":false,"mode":"ojs"},{"id":920,"value":"md`Attenzione: d3.csv fa il parsing solo di file con la virgola!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":925,"value":"paintings = d3.text(onlineFile).then(\n (txt) => d3.dsvFormat(\";\").parse(txt))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1051,"value":"md`esempio di file json caricato da un link online e parsato con d3`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1049,"value":"jsonData = d3.json(\"https://cdn.rawgit.com/vlandham/js_data/master/data/employees.json\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1037,"value":"md`## Caricare i dati da un file locale (senza aggiungerlo al notebook):\nScaricare i dati dal seguente link: https://raw.githubusercontent.com/plotly/datasets/master/iris.csv e salvarli localmente in un file _iris.csv_\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":798,"value":"viewof localFile = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":946,"value":"localFile.text()","pinned":true,"hidden":false,"mode":"ojs"},{"id":757,"value":"function parseLocalFile(file, separatore){\n return file.text().then(txt => d3.dsvFormat(separatore).parse(txt, d3.autoType));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1402,"value":"md`### Manual Parsing`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1536,"value":"iris = parseLocalFile(localFile,',')","pinned":true,"hidden":false,"mode":"ojs"},{"id":1312,"value":"parseDateTime = d3.timeParse(\"%Y-%m-%d %H:%M:%S\");","pinned":true,"hidden":false,"mode":"ojs"},{"id":1299,"value":"paintingManualParsing = localFile.text()\n.then(txt => d3.dsvFormat(',').parse(txt, d => {\n return {\n ...d,\n SepalLenght: +d.SepalLenght,\n SepalWidth: +d.SepalWidth,\n PetalLenght: +d.PetalLenght,\n PetalWidth: +d.PetalWidth,\n \n }\n })\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1375,"value":"md`Per maggiori dettagli sulla formattazione delle date: [link](https://github.com/d3/d3-time-format)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1405,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1418,"value":"md`## Data exploration`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1409,"value":"md`Contare il numero di righe e colonne del dataset`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1070,"value":"md`**${iris.length}** righe, **${Object.keys(iris[0]).length}** colonne`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1383,"value":"printTable(iris.slice(0,2))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1118,"value":"md`Estraggo l'elenco delle colonne dal dataset`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1073,"value":"colonne = iris.columns","pinned":true,"hidden":false,"mode":"ojs"},{"id":1496,"value":"md`Calcolo la durata media di tutti gli spostamenti`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1091,"value":"d3.mean(iris.map(d => d.SepalWidth))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1132,"value":"md`Creo ora una funzione simile al describe di Pandas:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1136,"value":"function dataDescribe (data) {\n let descrittore = {};\n data.columns.map(d => {\n descrittore[d] = {};\n descrittore[d][\"type\"] = typeof(data[0][d]);\n if(typeof(data[0][d]) === \"number\"){\n descrittore[d][\"count\"] = data.filter(e => e[d]).length;\n descrittore[d][\"mean\"] = d3.mean(data.map(e => e[d]));\n descrittore[d][\"min\"] = d3.min(data.map(e => e[d]));\n descrittore[d][\"max\"] = d3.max(data.map(e => e[d]));\n descrittore[d][\"median\"] = d3.median(data.map(e => e[d]));\n descrittore[d][\"deviation\"] = d3.deviation(data.map(e => e[d]));\n } \n })\n return descrittore\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1435,"value":"dataDescribe(iris)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1045,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1450,"value":"md`## Data enrichment`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1483,"value":"md`Aggiungere un nuovo attributo (colonna) come risultato della manipolazione di un'altra colonna.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1445,"value":"aree = iris.map(d => d.SepalWidth * d.SepalLength)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1114,"value":"md`calcolo la durata media degli spostamenti in minuti (n.b nel dataset è in secondi. Per approssimare alla prima cifra decimale devo moltiplicare il risultato * 10 e poi dividerlo per 10)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":278,"value":"md`\nThere are many [array methods](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) helpful for transforming data in this Tidy form, an array of similar objects. \\`map\\` and \\`filter\\` are the most common:\n\n* \\`data.map(x => expr)\\` is equivalent to the Python list comprehension: \\`[expr for x in data]\\`\n* \\`data.map(x => {...x, newProp: x.prop1 + x.prop2})\\` is analogous to a Pandas data frame assignment: \\`df[\"newProp\"] = df[\"prop1\"] + df[\"prop2\"]\\`\n* \\`data.filter(x => expr)\\` is equivalent to the Python list comprehension: \\`[x for x in data if expr]\\`\n* \\`data.filter(x => x.prop === 7)\\` is analogous to a Pandas data frame slice: \\`df[df.prop == 7]\\`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":515,"value":"md`# Notes`","pinned":false,"hidden":false,"mode":"ojs"},{"id":517,"value":"md`Per approfondire l'uso di HTML questo è un ottimo [Notebook](https://observablehq.com/@ruichenn/week-1a-introduction-to-html-and-javascript?collection=@ruichenn/class-material/2)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":347,"value":"md`# Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":431,"value":"function keys(keyset) {\n return mac\n ? keyWords(keyset) === keySymbols(keyset)\n ? html`

${keyWords(keyset)}

`\n : html`

${keyWords(keyset)} ${keySymbols(\n keyset\n )}

`\n : html`

${keyWords(keyset)}

`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":433,"value":"import {mac, keySymbols, keyWords} from \"@mbostock/keys\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":544,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}