Menu

Le coordinate dell'information design

Le startup di H-FARM visualizzate con D3.js

Aprile 27, 2014 - Data Visualization
Le startup di H-FARM visualizzate con D3.js

Per rappresentare in modo interattivo il network di startup che H-FARM ha accelerato dal 2005 a oggi abbiamo usato la libreria D3.js, Data-Driven Documents, ideata da Mike Bostock.

h-farm

Questa libreria javascript si occupa di elaborare i dati contenuti in file json/csv e di raffigurarli nel browser come istanze visuali in formato svg, html e css. Nel nostro caso abbiamo usato il force-layout, che permette di creare grafi spinti da forze fisiche.

Salvando i dati e i loghi di ogni azienda dal sito h-farmventures.com, li abbiamo trasformati in nodi di un file json:

{"nodes":
[
 {"startup":"H-FARM",
 "status":"Venture Incubator",
 "year":"2005",
 "location":"treviso london seattle mumbai",
 "team":"350+",
 "management":"Riccardo Donadon, Maurizio Rossi, Thomas Panto, Luca Marzotto, Nicola Riello, Stefania Baruffato, Stefano Rosso","site":"http:/ /www.h-farmventures.com/",
 "facebook":"https://www.facebook.com/hfarmventures",
 "twitter":"https://twitter.com/hfarmventures",
 "description":"H-FARM is a Venture Incubator. We invest in innovative small businesses that can handle the transformation of Italian companies in a digital perspective..."},
 {"startup":"H-ART",
 "status":"exit",
 "year":"2005",
 "location":"treviso milan rome florence london",
 ...

Per ogni nodo abbiamo poi creato poi varie connessioni: uno che porta sempre al centro all’acceleratore, e altri che collegano ad altre startup:

 "links":
 [{"source":2,"target":1,"value":1},
 {"source":2,"target":5,"value":1},
 {"source":2,"target":10,"value":1},
 ...

Le parti salienti dello script che si occupa di trasformare tutte le informazioni del json nella visualizzazione interattiva sono le seguenti.

Qui vengono rese fluide e responsive le dimensioni dell’svg che conterrà il grafico;

 var width = 1440,
  height = 700,
  svgwidth = window.innerWidth,
  svgHeight = window.innerHeight

  var svg = d3.select("body").append("svg")
  .attr("viewBox", "0 0 " + svgwidth + " " + svgHeight )
  .attr("preserveAspectRatio", "xMinYMin meet");

Qui viene inizializzato il force-layout con la dichiarazione dei valori delle variabili fisiche;

 var force = d3.layout.force()
  .gravity(.09)
  .distance(250)
  .charge(-600)
  .size([svgwidth, svgHeight]);

Qui viene dichiarato il file json da quale prendere i dati, poi vengono disegnati i link e i nodi, infine viene inserito il logo per ogni startup;

 d3.json("graph.json", function(error, json) {
  force
  .nodes(json.nodes)
  .links(json.links)
  .start();

  var link = svg.selectAll(".link")
  .data(json.links)
  .enter().append("line")
  .attr("class", "link")
  .attr("opacity", "0.4");

  var node = svg.selectAll(".node")
  .data(json.nodes)
  .enter().append("g")
  .attr("class", function(d) { return "node" + " " + d.status + " " + d.location + " " + "year" + d.year; })
   .call(force.drag)

  node.append("image")
  .attr("xlink:href", function(d) { return d.startup + ".png"; })
  ...

Qui definiamo l’animazione al mouseover sul singolo logo;

 node.on('mouseenter', function(){
  d3.select(this)
  d3.selectAll('image')
  .transition()
  .ease('linear')
  .attr('opacity', 0.2)

Qui infine aggiorniamo il contenuto dell’overlay di destra al click sul logo della startup.

 node.on("click", function(d) {
  d3.select("#tooltip")
  .select("#startup-text")
  .text(d.startup);
  d3.select("#tooltip")
  .select("#status-text")
  .text(d.status);
  ...

Da notare come nel risultato finale il cerchio emuli in modo mimetico la ruota del trattore che è il logo di H-FARM

Lascia un commento

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