How do I draw a social network diagram in Processing.

John_in_Syddney

I have data consisting of a list of nodes (all with unique ID) and a list of links between nodes. How can I draw the network of linked nodes in Processing?

koogs

draw all the nodes in a circle. remember where they are.

draw lines between the linked nodes.

Chrisir

In addition: Make a class node with position and text and connection

Make an ArrayList of that class

jeremydouglass

There are a LOT of different network layout algorithms. You can play around with many of them on your data using e.g. yEd to try out what a layout approach might look like. A circle is one easy way, but it depends on what you are trying to visualize.

Is this a directed graph (digraph) or an undirected graph? Is there a first / root node?

Do you want a heirarchical layout moving in one direction, or an organic layout spreading in every direction?

Do the links have weights -- are there multiple links between some pairs, or are should some links be shorter / thicker / stronger than others?

John_in_Syddney

Thanks for guidance. A lot to explore! John.

Chrisir

// family tree

// code from the forum 

// -------------------------------------------------------

ArrayList<Node> nodes = new ArrayList();
ArrayList<Link> links = new ArrayList();

void setup() {
  size(1200, 600);
  // init nodes 
  // parents 
  nodes.add( new Node("Anne", width/2-30, 30 ));  
  nodes.add( new Node("Marc", width/2+30, 30  ));

  // children 
  nodes.add( new Node("Fid", width/2-230, 170  ));
  nodes.add( new Node("Spot", width/2+230, 170  ));

  // they marry
  nodes.add( new Node("Mary", width/2-230-60, 240  ));
  nodes.add( new Node("Jane", width/2+230+60, 240  ));

  // grand children: Clifford is the son of Fid&Mary (x-values more negative)
  nodes.add( new Node("Clifford", width/2-430, 240  ));

  // grand children: Pat & Tom are the children of Spot&Jane (x-values more positive)
  nodes.add( new Node("Pat", width/2+430, 240 ));
  nodes.add( new Node("Tom", width/2+530, 240 ));

  // ----------------------

  // init links (the actual lines)

  // Fid has 2 parents 
  links.add( new Link("Fid", "Marc") );
  links.add( new Link("Fid", "Anne") );

  // Spot has the same 2 parents 
  links.add( new Link("Spot", "Marc") );
  links.add( new Link("Spot", "Anne") );

  // Clifford has only one parent
  links.add( new Link("Clifford", "Fid") );
  links.add( new Link("Clifford", "Mary") );

  // grand children: Pat & Tom are the children of Spot (x-values more positive)
  links.add( new Link("Pat", "Spot") );
  links.add( new Link("Tom", "Spot") );
  links.add( new Link("Pat", "Jane") );
  links.add( new Link("Tom", "Jane") );
}

void draw() {
  background(255);
  for (int i=0; i<links.size (); i++)
  {
    links.get(i).draw();
  }
  for (int i=0; i<nodes.size (); i++) 
  {
    nodes.get(i).draw();
  }
}

// =============================================

class Node {

  String name;
  float px, py;
  color c;

  // constr
  Node(String name_, 
    float px_, float py_) {
    px=px_;
    py=py_;
    name=name_;
    c=color(random(255), random(255), random(255));
  } // constr

  void draw() {
    // show a circle 
    fill(c);
    stroke(0);
    ellipse(px, py, 20, 20);

    // show the name of the node 
    fill(0);
    textAlign(CENTER, CENTER);
    text(name, px-22, py-22);

    // the mouse over effect 
    if (dist(mouseX, mouseY, px, py)<=10) {
      // show the name of the node 
      fill(0);
      textAlign(CENTER, CENTER);
      text(name, px, py-22);
    }
  } // method
} // class

// ==========================================

class Link {

  String from;
  String to;

  // constr
  Link(String _from, String _to) {
    from=_from;
    to=_to;
  } // constr

  void draw() {
    // show the lines 
    float px1=-1, py1=-1, px2=-1, py2=-1;
    for (int i=0; i<nodes.size (); i++) {
      if (nodes.get(i).name.equals(from)) {
        px1 = nodes.get(i).px;
        py1 = nodes.get(i).py;
      }
      if (nodes.get(i).name.equals(to)) {
        px2 = nodes.get(i).px;
        py2 = nodes.get(i).py;
      }
    } // for
    stroke(0);
    line(px1, py1, px2, py2);
  } // method
} // class 
//

John_in_Syddney

Hi Chrisir, Thanks heaps for what you have done. This will help me a great deal and gives me something to build on! Much appreciated. John.

Chrisir

;-)