Menu

Le coordinate dell'information design

Crea il network dei tuoi registi preferiti

Ottobre 8, 2014 - Data Visualization, Open Data
Crea il network dei tuoi registi preferiti

Vuoi rappresentare il network degli attori impiegati dai tuoi registi preferiti?
Puoi farlo seguendo il tutorial proposto da delimited.io

Noi lo abbiamo fatto per dodici dei più importanti registi italiani contemporanei, ottenendo questo risultato: www.cartesiani.it/registi-attori-italiani (fai hover sui nodi per vedere i nomi di registi, film e attori)

network

Qui di seguito trovi gli step principali da seguire per creare il tuo Force directed graph con d3.js.

1. Installa node.js, puoi scaricare lo zip qui

2. Vai su https://github.com/sghall/web-scraper, scarica lo zip messo a disposizione da delimited.io e scompattalo (preferibilmente nella tua cartella htdocs)

3. da terminale raggiungi la cartella scompattata e lancia il comando

npm install cheerio request

Questi due moduli servono a fare lo scraping automatico di dati da dbpedia.org (dove si trovano le informazioni su registi, film e attori che ci servono – vedi ad esempio la pagina dedicata a Marco Bellocchio)

4. con un text-editor (come Sublime Text) apri il file directors.js

5. Qui nella variabile directors elimina le url dbpedia dei registi che non ti interessano e metti quelle che vuoi. Nel nostro caso abbiamo inserito:

var directors = [
  'http://dbpedia.org/page/Paolo_Sorrentino',
  'http://dbpedia.org/page/Marco_Bellocchio',
  'http://dbpedia.org/page/Matteo_Garrone',
  'http://dbpedia.org/page/Gabriele_Salvatores',
  'http://dbpedia.org/page/Gianni_Amelio',
  'http://dbpedia.org/page/Nanni_Moretti',
  'http://dbpedia.org/page/Marco_Tullio_Giordana',
  'http://dbpedia.org/page/Roberto_Faenza',
  'http://dbpedia.org/page/Ermanno_Olmi',
  'http://dbpedia.org/page/Roberto_Benigni',
  'http://dbpedia.org/page/Giuseppe_Tornatore',
  'http://dbpedia.org/page/Emanuele_Crialese'];

6. torna al terminale e vai nella cartella js

7. lancia in sequenza i comandi

node directors.js

(richiede pochi secondi per l’esecuzione)

node films.js

(richiede un minuto o due)

node actors.js

(un altro paio di minuti)

node dataPrep.js

per creare la visualizzazione

8. apri il file index.html con Firefox per vedere il risultato finale (in locale Chrome può dare problemi con le Cross origin requests)

9. se desideri puoi modificare gli stili di nodi e link agendo sulle istruzioni css presenti nell’head del file html

10. Divertiti a giocare con il grafo, trascinando i nodi e scoprendo le relazioni esistenti fra i vostri registi e attori preferiti

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *