Assignment 8

In-class exercise 1 - drawing nodes and edges

Here is the code we worked on in the first tutorial:


var edges = new Array();
var nodes = new Array();

var w = 1000;
var h = 500;

var Node = function(label){
  this.label = label;
  this.x = random(w);
  this.y = random(h);
  this.dx = 0;
  this.dy = 0;
};

Node.prototype.draw = function(){
  stroke(0);
  strokeWeight(0.5);

  fill("#b2df8a");
  ellipse(this.x,this.y,15,15);
};

var Edge = function(from, to){
  this.from = from;
  this.to = to;

  this.len = 50;
};

Edge.prototype.draw = function(){
  stroke(0);
  strokeWeight(0.35);
  line(this.from.x,this.from.y,this.to.x,this.to.y);
};

function findNode(doi){
   for (var i = 0; i < nodes.length; i++){
     n = nodes[i];

     if(n.label === doi){
       return n;
     }
   }
   return null;
}

function preload(){
  table = loadTable("data/Vispubdata-Grobid-min.csv","csv","header");
}

function setup() {
  createCanvas(w,h);

  console.log(table.getRowCount() + " total rows");
  console.log(table.getColumnCount() + " total cols");

  dois = table.getColumn("Paper.DOI");
  references = table.getColumn("References");

  dois = dois.slice(dois.length-500);
  references = references.slice(references.length-500);

  for (var i = 0; i < dois.length; i++){
     var thisNode = new Node(dois[i]);
     nodes.push(thisNode);
  }

  for (i = 0; i < dois.length; i++){
    var refs = references[i];

    var thisDOI = dois[i];
    thisNode = findNode(thisDOI);

    if(refs !== ""){
        var thisRefs = split(refs,";");

        for(var r = 0; r < thisRefs.length; r++){
           citedNode = findNode(thisRefs[r]);
           if(citedNode === null){
             console.log("This shouldn't happen: " + thisDOI + " trying to cite " + thisRefs[r]);
           }
           else{
             var edge = new Edge(thisNode, citedNode);
             edges.push(edge);
           }
        }
    }
  }

}

function draw() {
  background(250);

  for(var i = 0; i < edges.length; i++){
    edges[i].draw();
  }

  for(var i = 0; i < nodes.length; i++){
    nodes[i].draw();
  }
[$[Get Code]]

In-class exercise 2 - adding forces

Node.prototype.relax = function(){
  var ddx = 0;
  var ddy = 0;

  for(var j = 0; j < nodes.length; j++){
    n = nodes[j];

    if(n != this){

      var vx = this.x - n.x;
      var vy = this.y - n.y;
      var lensq = vx * vx + vy * vy;
      if(lensq == 0){
        ddx += random(1);
        ddy += random(1);
      }
      else if (lensq < 100 * 100){
        ddx += vx / lensq;
        ddy += vy / lensq;
      }
    }
  }

  var dlen = mag(ddx,ddy) / 2;
  if (dlen > 0){
    this.dx += ddx / dlen;
    this.dy += ddy / dlen;
  }
};

Node.prototype.update = function(){
  this.x += constrain(this.dx, -5, 5); //constrains a value between a min and a max
  this.y += constrain(this.dy, -5, 5);

  this.x = constrain(this.x,0,w);
  this.y = constrain(this.y,0,h);

  this.dx /= 2;
  this.dy /= 2;
};

//this function calculates an offset that moves the edge closer to its target length (len)
Edge.prototype.relax = function(){

  var vx = this.to.x - this.from.x;
  var vy = this.to.y - this.from.y;
  var d = mag(vx,vy); //calculates the length of a vector

  if(d > 0){
    var f = (this.len - d) / (d * 3);
    var dx = f * vx;
    var dy = f * vy;
    this.to.dx += dx;
    this.to.dy += dy;
    this.from.dx -= dx;
    this.from.dy -= dy;
  }
};

//update the main draw function to look like this:
function draw() {

  background(255);

  for(var i = 0; i < edges.length; i++){
    edges[i].relax();
  }

  for(var i = 0; i < nodes.length; i++){
    nodes[i].relax();
  }

  for(var i = 0; i < nodes.length; i++){
    nodes[i].update();
  }

  for(var i = 0; i < edges.length; i++){
    edges[i].draw();
  }
  //print(nodes.length);

  for(var i = 0; i < nodes.length; i++){
    nodes[i].draw();
  }

 
[$[Get Code]]

Assignment

Your task is to improve upon the graph visualization we started in class. Make a number of modifications:

  • Choose data that makes sense to display in regards to your research question. If you had some graphs on the sketches of your last assignment, build something similar to that. If you did not, think about which type of data makes sense to display as a graph for your question.
  • Make a number of additional modifications that make sense for what you want to show such as: displaying data for the nodes, modifying the edges (different shape, length, color, value, ...), changing the layout (you do not have to stick with a force-directed layout but you can).

You can use external libraries: https://p5js.org/libraries/, take code from other people, and take code from class but you need to reference your sources.

Annotate the website you generated with a meaningful title for your work and explain in a short paragraph what we are looking at (include an explanation if and how you filtered the data that you are showing). Also cite your sources here.

This will be the last assignment for the class. The week after we will talk about the exam.

Submitting the Assignment

WHAT - You should submit a single ZIP file called "YOUR_LASTNAME-Assignment8.zip" via email. It should contain:

  1. Your sketch and the website as described above. Make sure that your code runs. I will be using Google Chrome to look at the visual result of your exercise.

WHERE - You should email the file to petra.isenberg@inria.fr with the subject VA-Assignment8.

WHEN - Assignment 8 is due before "23:00 on Wednesday, Nov 30h.'''