First viz

Screen Shot 2014-07-19 at 18.35.22

ArrayList<Entity> nodes;

void setup(){


 // load the data into an array of strings
 String[] dati = loadStrings("datiOrgModel.csv" );
 // initialize the ArrayList which will contain our data
 nodes = new ArrayList<Entity>();
// loop through all the data of the file
   int i=0; 
   i<dati.length ; 
    // take one line of data
    String line = dati[i];
   //split it into parts, with | as separator
   String[] parts = split( line , '|' );

   // part[0] contains the name
   // part[1] contains the type
   // part[2] contains the list of children 
   // Split the children of the current line, using ',' as separator
   String[] children = split( parts[2], ',');
   // create the new element to be visualized
   Entity newNode = new Entity( parts[0], parts[1] , children );
   // ass the node to the rest
   nodes.add( newNode );



void draw(){
 // colour the background black
 background(0 );
 // cycle through all the nodes
 for(int i = 0; i<nodes.size(); i++){
   // get the i-th node
   Entity e1 = nodes.get( i );
   // cycle through all of its children
   for(int j= 0; j<e1.children.length ; j++){
      // take one of the children
      String child = e1.children[j]; 
     // search for it through all the nodes
    for(int k = 0; k<nodes.size(); k++){
     // take a node  
     Entity e2 = nodes.get( k );
     // is it the node we're looking for?
     if( child ) ){
       // yes!
      // we will calculate the gravity 
      // which will attract the node to its 'father'
      // copy the vector of the position of the child
      PVector v = new PVector();
      v.x = e2.position.x;
      v.y = e2.position.y;
      // subtract the position of father node
      v.sub( e1.position );
     // calculate the distance father-->child
     float magnitude = v.mag();
     // is the child still too far from father?
        // create attraction (reverse it by multiplying it by -1,
        // and decrease it by multiplying it for 0.001
        v.mult( -0.001 );
       // add the force to the node, to create acceleration
       e2.addForce( v );
    // draw the line from e1 to e2, to highlight the relation
    line(e1.position.x,e1.position.y, e2.position.x, e2.position.y );
 // loop through the nodes and draw them
 for(int i = 0; i<nodes.size(); i++){
   Entity e = nodes.get( i );

// Entity Class
class Entity{

 // each entity contains a name, a type and some children
 String name;
 String type;
 String[] children;
 // the vectors define the position, speed and acceleration of the entity in the viz
 PVector position, speed, acceleration;
 // constructor
 public Entity(String n, String t, String[] c){
 name = n;
 type = t;
 children = c;
 // initially the entity is stopped (accel and speed = 0)
 // and it is in a random position on the screen
 position = new PVector();
 speed = new PVector(0,0);
 acceleration = new PVector(0,0);
 position.x = random( 0,width );
 position.y = random( 0,height);
   // for easier handling: no null, but empty array for children
    children = new String[0];
 void draw(){
 // calculate friction on speed (proportional and inverse to speed)
 PVector frictionSpeed = new PVector();
 frictionSpeed.x = speed.x;
 frictionSpeed.y = speed.y;
 frictionSpeed.mult( -0.02 );
 addForce( frictionSpeed );
 // calculate friction on acceleration (proportional and inverse to acceleration)
 PVector frictionAcceleration = new PVector();
 frictionAcceleration.x = acceleration.x;
 frictionAcceleration.y = acceleration.y;
 frictionAcceleration.mult( -0.02 );
 addForce( frictionAcceleration );
 // add acceleration to speed and speed to position, to update the system
 speed.add( acceleration );
 position.add( speed );
 // after using it bring the acceleration to zero
 acceleration.x = 0;
 acceleration.y = 0;
 translate(position.x , position.y);
 // use the types of the entities to change form, colour...
 if(type.equals( "org" ) ){
 } else if(type.equals( "people" ) ){

 // draw the node

 // this function is used to add forces to the node, for acceleration
 void addForce( PVector v ){
 acceleration.add( v );


Visualizing knowledge in XY

to understand and visualize the knowledge ecosystem, we started from XY 🙂

we are using an ethnographic methodology, starting by interviewing people.

we started from XY staff, by asking them to start a conversation about four topics:

– organizational models (describe the organizational model of xy and possibly draw it)

– information flow (origins and destination of informations)

– lost opportunity (what and when access to some information source could have helped you to solve a problem)

– are you preparing you self to communicate and share the experience of the workshop to others

we started from Alessandro Tartaglia (X, FF3300), than Alessandro Balena and Lucilla (Y, Dinamo), trying to make them drawing the models, or drawing together.

we will proceede by interviewing teachers and participants, and than we will extend the research to the city of Castrignano, with the help of the Councillor for Culture of Castrignano de Greci.

this are the result of the first three interviews:

foto 4

foto 5

foto 1 (2)

foto 2 (2)

foto 3 (1)

drowing the wikipedia model