D3 Examples - coordenadas paralelas con p5js

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.19/p5.min.js"></script>
  <meta charset="utf-8">
  <title>Coordenadas paralelas con P5JS (iris dataset)</title>
</head>
<body>
​
  <div id="p5js"></div>
​
<script>
var w = 900;
var h = 500;
var table;
​
var sl = [];
var sw = [];
var pl = [];
var pw = [];
var especie = [];
​
function preload() {
  table =   loadTable("https://gist.githubusercontent.com/aaizemberg/d8375ff90976df4dd789/raw/92b1a6a59a65590966567ef5363f2b85381c60f4/iris.csv", "csv", "header");
}
​
function setup() {
  var myCanvas = createCanvas(w, h);
  myCanvas.parent('p5js');
  background(0);
  for (var r = 0; r < table.getRowCount(); r++) {
    sl.push(+table.getString(r, 0));
    sw.push(+table.getString(r, 1));
    pl.push(+table.getString(r, 2));
    pw.push(+table.getString(r, 3));
    especie.push(table.getString(r, 4));
  }
  // var especies = _.uniq(especie);
  ejes();
  coordenadas_paralelas();
}
​
function ejes() {
  stroke(255);
  for (var i = 0; i < 4; i++) {
    var x = map(i, 0, 3, 0 + 10, w - 10);
    line(x,10,x,h-10);
  }
}
​
function coordenadas_paralelas() {
  var x0 = map(0, 0, 3, 0 + 10, w - 10);
  var x1 = map(1, 0, 3, 0 + 10, w - 10);
  var x2 = map(2, 0, 3, 0 + 10, w - 10);
  var x3 = map(3, 0, 3, 0 + 10, w - 10);
  
  for (var i = 0; i < sl.length; i++) { 
​
    if (especie[i] == "Iris-setosa") { 
      stroke(255, 0, 0);
    } else if (especie[i] == "Iris-versicolor") { 
      stroke(0, 255, 0);
    } else { 
      stroke(0, 0, 255);
    }
    
    var y0 = map(sl[i], min(sl), max(sl), h - 10, 10 );
    var y1 = map(sw[i], min(sw), max(sw), h - 10, 10 );
    var y2 = map(pl[i], min(pl), max(pl), h - 10, 10 );
    var y3 = map(pw[i], min(pw), max(pw), h - 10, 10 );
  
    line(x0, y0, x1, y1);
    line(x1, y1, x2, y2);
    line(x2, y2, x3, y3);
  }
}
</script>  
  
</body>
</html>
    