Explore the Data

Below please find the visualizations at the heart of Terror and Aesthetics. Each visualization draws from a dataset that records event information related to either terrorism or war. In both cases, the clusters of spheres on the screen are staggered to event intensity as recorded in these datasets. The slider beneath each visualization allows one to move forward through time and subsequent events. *** Technical issues have currently rendered the sliders out of service. Please check back soon for updates.***

Beta – Terror

var all = [];
var moderate = [];
var high = [];
var slider;
var sliderval;
var terror;
var trow;
var tw;
var tk;
var ttext;

function preload() {
  terror = loadTable("//terrordatavis.commons.gc.cuny.edu/files/2016/01/test-gtd_11to14_0615dist.csv", "csv", "header");
}

function setup() {
  createCanvas(800, 400, WEBGL);
  l = new Tlight(55, 55, 55, 5, 0.15, 0.15, 0.50, 0.0, .75);
  //perspective(50 / 180 * PI, width / height, 0.1, 100);

  slider = createSlider(0, terror.getRowCount()-1, 5000);
  slider.style('width', '800px');
 
 
  for (var i = 0; i < 120; i++) {
    //xd = xdistribution[i];
    all[i] = new Tsphere(random(-400, 400), random(-50, 50), random(-150, 150), 0.006, 0.01, 0.01, 20);
  }

  for (var i = 0; i < 50; i++) {
    //xd = xdistribution[i];
    moderate[i] = new Tsphere(random(-400, 400), random(-150, 150), random(-150, 150), 0.006, 0.01, 0.1, 50);
  }
  
   for (var i = 0; i < 50; i++) {
    //xd = xdistribution[i];
    high[i] = new Tsphere(random(-400, 400), random(-200, 200), random(-150, 150), 0.006, 0.01, 0.1, 50);
  }

}

function draw() {
  background(0);
  //noLoop();
  l.renderd();
  //l.panx();
  //l.pany();
  //l.panz();
  l.cyclebrightness();

  for (var i = 0; i < all.length; i++) {
    all[i].appear();
    all[i].movex();
  }


  sliderval = slider.value();
  trow = terror.getRow(sliderval);
  
  tk = trow.get('nkill');
  tw = trow.get('nwound');

  if (tk + tw > 50) {
    for (var i = 0; i < moderate.length; i++) {
      moderate[i].appear();
      moderate[i].movex();
    }
  }
  
   if (tk + tw > 50) {
    for (var i = 0; i < moderate.length; i++) {
      high[i].appear();
      high[i].movex();
    }
  }
  //renderText(trow.get('summary'));
  //print(trow.get('summary'));
  //var p = createP(trow.get('summary'))


}

function Tsphere(x, y, z, dx, dy, dz, size) {
  this.x = x;
  this.y = y;
  this.z = z;
  this.dz = dz;
  this.dx = dx;
  this.dy = dy;
  this.size = size;

  this.appear = function() {
    ambientMaterial(255);
    translate(this.x, this.y, this.z)
    sphere(size);
  }

  this.movez = function() {
    this.z += this.dz;
    if ((this.z > 250) || (this.z < -150)) {
      this.dz = this.dz * -1;
    }
  }

  this.movex = function() {
    this.x += this.dx;
    if ((this.x > 400) || (this.x < -400)) {
      this.dx = this.dx * -1;
    }
  }
  this.movey = function() {
    this.y += this.dy;
    if ((this.y > 200) || (this.y < -200)) {
      this.dy = this.dy * -1;
    }
  }

}

function Tlight(r, g, b, a, x, y, z, p, cb) {
  this.r = r;
  this.g = g;
  this.b = b;
  this.a = a;
  this.x = x;
  this.y = y;
  this.z = z;
  this.p = p;
  this.cb = cb;

  this.renderp = function() {
    pointLight(this.r, this.g, this.b, this.a, this.x, this.y, this.z);
  }

  this.renderd = function() {
    directionalLight(this.r, this.g, this.b, this.a, this.x, this.y, this.z);

  }

  this.panx = function() {
    this.x += this.p;
    if ((this.x > 1) || (this.x < -1)) {
      this.p = this.p * -1;
    }
  }

  this.pany = function() {
    this.y += this.p;
    if ((this.y > 1) || (this.y < -1)) {
      this.p = this.p * -1;
    }
  }

  this.panz = function() {
    this.z += this.p;
    if ((this.z > 1) || (this.z < -1)) {
      this.p = this.p * -1;
    }
  }

  this.cyclebrightness = function() {
    this.r += this.cb;
    this.g += this.cb;
    this.b += this.cb;
    if ((this.r > 150) || (this.r < 0)) {
      this.cb = this.cb * -1;
    }

  }
}

Beta – War

var all = [];
var moderate = [];
var high = [];
var slider;
var sliderval;
var war;
var wrow;
var wi;
var wtext;

function preload() {
  war = loadTable("//terrordatavis.commons.gc.cuny.edu/files/2016/01/test-124920_1ucdpprio-armed-conflict-dataset_v.4-2015.csv", "csv", "header");
}

function setup() {
  createCanvas(800, 400, WEBGL);
  l = new Tlight(55, 55, 55, 5, 0.15, 0.15, 0.50, 0.0, .75);
  //perspective(50 / 180 * PI, width / height, 0.1, 100);

  slider = createSlider(0, war.getRowCount()-1, 100);
  slider.style('width', '800px');

  for (var i = 0; i < 120; i++) {
    //xd = xdistribution[i];
    all[i] = new Tsphere(random(-400, 400), random(-50, 50), random(-150, 150), 0.006, 0.01, 0.01, 20);
  }

  for (var i = 0; i < 50; i++) {
    //xd = xdistribution[i];
    moderate[i] = new Tsphere(random(-400, 400), random(-150, 150), random(-150, 150), 0.006, 0.01, 0.1, 50);
  }
  
   for (var i = 0; i < 50; i++) {
    //xd = xdistribution[i];
    high[i] = new Tsphere(random(-400, 400), random(-200, 200), random(-150, 150), 0.006, 0.01, 0.1, 50);
  }

}

function draw() {
  background(0);
  //noLoop();
  l.renderd();
  //l.panx();
  //l.pany();
  //l.panz();
  l.cyclebrightness();

  for (var i = 0; i < all.length; i++) {
    all[i].appear();
    all[i].movex();
  }

  sliderval = slider.value();
  wrow = war.getRow(sliderval);
  
  wi = wrow.get('IntensityLevel');
  

  if (wi > 1) {
    for (var i = 0; i < moderate.length; i++) {
      moderate[i].appear();
      moderate[i].movex();
    }
  }
  
   if (wi > 2) {
    for (var i = 0; i < moderate.length; i++) {
      high[i].appear();
      high[i].movex();
    }
  }
  //renderText(trow.get('summary'));
  //print(trow.get('summary'));
  //var p = createP(trow.get('summary'))


}

function Tsphere(x, y, z, dx, dy, dz, size) {
  this.x = x;
  this.y = y;
  this.z = z;
  this.dz = dz;
  this.dx = dx;
  this.dy = dy;
  this.size = size;

  this.appear = function() {
    ambientMaterial(255);
    translate(this.x, this.y, this.z)
    sphere(size);
  }

  this.movez = function() {
    this.z += this.dz;
    if ((this.z > 250) || (this.z < -150)) {
      this.dz = this.dz * -1;
    }
  }

  this.movex = function() {
    this.x += this.dx;
    if ((this.x > 400) || (this.x < -400)) {
      this.dx = this.dx * -1;
    }
  }
  this.movey = function() {
    this.y += this.dy;
    if ((this.y > 200) || (this.y < -200)) {
      this.dy = this.dy * -1;
    }
  }

}

function Tlight(r, g, b, a, x, y, z, p, cb) {
  this.r = r;
  this.g = g;
  this.b = b;
  this.a = a;
  this.x = x;
  this.y = y;
  this.z = z;
  this.p = p;
  this.cb = cb;

  this.renderp = function() {
    pointLight(this.r, this.g, this.b, this.a, this.x, this.y, this.z);
  }

  this.renderd = function() {
    directionalLight(this.r, this.g, this.b, this.a, this.x, this.y, this.z);

  }

  this.panx = function() {
    this.x += this.p;
    if ((this.x > 1) || (this.x < -1)) {
      this.p = this.p * -1;
    }
  }

  this.pany = function() {
    this.y += this.p;
    if ((this.y > 1) || (this.y < -1)) {
      this.p = this.p * -1;
    }
  }

  this.panz = function() {
    this.z += this.p;
    if ((this.z > 1) || (this.z < -1)) {
      this.p = this.p * -1;
    }
  }

  this.cyclebrightness = function() {
    this.r += this.cb;
    this.g += this.cb;
    this.b += this.cb;
    if ((this.r > 150) || (this.r < 0)) {
      this.cb = this.cb * -1;
    }

  }
}

For more information on how the data is being represented please see the Review of Practice. For more information on why the data is being represented this way, please see the Rationale.