29:null 2a:["$","title",null,{"children":"Signore e signori, ecco a voi i dati! | Andrea Mignone | Observable"}] 2f:T444,// fonte https://github.com/opendatasicilia/comuni-italiani/blob/main/dati/main.csv comuniCSV = d3.csvParse(`comune,pro_com_t,lat,long,den_prov,sigla,den_reg,cod_reg,cap,cf,pec,mail,sito_web,wikipedia,stemma Agliè,001001,45.367055,7.766918,Torino,TO,Piemonte,1,10011,83501790014,protocollo@pec.comune.aglie.to.it,protocollo@comune.aglie.to.it,http://comune.aglie.to.it,https://it.wikipedia.org/wiki/Agliè,https://raw.githubusercontent.com/opendatasicilia/comuni-italiani/main/img/stemmi_cod_istat/001001.jpg Airasca,001002,44.917042,7.484321,Torino,TO,Piemonte,1,10060,85002910017,airasca@postemailcertificata.it,protocollo@comune.airasca.to.it,http://comune.airasca.to.it,https://it.wikipedia.org/wiki/Airasca,https://raw.githubusercontent.com/opendatasicilia/comuni-italiani/main/img/stemmi_cod_istat/001002.jpg Ala di Stura,001003,45.31515,7.305909,Torino,TO,Piemonte,1,10070,83002970016,comunealadistura@pec.it,,http://comunealadistura.it,https://it.wikipedia.org/wiki/Ala_di_Stura,https://raw.githubusercontent.com/opendatasicilia/comuni-italiani/main/img/stemmi_cod_istat/001003.jpg`)30:[{"id":"0823f12267886e3e517204e5069ceb0299ef159b75f040cca9004f5db9d326483cdafbd0e20f3c03e2e318c80b8175d568082c02957d687a09714bf364bc6967","href":"https://static.observableusercontent.com/files/0823f12267886e3e517204e5069ceb0299ef159b75f040cca9004f5db9d326483cdafbd0e20f3c03e2e318c80b8175d568082c02957d687a09714bf364bc6967","name":"giphy.gif","type":"image/gif","lastModified":1651847634486.957,"size":1450469},{"id":"cd904f29d6ff21a07e00c1cbcafe35d6c201dc5dc87fd19586764a43247ad92122fbd225496132316d2ef6b1dae6ff574ff5c537c007ffd1eb524e1516ce3163","href":"https://static.observableusercontent.com/files/cd904f29d6ff21a07e00c1cbcafe35d6c201dc5dc87fd19586764a43247ad92122fbd225496132316d2ef6b1dae6ff574ff5c537c007ffd1eb524e1516ce3163","name":"main.txt","type":"text/plain","lastModified":1651851339049.035,"size":2484121},{"id":"92e1b57993e6074162148111b743ff21ada2c3298f30c88af103eca2d5c958a9d27dd8cc99339fe0e00ef7ea38d014654702ac7a4caf995df51925ac8acdb461","href":"https://static.observableusercontent.com/files/92e1b57993e6074162148111b743ff21ada2c3298f30c88af103eca2d5c958a9d27dd8cc99339fe0e00ef7ea38d014654702ac7a4caf995df51925ac8acdb461","name":"image.png","type":"image/png","lastModified":1651852010182.481,"size":30369},{"id":"f415cb2990dac59159498e263f3e0d01045b3503f2fba149f465f747f87cc4df8357354b0165a22542c549cad99ecf31bfeca77efa8202c2e5eeabcfb7fd4d1d","href":"https://static.observableusercontent.com/files/f415cb2990dac59159498e263f3e0d01045b3503f2fba149f465f747f87cc4df8357354b0165a22542c549cad99ecf31bfeca77efa8202c2e5eeabcfb7fd4d1d","name":"schema.jpeg","type":"image/jpeg","lastModified":1652438208819.505,"size":78947},{"id":"b3711cfd9bdf50cbe4e74751164d28e907ce366cd4bf56a39a980a48fdc5f998c42a019716a8033e2b54defdd97e4a55ebe4f6464b4f0678ea0311532605a115","href":"https://static.observableusercontent.com/files/b3711cfd9bdf50cbe4e74751164d28e907ce366cd4bf56a39a980a48fdc5f998c42a019716a8033e2b54defdd97e4a55ebe4f6464b4f0678ea0311532605a115","name":"chinook.db","type":"application/x-sqlite3","lastModified":1652438247831.577,"size":884736}] 2d:{"id":"fd6d0fed5a9b2fea","slug":"observable-101-dati","title":"Signore e signori, ecco a voi i dati!","thumbnail":"2badaed6c716d7c0f393201d3f5b328346aadc068a27623e23352be7baef2e1b","access_level":"public","create_time":"$D2022-05-06T14:23:31.611Z","update_time":"$D2022-06-03T09:11:45.273Z","view_time":null,"first_public_time":"$D2022-05-17T14:01:19.281Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"88f99d18d1aef515","login":"floatingpurr","name":"Andrea Mignone","avatar_url":"https://avatars-next.observableusercontent.com/3a51be34742b049fe39505055151eccd7f613bd00b2547203960fe5684ed9bab","tier":"starter_2024"},"version":416,"publish_version":416,"role":null,"authored":false,"authors":[{"type":"individual","id":"820f3b923b10f6c4","login":"floatingpurr","name":"Andrea Mignone","avatar_url":"https://avatars-next.observableusercontent.com/3a51be34742b049fe39505055151eccd7f613bd00b2547203960fe5684ed9bab","tier":null}],"members":[{"type":"individual","id":"820f3b923b10f6c4","login":"floatingpurr","name":"Andrea Mignone","avatar_url":"https://avatars-next.observableusercontent.com/3a51be34742b049fe39505055151eccd7f613bd00b2547203960fe5684ed9bab","tier":null,"role":"editor"},{"type":"individual","id":"29cc64fdabaa8a07","login":"floatingpurr-demo","name":"Andrea Mignone (demo account)","avatar_url":"https://avatars-next.observableusercontent.com/c53b4e6c34435e13ca0d5d70f2c68900dcdf68707af50b8ecc5bc8abc27fbd3d","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"3f06447db5d918a3","slug":"observable-101","title":"Observable 101 🤌","owner":{"id":"88f99d18d1aef515","login":"floatingpurr","name":"Andrea Mignone"}},"type":"notebook","body":{"title":"Signore e signori, ecco a voi i dati!","cells":[{"id":0,"value":"# Signore e signori, ecco a voi i dati!\n\nObservable è una piattaforma fortemente _data-oriented_. A questo punto allora abbiamo proprio bisogno di loro, dei nostri ospiti d'onore.\n\n> **Dati**, _orsù_, è il vostro momento. Fatevi avanti!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":20,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":49,"value":"> 👉 Observable, mette a disposizione **diverse strategie** per importare il un dataset dentro a un notebook","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":55,"value":"## Metodo inline\n\n> 👉 Il modo più semplice per importare un dataset è **incollarlo** direttamente in una cella seguendo una struttura dati","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":68,"value":"province = [\n \"Agrigento\",\n \"Caltanissetta\",\n \"Catania\",\n \"Enna\",\n \"Messina\",\n \"Palermo\",\n \"Ragusa\",\n \"Siracusa\"\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"> 👉 **Bonus:** possiamo visualizzare facilmente un dataset con una [view tabellare](https://observablehq.com/@observablehq/input-table)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":81,"value":"viewof table = Inputs.table(comuniCSV, { required: false })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"Hai selezionato i seguenti comuni: ${ table.map(d => `${d.comune}, `) }","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":141,"value":"## I cari e vecchi file\n\n> 👉 Possiamo **allegare un file** ad un notebook. Utilizzare il menu in alto a destra per aggiungere un file ad un notebook. _Psssst:_ possiamo anche allegare un database [SQLite](https://observablehq.com/@observablehq/sqlite)!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":192,"value":"

I file possono essere allegati direttamente ad un notebook

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":208,"value":"Il contenuto informativo del file può essere poi consumato dal notebook","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":148,"value":"file = FileAttachment(\"main.txt\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"// Abbiamo salvato in questa cella il contenuto di un CSV da circa 8k righe!\ncomuniFile = file.csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":220,"value":"**Taa-daaan! 🪄**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":168,"value":"Inputs.table(comuniFile, { required: false })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"## Dati direttamente dal server (API & friends)! 🔥🔥🔥\n\n> 👉 Quando i dati sono disponibili su un **server pubblico**, Observable ci permette di integrarli direttamente con una **chiamata remota**\n\nPer questo genere do cose, usiamo il modulo [`d3-fetch`](https://github.com/d3/d3-fetch). Per esempio, [`d3.csv`](https://github.com/d3/d3-fetch#csv) ci permette di recuperare e trattare dati in formato `csv`:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":237,"value":"// Eccoli, sempre gli stessi ma caricati \"live\", all'esecuzione della cella.\n// Prova ad osservare cosa succede nel tab di rete degli strumenti di sviluppo del tuo browser quando esegui questa cella !\ndata = d3.csv(\n \"https://raw.githubusercontent.com/opendatasicilia/comuni-italiani/main/dati/main.csv\"\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":259,"value":"Possiamo fare la stessa cosa con un JSON. Per esempio per vedere dove sono gli alberi monumentali italiani:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":261,"value":"// fonte https://github.com/ondata/alberimonumentaliitalia/blob/master/alberiMonumentali.geojson\nalberi = d3.json(\n \"https://raw.githubusercontent.com/ondata/alberimonumentaliitalia/master/alberiMonumentali.geojson\"\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":290,"value":"... eccoli qui in formato tabellare:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":271,"value":"Inputs.table(\n alberi.features.map((d) => d.properties),\n { required: false }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":303,"value":"> 👉 Observable lavora nel browser. Per questo motivo, è necessario che il server che espone i dati supporti il [**CORS**](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) (o in alternativa appoggiarsi ad un [proxy](https://observablehq.com/@asg017/cors-anywhere-for-observables))","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":297,"value":"// Le API ISTAT non sembrano supportare il CORS (da verificare...)\nd3.json(\"https://sdmx.istat.it/SDMXWS/rest/dataflow?format=jsonstructure\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":322,"value":"> 👉 E' anche possible utilizzare [**API key o credenziali personali**](https://observablehq.com/@observablehq/secrets) in notebook privati non esposti al pubblico","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":308,"value":"## SQL","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":346,"value":"> 👉 Possiamo connettere un DB direttamente ad un notebook, sia che si tratti di un **file SQLite**, sia nel caso di un **DB esterno**.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":387,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":350,"value":"myDb = FileAttachment(\"chinook.db\").sqlite()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":377,"value":"// lista tabelle\nmyDb.describe()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":349,"value":"select t.composer, t.name as track_name, g.name as genre_name from tracks t, genres g where t.GenreId = g.GenreId;","pinned":true,"hidden":false,"mode":"sql","author":"$undefined","summary":"$undefined","output":"resultset","database":"var:myDb"},{"id":385,"value":"// Possiamo anche accedere al resultset\nresultset","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":415,"value":"Prossima lezione","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":36,"value":"### Referenze\n- 💾 [Un elenco di dataset messi a disposizione da Observable](https://observablehq.com/@observablehq/curated-datasets)\n- 📚 [Un'introduzione ai dati](https://observablehq.com/@observablehq/introduction-to-data)\n- 📁 [SQLite + Observable](https://observablehq.com/@observablehq/sqlite)\n- 🔧 [Connettersi ad un database](https://observablehq.com/@observablehq/databases)\n- 💻 [Come creare un CORS Proxy per observable](https://observablehq.com/@asg017/cors-anywhere-for-observables)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2e:"$2d:body"