Browse Source

init brutale

kiki 4 years ago
commit
9d2023afb9
13 changed files with 414 additions and 0 deletions
  1. 1 0
      .gitignore
  2. 0 0
      .placeholder
  3. 21 0
      LICENSE
  4. 8 0
      README
  5. 0 0
      README.md
  6. 35 0
      bower.json
  7. 0 0
      css/.placeholder
  8. 43 0
      css/main.css
  9. 69 0
      data/prodotti.csv
  10. 0 0
      fonts/.placeholder
  11. 0 0
      images/.placeholder
  12. 27 0
      index.html
  13. 210 0
      js/main.js

+ 1 - 0
.gitignore

@@ -0,0 +1 @@
+bower_components/

+ 0 - 0
.placeholder


+ 21 - 0
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.

+ 8 - 0
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.

+ 0 - 0
README.md


+ 35 - 0
bower.json

@@ -0,0 +1,35 @@
+{
+  "name": "SOD3js",
+  "version": "0.2.0",
+  "authors": [
+    "Alessio Cimarelli <jenkin@dataninja.it>"
+  ],
+  "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"
+  }
+}

+ 0 - 0
css/.placeholder


+ 43 - 0
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;
+}

+ 69 - 0
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"

+ 0 - 0
fonts/.placeholder


+ 0 - 0
images/.placeholder


+ 27 - 0
index.html

@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="it">
+<head>
+	<meta charset="UTF-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	
+	<title>Spaghetti Open Data / Dataninja - Tecnologie web e visualizzazione dati interattiva - Raw Data Now!</title>
+
+	<script type="text/javascript" src="bower_components/d3/d3.min.js"></script>
+	<script type="text/javascript" src="bower_components/underscore/underscore-min.js"></script>
+	<script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
+	<script type="text/javascript" src="bower_components/jquery-ui/jquery-ui.min.js"></script>
+	<script type="text/javascript" src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
+	<script type="text/javascript" src="bower_components/lightbox2/js//lightbox.min.js"></script>
+	<script type="text/javascript" src="bower_components/shufflejs/dist/jquery.shuffle.modernizr.min.js"></script>
+	<script type="text/javascript" src="js/main.js"></script>
+
+	<link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
+	<link href="bower_components/jquery-ui/themes/ui-lightness/jquery-ui.min.css" rel="stylesheet">
+	<link href="bower_components/lightbox2/css/lightbox.css" rel="stylesheet">
+	<link href="css/main.css" rel="stylesheet">
+		
+</head>
+<body>
+</body>
+</html>

+ 210 - 0
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 <head>. Ma effettuare subito operazioni sul DOM all'interno
+// del tag <body> 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 <a href="'+d["Scheda"]+'" target="_blank">'+"Link scheda"+'</a>';
+			});
+
+		// 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
+		});
+
+	});
+});