From 9d2023afb9bab95fcc2b7d80e6a3a1aaa13c129a Mon Sep 17 00:00:00 2001 From: kiki Date: Mon, 2 Sep 2019 18:24:55 +0200 Subject: [PATCH] init brutale --- .gitignore | 1 + .placeholder | 0 LICENSE | 21 +++++ README | 8 ++ README.md | 0 bower.json | 35 ++++++++ css/.placeholder | 0 css/main.css | 43 +++++++++ data/prodotti.csv | 69 +++++++++++++++ fonts/.placeholder | 0 images/.placeholder | 0 index.html | 27 ++++++ js/main.js | 210 ++++++++++++++++++++++++++++++++++++++++++++ 13 files changed, 414 insertions(+) create mode 100644 .gitignore create mode 100644 .placeholder create mode 100644 LICENSE create mode 100644 README create mode 100644 README.md create mode 100644 bower.json create mode 100644 css/.placeholder create mode 100644 css/main.css create mode 100644 data/prodotti.csv create mode 100644 fonts/.placeholder create mode 100644 images/.placeholder create mode 100644 index.html create mode 100644 js/main.js diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..fbe05fc --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +bower_components/ diff --git a/.placeholder b/.placeholder new file mode 100644 index 0000000..e69de29 diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..3fb4c19 --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +The MIT License (MIT) + +Copyright (c) 2015 Dataninja.it + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in +all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN +THE SOFTWARE. diff --git a/README b/README new file mode 100644 index 0000000..c3f577f --- /dev/null +++ b/README @@ -0,0 +1,8 @@ +Progetto didattico per il mini corso su tecnologie web e sviluppo di applicazioni di visualizzazione dati interattive +con HTML5, CSS3, d3js, bootstrap e altre librerie open-source. Terzo raduno della comunità Spaghetti Open Data (#SOD15), Bologna, 27-29 marzo 2015. + +Versione: v0.9.0. + +Si ringrazia la Sergio Bonelli Editore per i dati sulla serie Dampyr (e per l'ideazione e produzione della serie stessa). + +Per approfondire: http://www.spaghettiopendata.org/content/dashboard-interattive-javascript-con-d3js. diff --git a/README.md b/README.md new file mode 100644 index 0000000..e69de29 diff --git a/bower.json b/bower.json new file mode 100644 index 0000000..ea44362 --- /dev/null +++ b/bower.json @@ -0,0 +1,35 @@ +{ + "name": "SOD3js", + "version": "0.2.0", + "authors": [ + "Alessio Cimarelli " + ], + "description": "Progetto didattico per il mini corso su tecnologie web e sviluppo di applicazioni di visualizzazione dati interattive con HTML5, CSS3, d3js e altre librerie open-source.", + "main": "index.html", + "keywords": [ + "d3js", + "javascript", + "opendata", + "sod15", + "bologna", + "dataninja" + ], + "license": "MIT", + "homepage": "http://www.spaghettiopendata.org/content/dashboard-interattive-javascript-con-d3js", + "private": true, + "ignore": [ + "**/.*", + "node_modules", + "bower_components", + "test", + "tests" + ], + "dependencies": { + "d3": "~3.5.5", + "bootstrap": "~3.3.4", + "shufflejs": "~3.1.1", + "jquery-ui": "~1.11.4", + "underscore": "~1.8.2", + "lightbox2": "~2.7.1" + } +} diff --git a/css/.placeholder b/css/.placeholder new file mode 100644 index 0000000..e69de29 diff --git a/css/main.css b/css/main.css new file mode 100644 index 0000000..5c0c56d --- /dev/null +++ b/css/main.css @@ -0,0 +1,43 @@ +/* + * Codice css per l'applicazione + */ + +header.page-header { + margin-top: 0; +} + +header.page-header img { + margin-top: 9px; + background-color: white; + border-radius: 5px; + border-top-left-radius: 50px; + border-top-right-radius: 50px; +} + +header.page-header nav { + margin-top: 15px; +} + +section.page-body { + margin-top: 20px; + margin-bottom: 20px; +} + +div.comics-container { + padding: 5px; + text-align: center; + height: 350px; +} + +article.comics { + border: 1px solid #ccc; +} + +img.cover { + max-height: 253px; +} + +footer.page-footer, +header.page-header { + background-color: #3d85b7; +} diff --git a/data/prodotti.csv b/data/prodotti.csv new file mode 100644 index 0000000..81811b5 --- /dev/null +++ b/data/prodotti.csv @@ -0,0 +1,69 @@ +"Numero" "Prodotto" "Nome" "Descrizione" "Scheda" "Immagine" "Mercati" +1 "Fiori" "AZ. Agr. Belletti Donatella (le insolite piante di Donatella)" "Produco fiori eduli, aromatiche e piante diversamente eduli. In contenitore, in pieno campo e li vendo sfusi, in confezione e in mazzetti. Qui si ricicla tutto quel che si puo. +" "http://www.sergiobonelli.it/scheda/3568/Il-figlio-del-diavolo.html" "http://www.sergiobonelli.it/resizer/200/-1/true/sIk+uYXy53zVcBgoiF5eHe3OSgwi0czMJP30ghPGreJBBB5J+IR6+Wys++y22xWY--.jpg" "vag" +2 "Farine" "Fabbri Fabrizio" "Azienda Agricola Biologica certificata a conduzione familiare, situata nell'appennino tosco-romagnolo, località San Martino in Gattara, poco distante da Marradi, circondata da boschi, produce verdura Biologica per vocazione da oltre 20 anni, da 9 anni certificata biologica da ICEA, utilizzando come unici ingredienti concime di cavallo, proveniente da azienda Biologica della zona, acqua di una sorgente spontanea presente nel podere e tanta passione." "http://www.sergiobonelli.it/scheda/3569/La-stirpe-della-notte.html" "http://www.sergiobonelli.it/resizer/200/-1/true/N25Qi5fhXWi3eP1WUxV3zc4Oageux3y3wk5xIQ8VaS1aA5K802J4ZaepFXWUfdbz--.jpg" "labas" +2 "Frutta" "Fabbri Fabrizio" "Azienda Agricola Biologica certificata a conduzione familiare, situata nell'appennino tosco-romagnolo, località San Martino in Gattara, poco distante da Marradi, circondata da boschi, produce verdura Biologica per vocazione da oltre 20 anni, da 9 anni certificata biologica da ICEA, utilizzando come unici ingredienti concime di cavallo, proveniente da azienda Biologica della zona, acqua di una sorgente spontanea presente nel podere e tanta passione." "http://www.sergiobonelli.it/scheda/3569/La-stirpe-della-notte.html" "http://www.sergiobonelli.it/resizer/200/-1/true/N25Qi5fhXWi3eP1WUxV3zc4Oageux3y3wk5xIQ8VaS1aA5K802J4ZaepFXWUfdbz--.jpg" "labas" +2 "Ortaggi" "Fabbri Fabrizio" "Azienda Agricola Biologica certificata a conduzione familiare, situata nell'appennino tosco-romagnolo, località San Martino in Gattara, poco distante da Marradi, circondata da boschi, produce verdura Biologica per vocazione da oltre 20 anni, da 9 anni certificata biologica da ICEA, utilizzando come unici ingredienti concime di cavallo, proveniente da azienda Biologica della zona, acqua di una sorgente spontanea presente nel podere e tanta passione." "http://www.sergiobonelli.it/scheda/3569/La-stirpe-della-notte.html" "http://www.sergiobonelli.it/resizer/200/-1/true/N25Qi5fhXWi3eP1WUxV3zc4Oageux3y3wk5xIQ8VaS1aA5K802J4ZaepFXWUfdbz--.jpg" "labas" +2 "Uova" "Fabbri Fabrizio" "Azienda Agricola Biologica certificata a conduzione familiare, situata nell'appennino tosco-romagnolo, località San Martino in Gattara, poco distante da Marradi, circondata da boschi, produce verdura Biologica per vocazione da oltre 20 anni, da 9 anni certificata biologica da ICEA, utilizzando come unici ingredienti concime di cavallo, proveniente da azienda Biologica della zona, acqua di una sorgente spontanea presente nel podere e tanta passione." "http://www.sergiobonelli.it/scheda/3569/La-stirpe-della-notte.html" "http://www.sergiobonelli.it/resizer/200/-1/true/N25Qi5fhXWi3eP1WUxV3zc4Oageux3y3wk5xIQ8VaS1aA5K802J4ZaepFXWUfdbz--.jpg" "labas" +3 "Farine" "Azienda agricola Ranch Rovere di Berto Emilio" "L'Azienda agricola Ranch Rovere produce grani antichi,farro,favino,prodotti da orto biologico." "http://www.sergiobonelli.it/scheda/3570/Fantasmi-di-sabbia.html" "http://www.sergiobonelli.it/resizer/200/-1/true/A1NU5LQabDn7lFUXELnCgGsm2e8ZuNby26vDBekBYmbYdUYpSGpHQ1+a7rTW/azo--.jpg" "vag" +3 "Frutta" "Azienda agricola Ranch Rovere di Berto Emilio" "L'Azienda agricola Ranch Rovere produce grani antichi,farro,favino,prodotti da orto biologico." "http://www.sergiobonelli.it/scheda/3570/Fantasmi-di-sabbia.html" "http://www.sergiobonelli.it/resizer/200/-1/true/A1NU5LQabDn7lFUXELnCgGsm2e8ZuNby26vDBekBYmbYdUYpSGpHQ1+a7rTW/azo--.jpg" "vag" +3 "Ortaggi" "Azienda agricola Ranch Rovere di Berto Emilio" "L'Azienda agricola Ranch Rovere produce grani antichi,farro,favino,prodotti da orto biologico." "http://www.sergiobonelli.it/scheda/3570/Fantasmi-di-sabbia.html" "http://www.sergiobonelli.it/resizer/200/-1/true/A1NU5LQabDn7lFUXELnCgGsm2e8ZuNby26vDBekBYmbYdUYpSGpHQ1+a7rTW/azo--.jpg" "vag" +3 "Vino" "Azienda agricola Ranch Rovere di Berto Emilio" "L'Azienda agricola Ranch Rovere produce grani antichi,farro,favino,prodotti da orto biologico." "http://www.sergiobonelli.it/scheda/3570/Fantasmi-di-sabbia.html" "http://www.sergiobonelli.it/resizer/200/-1/true/A1NU5LQabDn7lFUXELnCgGsm2e8ZuNby26vDBekBYmbYdUYpSGpHQ1+a7rTW/azo--.jpg" "vag" +4 "Cereali da Granella" "Azienda Agricola Rota Paolo" "L'azienda nasce alla fine degli anni ’70, dall' ’89 convertita al biologico. La coltivazione prevalente del pomodoro da conserva è via via integrata da altri ortaggi, fino a raggiungere la attuale dimensione di superficie coltivata. Attualmente il podere comprende: 2 ha di ortaggi, 2ha di vigneto, 6ha sono occupati da frumento e erba medica per permettere la rotazione. Abbiamo anche un piccolo frutteto e una serra. +Lavoriamo il terreno secondo le metodologie tradizionali; semina, zappatura, diserbo, raccolta, sono manuali e in parte attuati con mezzi meccanici di basso impatto ambientale. Gli ortaggi, raccolti quotidianamente vengono venduti in azienda e in mercati contadini. +Particolare attenzione, da sempre, rivolgiamo alla salute della terra e alla salvaguardia dell'ambiente. +Questo sistema di lavoro richiede notevole energia, fatica, presenta maggiori rischi e rese sicuramente inferiori rispetto all'agricoltura convenzionale. Siamo sostenuti in tale scelta da una motivazione etica e confortati dalla crescente simpatia e sostegno che gli affezionati clienti non mancano di manifestarci. + +" "http://www.sergiobonelli.it/scheda/3571/Notturno-in-rosso.html" "http://www.sergiobonelli.it/resizer/200/-1/true/zcVYnplgPUzm7bwE/57Hz8jZ9sNKsMGi5EiQZ7QwKqJO6xrB6O82FOmxv1Umo/e6--.jpg" "vag" +4 "Conserve" "Azienda Agricola Rota Paolo" "L'azienda nasce alla fine degli anni ’70, dall' ’89 convertita al biologico. La coltivazione prevalente del pomodoro da conserva è via via integrata da altri ortaggi, fino a raggiungere la attuale dimensione di superficie coltivata. Attualmente il podere comprende: 2 ha di ortaggi, 2ha di vigneto, 6ha sono occupati da frumento e erba medica per permettere la rotazione. Abbiamo anche un piccolo frutteto e una serra. +Lavoriamo il terreno secondo le metodologie tradizionali; semina, zappatura, diserbo, raccolta, sono manuali e in parte attuati con mezzi meccanici di basso impatto ambientale. Gli ortaggi, raccolti quotidianamente vengono venduti in azienda e in mercati contadini. +Particolare attenzione, da sempre, rivolgiamo alla salute della terra e alla salvaguardia dell'ambiente. +Questo sistema di lavoro richiede notevole energia, fatica, presenta maggiori rischi e rese sicuramente inferiori rispetto all'agricoltura convenzionale. Siamo sostenuti in tale scelta da una motivazione etica e confortati dalla crescente simpatia e sostegno che gli affezionati clienti non mancano di manifestarci. + +" "http://www.sergiobonelli.it/scheda/3571/Notturno-in-rosso.html" "http://www.sergiobonelli.it/resizer/200/-1/true/zcVYnplgPUzm7bwE/57Hz8jZ9sNKsMGi5EiQZ7QwKqJO6xrB6O82FOmxv1Umo/e6--.jpg" "vag" +4 "Farine" "Azienda Agricola Rota Paolo" "L'azienda nasce alla fine degli anni ’70, dall' ’89 convertita al biologico. La coltivazione prevalente del pomodoro da conserva è via via integrata da altri ortaggi, fino a raggiungere la attuale dimensione di superficie coltivata. Attualmente il podere comprende: 2 ha di ortaggi, 2ha di vigneto, 6ha sono occupati da frumento e erba medica per permettere la rotazione. Abbiamo anche un piccolo frutteto e una serra. +Lavoriamo il terreno secondo le metodologie tradizionali; semina, zappatura, diserbo, raccolta, sono manuali e in parte attuati con mezzi meccanici di basso impatto ambientale. Gli ortaggi, raccolti quotidianamente vengono venduti in azienda e in mercati contadini. +Particolare attenzione, da sempre, rivolgiamo alla salute della terra e alla salvaguardia dell'ambiente. +Questo sistema di lavoro richiede notevole energia, fatica, presenta maggiori rischi e rese sicuramente inferiori rispetto all'agricoltura convenzionale. Siamo sostenuti in tale scelta da una motivazione etica e confortati dalla crescente simpatia e sostegno che gli affezionati clienti non mancano di manifestarci. + +" "http://www.sergiobonelli.it/scheda/3571/Notturno-in-rosso.html" "http://www.sergiobonelli.it/resizer/200/-1/true/zcVYnplgPUzm7bwE/57Hz8jZ9sNKsMGi5EiQZ7QwKqJO6xrB6O82FOmxv1Umo/e6--.jpg" "vag" +4 "Frutta" "Azienda Agricola Rota Paolo" "L'azienda nasce alla fine degli anni ’70, dall' ’89 convertita al biologico. La coltivazione prevalente del pomodoro da conserva è via via integrata da altri ortaggi, fino a raggiungere la attuale dimensione di superficie coltivata. Attualmente il podere comprende: 2 ha di ortaggi, 2ha di vigneto, 6ha sono occupati da frumento e erba medica per permettere la rotazione. Abbiamo anche un piccolo frutteto e una serra. +Lavoriamo il terreno secondo le metodologie tradizionali; semina, zappatura, diserbo, raccolta, sono manuali e in parte attuati con mezzi meccanici di basso impatto ambientale. Gli ortaggi, raccolti quotidianamente vengono venduti in azienda e in mercati contadini. +Particolare attenzione, da sempre, rivolgiamo alla salute della terra e alla salvaguardia dell'ambiente. +Questo sistema di lavoro richiede notevole energia, fatica, presenta maggiori rischi e rese sicuramente inferiori rispetto all'agricoltura convenzionale. Siamo sostenuti in tale scelta da una motivazione etica e confortati dalla crescente simpatia e sostegno che gli affezionati clienti non mancano di manifestarci. + +" "http://www.sergiobonelli.it/scheda/3571/Notturno-in-rosso.html" "http://www.sergiobonelli.it/resizer/200/-1/true/zcVYnplgPUzm7bwE/57Hz8jZ9sNKsMGi5EiQZ7QwKqJO6xrB6O82FOmxv1Umo/e6--.jpg" "vag" +4 "Ortaggi" "Azienda Agricola Rota Paolo" "L'azienda nasce alla fine degli anni ’70, dall' ’89 convertita al biologico. La coltivazione prevalente del pomodoro da conserva è via via integrata da altri ortaggi, fino a raggiungere la attuale dimensione di superficie coltivata. Attualmente il podere comprende: 2 ha di ortaggi, 2ha di vigneto, 6ha sono occupati da frumento e erba medica per permettere la rotazione. Abbiamo anche un piccolo frutteto e una serra. +Lavoriamo il terreno secondo le metodologie tradizionali; semina, zappatura, diserbo, raccolta, sono manuali e in parte attuati con mezzi meccanici di basso impatto ambientale. Gli ortaggi, raccolti quotidianamente vengono venduti in azienda e in mercati contadini. +Particolare attenzione, da sempre, rivolgiamo alla salute della terra e alla salvaguardia dell'ambiente. +Questo sistema di lavoro richiede notevole energia, fatica, presenta maggiori rischi e rese sicuramente inferiori rispetto all'agricoltura convenzionale. Siamo sostenuti in tale scelta da una motivazione etica e confortati dalla crescente simpatia e sostegno che gli affezionati clienti non mancano di manifestarci. + +" "http://www.sergiobonelli.it/scheda/3571/Notturno-in-rosso.html" "http://www.sergiobonelli.it/resizer/200/-1/true/zcVYnplgPUzm7bwE/57Hz8jZ9sNKsMGi5EiQZ7QwKqJO6xrB6O82FOmxv1Umo/e6--.jpg" "vag" +4 "Prodotti da forno" "Azienda Agricola Rota Paolo" "L'azienda nasce alla fine degli anni ’70, dall' ’89 convertita al biologico. La coltivazione prevalente del pomodoro da conserva è via via integrata da altri ortaggi, fino a raggiungere la attuale dimensione di superficie coltivata. Attualmente il podere comprende: 2 ha di ortaggi, 2ha di vigneto, 6ha sono occupati da frumento e erba medica per permettere la rotazione. Abbiamo anche un piccolo frutteto e una serra. +Lavoriamo il terreno secondo le metodologie tradizionali; semina, zappatura, diserbo, raccolta, sono manuali e in parte attuati con mezzi meccanici di basso impatto ambientale. Gli ortaggi, raccolti quotidianamente vengono venduti in azienda e in mercati contadini. +Particolare attenzione, da sempre, rivolgiamo alla salute della terra e alla salvaguardia dell'ambiente. +Questo sistema di lavoro richiede notevole energia, fatica, presenta maggiori rischi e rese sicuramente inferiori rispetto all'agricoltura convenzionale. Siamo sostenuti in tale scelta da una motivazione etica e confortati dalla crescente simpatia e sostegno che gli affezionati clienti non mancano di manifestarci. + +" "http://www.sergiobonelli.it/scheda/3571/Notturno-in-rosso.html" "http://www.sergiobonelli.it/resizer/200/-1/true/zcVYnplgPUzm7bwE/57Hz8jZ9sNKsMGi5EiQZ7QwKqJO6xrB6O82FOmxv1Umo/e6--.jpg" "vag" +4 "Succhi" "Azienda Agricola Rota Paolo" "L'azienda nasce alla fine degli anni ’70, dall' ’89 convertita al biologico. La coltivazione prevalente del pomodoro da conserva è via via integrata da altri ortaggi, fino a raggiungere la attuale dimensione di superficie coltivata. Attualmente il podere comprende: 2 ha di ortaggi, 2ha di vigneto, 6ha sono occupati da frumento e erba medica per permettere la rotazione. Abbiamo anche un piccolo frutteto e una serra. +Lavoriamo il terreno secondo le metodologie tradizionali; semina, zappatura, diserbo, raccolta, sono manuali e in parte attuati con mezzi meccanici di basso impatto ambientale. Gli ortaggi, raccolti quotidianamente vengono venduti in azienda e in mercati contadini. +Particolare attenzione, da sempre, rivolgiamo alla salute della terra e alla salvaguardia dell'ambiente. +Questo sistema di lavoro richiede notevole energia, fatica, presenta maggiori rischi e rese sicuramente inferiori rispetto all'agricoltura convenzionale. Siamo sostenuti in tale scelta da una motivazione etica e confortati dalla crescente simpatia e sostegno che gli affezionati clienti non mancano di manifestarci. + +" "http://www.sergiobonelli.it/scheda/3571/Notturno-in-rosso.html" "http://www.sergiobonelli.it/resizer/200/-1/true/zcVYnplgPUzm7bwE/57Hz8jZ9sNKsMGi5EiQZ7QwKqJO6xrB6O82FOmxv1Umo/e6--.jpg" "vag" +5 "Frutta" "Az.Agr. Biodinamica ""Il Serraglio"" s.s." "Azienda a ciclo chiuso , produzione di cereali e sfarinati sia ad uso umano che animale, frutta (mele - pere - pesche), ortaggi, carne bovina, presenza di un ristorante agrituristico e B & B di prossima apertura,didattica e attività di laboratorio, percorsi naturalistici." "http://www.sergiobonelli.it/scheda/3572/Sotto-il-ponte-di-pietra.html" "http://www.sergiobonelli.it/resizer/200/-1/true/evBuoKUANzV3iijFMX+eGih4BztE7o3CEDnC8racfDCi0ja+P/PV280q1BCriiib--.jpg" "xm24" +5 "Miele" "Az.Agr. Biodinamica ""Il Serraglio"" s.s." "Azienda a ciclo chiuso , produzione di cereali e sfarinati sia ad uso umano che animale, frutta (mele - pere - pesche), ortaggi, carne bovina, presenza di un ristorante agrituristico e B & B di prossima apertura,didattica e attività di laboratorio, percorsi naturalistici." "http://www.sergiobonelli.it/scheda/3572/Sotto-il-ponte-di-pietra.html" "http://www.sergiobonelli.it/resizer/200/-1/true/evBuoKUANzV3iijFMX+eGih4BztE7o3CEDnC8racfDCi0ja+P/PV280q1BCriiib--.jpg" "xm24" +5 "Succhi" "Az.Agr. Biodinamica ""Il Serraglio"" s.s." "Azienda a ciclo chiuso , produzione di cereali e sfarinati sia ad uso umano che animale, frutta (mele - pere - pesche), ortaggi, carne bovina, presenza di un ristorante agrituristico e B & B di prossima apertura,didattica e attività di laboratorio, percorsi naturalistici." "http://www.sergiobonelli.it/scheda/3572/Sotto-il-ponte-di-pietra.html" "http://www.sergiobonelli.it/resizer/200/-1/true/evBuoKUANzV3iijFMX+eGih4BztE7o3CEDnC8racfDCi0ja+P/PV280q1BCriiib--.jpg" "xm24" +6 "Frutta" "Pina e Leo" "Produciamo principalmente miele.Io(Pina)mi sono avvicinata al mondo contadino nel 2009 dopo una laurea triennale in scienze sociali. Mi sembrava assurdo saper utilizzare un pc e non aver mai piantato un pomodoro,non saper più riconoscere una pianta velenosa da una che cura,calpestare buonissime erbe mangerecce,quale legna usare per dei manici o dei recinti..non volevo sfruttare nè essere sfruttata,gli animali selvatici come tutto il resto li avevo visti nei libri così ho conosciuto Leonardo e altre/i con cui vivere con la tendenza all' autosufficienza.Per avere un po di miele per noi,nel 2009,su spinta di un amico (ora apicoltore GC) ci procurammo una famiglia d api visitata collettivamente;le api che abbiamo adesso provengono tutte da quella li,il secondo anno ne avevamo 3,poi cinque.. +Leonardo,invece,lui voleva fare il contadino già da piccolo.Ha avuto modo di frequentare la campagna andando dai suoi nonni paterni che erano operai agricoli(prima mezzadri) e fin da piccolissimo era appassionato di animali e alberi ma viveva in paese cosi dai 4anni metteva da parte i semi e faceva crescere gli alberi che poi piantava e seguiva.Non solo frutti,cipressi querce e anche un ippocastano. +Dal 2001 ha partecipato,insieme a Brigitte Holsen, a una ricerca con fondi UE sui frutti dimenticati nelle zone di Mugello,AltoMugello e Valdisieve con iscrizione ARSIA di alcune cultivar ritrovate." "http://www.sergiobonelli.it/scheda/3573/La-costa-degli-scheletri.html" "http://www.sergiobonelli.it/resizer/200/-1/true/L0E0g3Nfzgehcs6SzCAqilKesvEfJ5YCelpE7yb4DhTkEOszMNb2HaBSlC/IL3aJ--.jpg" "vag" +6 "Ortaggi" "Pina e Leo" "Produciamo principalmente miele.Io(Pina)mi sono avvicinata al mondo contadino nel 2009 dopo una laurea triennale in scienze sociali. Mi sembrava assurdo saper utilizzare un pc e non aver mai piantato un pomodoro,non saper più riconoscere una pianta velenosa da una che cura,calpestare buonissime erbe mangerecce,quale legna usare per dei manici o dei recinti..non volevo sfruttare nè essere sfruttata,gli animali selvatici come tutto il resto li avevo visti nei libri così ho conosciuto Leonardo e altre/i con cui vivere con la tendenza all' autosufficienza.Per avere un po di miele per noi,nel 2009,su spinta di un amico (ora apicoltore GC) ci procurammo una famiglia d api visitata collettivamente;le api che abbiamo adesso provengono tutte da quella li,il secondo anno ne avevamo 3,poi cinque.. +Leonardo,invece,lui voleva fare il contadino già da piccolo.Ha avuto modo di frequentare la campagna andando dai suoi nonni paterni che erano operai agricoli(prima mezzadri) e fin da piccolissimo era appassionato di animali e alberi ma viveva in paese cosi dai 4anni metteva da parte i semi e faceva crescere gli alberi che poi piantava e seguiva.Non solo frutti,cipressi querce e anche un ippocastano. +Dal 2001 ha partecipato,insieme a Brigitte Holsen, a una ricerca con fondi UE sui frutti dimenticati nelle zone di Mugello,AltoMugello e Valdisieve con iscrizione ARSIA di alcune cultivar ritrovate." "http://www.sergiobonelli.it/scheda/3573/La-costa-degli-scheletri.html" "http://www.sergiobonelli.it/resizer/200/-1/true/L0E0g3Nfzgehcs6SzCAqilKesvEfJ5YCelpE7yb4DhTkEOszMNb2HaBSlC/IL3aJ--.jpg" "vag" +6 "Uova" "Pina e Leo" "Produciamo principalmente miele.Io(Pina)mi sono avvicinata al mondo contadino nel 2009 dopo una laurea triennale in scienze sociali. Mi sembrava assurdo saper utilizzare un pc e non aver mai piantato un pomodoro,non saper più riconoscere una pianta velenosa da una che cura,calpestare buonissime erbe mangerecce,quale legna usare per dei manici o dei recinti..non volevo sfruttare nè essere sfruttata,gli animali selvatici come tutto il resto li avevo visti nei libri così ho conosciuto Leonardo e altre/i con cui vivere con la tendenza all' autosufficienza.Per avere un po di miele per noi,nel 2009,su spinta di un amico (ora apicoltore GC) ci procurammo una famiglia d api visitata collettivamente;le api che abbiamo adesso provengono tutte da quella li,il secondo anno ne avevamo 3,poi cinque.. +Leonardo,invece,lui voleva fare il contadino già da piccolo.Ha avuto modo di frequentare la campagna andando dai suoi nonni paterni che erano operai agricoli(prima mezzadri) e fin da piccolissimo era appassionato di animali e alberi ma viveva in paese cosi dai 4anni metteva da parte i semi e faceva crescere gli alberi che poi piantava e seguiva.Non solo frutti,cipressi querce e anche un ippocastano. +Dal 2001 ha partecipato,insieme a Brigitte Holsen, a una ricerca con fondi UE sui frutti dimenticati nelle zone di Mugello,AltoMugello e Valdisieve con iscrizione ARSIA di alcune cultivar ritrovate." "http://www.sergiobonelli.it/scheda/3573/La-costa-degli-scheletri.html" "http://www.sergiobonelli.it/resizer/200/-1/true/L0E0g3Nfzgehcs6SzCAqilKesvEfJ5YCelpE7yb4DhTkEOszMNb2HaBSlC/IL3aJ--.jpg" "vag" +8 "Miele" "semprenuoveali" "Ho iniziato nel 2000 con un paio di arnie e sono arrivato a quelle che ho oggi facendo riprodurre le mie prime famiglie. +Lavoro da sempre secondo i criteri minimi dell'apicoltura biologica ma per scelta non ho nessuna certificazione perché non credo nella delega e preferisco la garanzia diretta nel rapporto di conoscenza produttore-consumatore. +Ad oggi non ho mai nutrito le mie famiglie di api ed utilizzo esclusivamente cera proveniente dai miei alveari. +Cerco di differenziare il più possibile le tipologie dei mieli raccolti perchè credo sia il modo migliore per valorizzare il lavoro che le mie api svolgono in natura e perché penso che questo rifletta maggiormente quella che è la biodiversità dei luoghi in cui le api bottinano il miele." "http://www.sergiobonelli.it/scheda/3575/Dalle-tenebre.html" "http://www.sergiobonelli.it/resizer/200/-1/true/0AmTu7lEuW9ZannmYOZ6qnfGPUTnG7PPQ/Z/bkxuNIlP7Q+m1gQIAOmcjOrau8Ai--.jpg" "labas" diff --git a/fonts/.placeholder b/fonts/.placeholder new file mode 100644 index 0000000..e69de29 diff --git a/images/.placeholder b/images/.placeholder new file mode 100644 index 0000000..e69de29 diff --git a/index.html b/index.html new file mode 100644 index 0000000..6656671 --- /dev/null +++ b/index.html @@ -0,0 +1,27 @@ + + + + + + + + Spaghetti Open Data / Dataninja - Tecnologie web e visualizzazione dati interattiva - Raw Data Now! + + + + + + + + + + + + + + + + + + + diff --git a/js/main.js b/js/main.js new file mode 100644 index 0000000..5ae6074 --- /dev/null +++ b/js/main.js @@ -0,0 +1,210 @@ +/* + * Codice javascript per l'applicazione + */ + +// All'interno del file index.html il luogo migliore per inserire ed eseguire il codice javascript +// è l'header della pagina, all'interno del tag . Ma effettuare subito operazioni sul DOM all'interno +// del tag prima ancora che sia caricato interamente non è una buona idea... +// +// Inseriamo quindi tutto il codice in una funzione di callback e passiamola come argomento alla funzione speciale di jQuery, "$()". +// La nostra funzione sarà così eseguita automaticamente non appena il caricamento della pagina sarà completato +// e il DOM pronto per essere manipolato. +// +$(function() { + + // La libreria d3 espone un oggetto accessibile globalmente: d3. + // L'uso della libreria d3 richiede quindi l'esecuzione opportuna dei metodi dell'oggetto d3. + // + // In questo caso il metodo select([selettore]) seleziona l'elemento in base al selettore passato ("body") + // e ritorna un oggetto "selezione" (assegnato alla variabile "container"). + // + // Una selezione d3 a sua volta possiede il metodo append([tag]) che crea un nuovo + // nodo del tipo specificato ("div") nel DOM all'interno del nodo selezionato in precedenza ("body"). + // + // Anche append() torna una selezione (questa volta "div", non più "body"), + // per cui è possibile accedere immediatamente al metodo attr([string],[string]) + // sfruttando un pattern di programmazione noto con il nome di chaining. La stringa passata come secondo argomento + // ("container-fluid") viene dunque inserita come classe all'interno dell'attributo "class" del nodo selezionato ("div"). + // + // Creiamo subito un contenitore della pagina, figlio del body per usare al meglio bootstrap. + // + var container = d3.select("body") + .append("div") + .attr("class","container-fluid"); + + // Inseriamo il titolo in un contenitore che funga da "header" con classe "row", sempre per sfruttare bootstrap. + var header = container.append("header") // Definiamo semanticamente le parti della pagina con i nuovi tag dell'HTML5 + .attr("class","row page-header"); + + // Rendiamo il tutto ricercabile mediante shufflejs attraverso un campo di input testuale + header.append("nav") + .append("input") + .attr("id","search") + .attr("class","center-block input-lg") + .attr("placeholder","Cerca per produttore, mercato o prodotto") + .attr("value",""); + + // Abbiamo ora bisogno di dati memorizzati in un file tsv (Tab-separated values), + // per cui dobbiamo recuperarli con una chiamata AJAX. Il metodo tsv([url], callback) di d3 + // pensa a tutto: chiamata asincrona, gestione della risposta (evetuali errori in "error" e parsing dei dati testuali + // dal tsv a un array di oggetti (passato in "data"). + // + d3.tsv("data/prodotti.csv", function(error, data) { + + // Gestione di eventuali errori (es. file non trovato, ecc.), + // se c'è qualche problema l'esecuzione si blocca e viene notificato un messaggio in console. + if (error) { + throw "Error in loading data..."; + } + + // Assicuriamoci che tutto sia ordinato per numero di albo (e quindi per data di uscita) + // e per ora limitiamoci ai primi 20 albi per non sovraccaricare di richieste il server della Bonelli + // (le immagini sono linkate direttamente dal sito ufficiale). + // + /*data = data.sort(function(a,b) { // Il metodo sort() passa alla callback una coppia di elementi + // Bisogna indicare dei due elementi quale viene prima e quale dopo, + // in questo ci aiuta un metodo di d3 già predisposto allo scopo per semplici ordinamenti. + // + // Ovviamente dobbiamo confrontare il valore degli attributi "Numero" degli oggetti "a" e "b" e non gli oggetti in sé + // e prima di farlo li convertiamo a interi (inizialmente sono letti come stringhe) anteponendo un "+". + return d3.ascending(+a["Numero"],+b["Numero"]); + }).slice(0,20); // Il metodo slice() applicato a un array prende 20 elementi consecutivi a partire dal numero 0 (il primo) +*/ + // Per aggiungere la funzionalità di autocomplete al form di ricerca, + // ricaviamo la lista dei nomi di tutti gli autori degli albi. + // Soggetto Sceneggiatura Disegni Copertina + var authors = _.uniq(_.flatten(data.map(function(el) { + var groups = []; + return groups + .concat(el["Nome"].split(",")) + .concat(el["Prodotto"].split(",")) + .concat(el["Mercati"].split(",")); + }))); + + // Qui uno dei pilastri concettuali della libreria d3: + // prendiamo la variabile container (è una selezione del div contenitore globale), poi selezioniamo tutti gli elementi "div" + // in esso contenuti con il metodo selectAll([selettore]). + // Inizialmente non ce ne sono, quindi la selezione è vuota, ma esiste. + // + // A questa selezione (vuota) associamo il nostro array per posizione con il metodo data([array]): + // il primo oggetto con il primo div (che non esiste), + // il secondo oggetto con il secondo div (che sempre non esiste), ecc. + // + // Il metodo enter() opera la magia: esegue tutto ciò che viene dopo tante volte quanti sono i dati + // che non sono stati assegnati ad alcun elemento del DOM, nel nostro caso tutti. Per cui append("div") + // viene eseguito per tutti i dati e così vengono creati nel DOM tanti paragrafi quanti sono i dati + // e a essi vengono associati in ordine i dati uno a uno. + // + // Il metodo append("div") torna una selezione, per cui possiamo subito impostare gli attributi e i contenuti dei div, + // che non sono fissi, ma dipendono dai dati: la funzione di callback, infatti, viene eseguita passandole + // il dato associato all'elemento corrente: "d" è un oggetto che rappresenta una riga del dataset originario + // (una riga del file tsv), con le chiavi uguali ai nomi delle colonne e i valori quelli delle celle della riga. + // + // Questa funzione di callback deve ritornare un valore compatibile con il metodo che l'ha chiamata: nel nostro caso + // per lo più stringhe con cui valorizzare gli attributi nominati. + // + var albi = container.append("section") + .attr("id","grid") + .attr("class","row page-body") // Dopo l'header, un'altra "row", ma con classe "body" + .selectAll("div") // La selezione dei "div" contenitori viene assegnata alla variabile "albi" e poi riutilizzata successivamente. + .data(data) + .enter() + .append("div") + .attr("class","comics-container col-lg-2 col-md-3 col-sm-4 col-xs-6") // Associamo una classe ai div contenitori degli albi per sfruttare la grid di bootstrap che ci assicura la responsiveness + .attr("data-groups", function(d) { // Shufflejs effettua il filtro su categorie personalizzate che vanno definite nell'attributo data-groups + var groups = []; + // Nel nostro caso le categorie sono i nomi degli autori e devono comparire come json di un array di stringhe: ["nome1","nome2",...] + // Sappiamo però che nelle nostre colonne ci possono essere più nomi, che divideremo in un array con split() usando la virgola come separatore. + // Non possiamo tornare però un array, perché l'attributo si aspetta una stringa, per cui... stringify, non prima di aver eliminato dall'array + // gli elementi duplicati. + return JSON.stringify(_.uniq(groups.concat(d["Nome"].split(",")).concat(d["Prodotto"].split(",")).concat(d["Mercati"].split(",")))).replace(/"/g,"'"); + }) + .attr("data-title", function(d) { // Perché allora non inserire tutte e informazioni negli attributi data-? + return d["Prodotto"].replace(/"/g,""); + }) + .attr("data-summary", function(d) { + return d["Nome"].replace(/"/g,""); + }) + .append("article") // Perché due div uno dentro l'altro? Perché vogliamo il bordo di ogni elemento e una certa distanza tra l'uno e l'altro + .attr("class","comics"); + + // Da qui in poi tutti gli elementi vanno creati all'interno dei div contenitori creati precedentemente. + // La variabile "albi" è un array e tutti i metodi invocati si applicano a tutti gli elementi dell'array. + // Noi lo scriviamo una sola volta, ma il tutto è eseguito per tutti gli elementi, tanti quanti sono i dati. + var header_albi = albi.append("header"); + + header_albi.append("p") + .attr("class","number") + .text(function(d) { + return "Dampyr n. "+d["Numero"]; // Concatenazione di stringhe, sempre con il "+". + }); + + header_albi.append("h4") // Titolo di quarto livello, sempre figlio del div, ma fratello del paragrafo precedente + .attr("class","title") + .text(function(d) { + return d["Prodotto"]; + }); + + albi.append("figure") + .append("a") // Questa volta inseriamo nel DOM un link alla scheda dell'albo sul sito ufficiale + .attr("href", function(d) { // L'URL del link va inserita nell'attributo "href" mediante il metodo "attr" + return d["Immagine"]; + //return d["Scheda"]; + }) + .attr("target","_blank") // Il link si apre in un'altra finestra + .attr("data-lightbox","cover") + .attr("data-title", function(d) { + return d["Descrizione"].replace(/"/g,""); + }) + .append("img") // Ora l'append è consecutivo al precedente, quindi agisce su "a" (non su "div"), inserendo al suo interno un'immagine + .attr("class","cover img-responsive center-block") // Associamo la classe "cover" e alcune classi utili definite da bootstrap + .attr("src", function(d) { // La sua URL va inserita nell'attributo "src" mediante il metodo "attr" + return d["Immagine"]; + }) + .attr("alt", function(d) { + return d["Nome"]; + }); + + albi.append("footer") + .append("p") + .attr("class","date") + .html(function(d) { + return 'Uscito il '+"Link scheda"+''; + }); + + // E infine un footer a chiudere la pagina + container.append("footer") + .attr("class","row page-footer") + .append("figure") + .append("a") + .attr("href","http://www.campiaperti.org/") + .attr("target","_blank"); + + // + // Il DOM è pronto con tutti gli elementi + // Ora possiamo agire su quegli elementi, inizializzando la grid dei comics con shufflejs + // + $("#grid").shuffle({ + itemSelector: ".comics-container" + }); + + // Attacchiamo una funzione di callback a un evento del form di input: viene eseguita ogni volta che il contenuto cambia + // a causa della digitazione di un testo all'interno da parte dell'utente + $("#search").on('keyup change', function() { // Eventi "rilascio di un pulsante della tastiera" e "cambio del contenuto" + // Effettuando una ricerca in data-groups è necessario ripulire un po' sia le stringa di ricerca + // (ignorando per esempio le maiuscole e altri caratteri non letterali) che quella in cui viene effettuata + // la ricerca (che è il json di un array di stringhe) + var val = this.value.toLowerCase().replace(/[^a-z] /g,""); // Il valore digitato corrente + $('#grid').shuffle('shuffle', function($el, shuffle) { + // La funzione viene valutata per ogni elemento della grid: + // se vera l'elemento viene tenuto, altrimenti viene nascosto + return $el.data('groups').toLowerCase().indexOf(val) > -1; + }); + }); + + $("#search").autocomplete({ + source: authors + }); + + }); +});