block by aaizemberg d8375ff90976df4dd789

coordenadas paralelas con p5js

Full Screen

index.html

<!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>

iris.csv

sl,sw,pl,pw,class
5.1,3.5,1.4,0.2,Iris-setosa
4.9,3.0,1.4,0.2,Iris-setosa
4.7,3.2,1.3,0.2,Iris-setosa
4.6,3.1,1.5,0.2,Iris-setosa
5.0,3.6,1.4,0.2,Iris-setosa
5.4,3.9,1.7,0.4,Iris-setosa
4.6,3.4,1.4,0.3,Iris-setosa
5.0,3.4,1.5,0.2,Iris-setosa
4.4,2.9,1.4,0.2,Iris-setosa
4.9,3.1,1.5,0.1,Iris-setosa
5.4,3.7,1.5,0.2,Iris-setosa
4.8,3.4,1.6,0.2,Iris-setosa
4.8,3.0,1.4,0.1,Iris-setosa
4.3,3.0,1.1,0.1,Iris-setosa
5.8,4.0,1.2,0.2,Iris-setosa
5.7,4.4,1.5,0.4,Iris-setosa
5.4,3.9,1.3,0.4,Iris-setosa
5.1,3.5,1.4,0.3,Iris-setosa
5.7,3.8,1.7,0.3,Iris-setosa
5.1,3.8,1.5,0.3,Iris-setosa
5.4,3.4,1.7,0.2,Iris-setosa
5.1,3.7,1.5,0.4,Iris-setosa
4.6,3.6,1.0,0.2,Iris-setosa
5.1,3.3,1.7,0.5,Iris-setosa
4.8,3.4,1.9,0.2,Iris-setosa
5.0,3.0,1.6,0.2,Iris-setosa
5.0,3.4,1.6,0.4,Iris-setosa
5.2,3.5,1.5,0.2,Iris-setosa
5.2,3.4,1.4,0.2,Iris-setosa
4.7,3.2,1.6,0.2,Iris-setosa
4.8,3.1,1.6,0.2,Iris-setosa
5.4,3.4,1.5,0.4,Iris-setosa
5.2,4.1,1.5,0.1,Iris-setosa
5.5,4.2,1.4,0.2,Iris-setosa
4.9,3.1,1.5,0.1,Iris-setosa
5.0,3.2,1.2,0.2,Iris-setosa
5.5,3.5,1.3,0.2,Iris-setosa
4.9,3.1,1.5,0.1,Iris-setosa
4.4,3.0,1.3,0.2,Iris-setosa
5.1,3.4,1.5,0.2,Iris-setosa
5.0,3.5,1.3,0.3,Iris-setosa
4.5,2.3,1.3,0.3,Iris-setosa
4.4,3.2,1.3,0.2,Iris-setosa
5.0,3.5,1.6,0.6,Iris-setosa
5.1,3.8,1.9,0.4,Iris-setosa
4.8,3.0,1.4,0.3,Iris-setosa
5.1,3.8,1.6,0.2,Iris-setosa
4.6,3.2,1.4,0.2,Iris-setosa
5.3,3.7,1.5,0.2,Iris-setosa
5.0,3.3,1.4,0.2,Iris-setosa
7.0,3.2,4.7,1.4,Iris-versicolor
6.4,3.2,4.5,1.5,Iris-versicolor
6.9,3.1,4.9,1.5,Iris-versicolor
5.5,2.3,4.0,1.3,Iris-versicolor
6.5,2.8,4.6,1.5,Iris-versicolor
5.7,2.8,4.5,1.3,Iris-versicolor
6.3,3.3,4.7,1.6,Iris-versicolor
4.9,2.4,3.3,1.0,Iris-versicolor
6.6,2.9,4.6,1.3,Iris-versicolor
5.2,2.7,3.9,1.4,Iris-versicolor
5.0,2.0,3.5,1.0,Iris-versicolor
5.9,3.0,4.2,1.5,Iris-versicolor
6.0,2.2,4.0,1.0,Iris-versicolor
6.1,2.9,4.7,1.4,Iris-versicolor
5.6,2.9,3.6,1.3,Iris-versicolor
6.7,3.1,4.4,1.4,Iris-versicolor
5.6,3.0,4.5,1.5,Iris-versicolor
5.8,2.7,4.1,1.0,Iris-versicolor
6.2,2.2,4.5,1.5,Iris-versicolor
5.6,2.5,3.9,1.1,Iris-versicolor
5.9,3.2,4.8,1.8,Iris-versicolor
6.1,2.8,4.0,1.3,Iris-versicolor
6.3,2.5,4.9,1.5,Iris-versicolor
6.1,2.8,4.7,1.2,Iris-versicolor
6.4,2.9,4.3,1.3,Iris-versicolor
6.6,3.0,4.4,1.4,Iris-versicolor
6.8,2.8,4.8,1.4,Iris-versicolor
6.7,3.0,5.0,1.7,Iris-versicolor
6.0,2.9,4.5,1.5,Iris-versicolor
5.7,2.6,3.5,1.0,Iris-versicolor
5.5,2.4,3.8,1.1,Iris-versicolor
5.5,2.4,3.7,1.0,Iris-versicolor
5.8,2.7,3.9,1.2,Iris-versicolor
6.0,2.7,5.1,1.6,Iris-versicolor
5.4,3.0,4.5,1.5,Iris-versicolor
6.0,3.4,4.5,1.6,Iris-versicolor
6.7,3.1,4.7,1.5,Iris-versicolor
6.3,2.3,4.4,1.3,Iris-versicolor
5.6,3.0,4.1,1.3,Iris-versicolor
5.5,2.5,4.0,1.3,Iris-versicolor
5.5,2.6,4.4,1.2,Iris-versicolor
6.1,3.0,4.6,1.4,Iris-versicolor
5.8,2.6,4.0,1.2,Iris-versicolor
5.0,2.3,3.3,1.0,Iris-versicolor
5.6,2.7,4.2,1.3,Iris-versicolor
5.7,3.0,4.2,1.2,Iris-versicolor
5.7,2.9,4.2,1.3,Iris-versicolor
6.2,2.9,4.3,1.3,Iris-versicolor
5.1,2.5,3.0,1.1,Iris-versicolor
5.7,2.8,4.1,1.3,Iris-versicolor
6.3,3.3,6.0,2.5,Iris-virginica
5.8,2.7,5.1,1.9,Iris-virginica
7.1,3.0,5.9,2.1,Iris-virginica
6.3,2.9,5.6,1.8,Iris-virginica
6.5,3.0,5.8,2.2,Iris-virginica
7.6,3.0,6.6,2.1,Iris-virginica
4.9,2.5,4.5,1.7,Iris-virginica
7.3,2.9,6.3,1.8,Iris-virginica
6.7,2.5,5.8,1.8,Iris-virginica
7.2,3.6,6.1,2.5,Iris-virginica
6.5,3.2,5.1,2.0,Iris-virginica
6.4,2.7,5.3,1.9,Iris-virginica
6.8,3.0,5.5,2.1,Iris-virginica
5.7,2.5,5.0,2.0,Iris-virginica
5.8,2.8,5.1,2.4,Iris-virginica
6.4,3.2,5.3,2.3,Iris-virginica
6.5,3.0,5.5,1.8,Iris-virginica
7.7,3.8,6.7,2.2,Iris-virginica
7.7,2.6,6.9,2.3,Iris-virginica
6.0,2.2,5.0,1.5,Iris-virginica
6.9,3.2,5.7,2.3,Iris-virginica
5.6,2.8,4.9,2.0,Iris-virginica
7.7,2.8,6.7,2.0,Iris-virginica
6.3,2.7,4.9,1.8,Iris-virginica
6.7,3.3,5.7,2.1,Iris-virginica
7.2,3.2,6.0,1.8,Iris-virginica
6.2,2.8,4.8,1.8,Iris-virginica
6.1,3.0,4.9,1.8,Iris-virginica
6.4,2.8,5.6,2.1,Iris-virginica
7.2,3.0,5.8,1.6,Iris-virginica
7.4,2.8,6.1,1.9,Iris-virginica
7.9,3.8,6.4,2.0,Iris-virginica
6.4,2.8,5.6,2.2,Iris-virginica
6.3,2.8,5.1,1.5,Iris-virginica
6.1,2.6,5.6,1.4,Iris-virginica
7.7,3.0,6.1,2.3,Iris-virginica
6.3,3.4,5.6,2.4,Iris-virginica
6.4,3.1,5.5,1.8,Iris-virginica
6.0,3.0,4.8,1.8,Iris-virginica
6.9,3.1,5.4,2.1,Iris-virginica
6.7,3.1,5.6,2.4,Iris-virginica
6.9,3.1,5.1,2.3,Iris-virginica
5.8,2.7,5.1,1.9,Iris-virginica
6.8,3.2,5.9,2.3,Iris-virginica
6.7,3.3,5.7,2.5,Iris-virginica
6.7,3.0,5.2,2.3,Iris-virginica
6.3,2.5,5.0,1.9,Iris-virginica
6.5,3.0,5.2,2.0,Iris-virginica
6.2,3.4,5.4,2.3,Iris-virginica
5.9,3.0,5.1,1.8,Iris-virginica

iris.pde

int w = 600, h = 400;
Table table;
String url = "https://gist.githubusercontent.com/aaizemberg/d8375ff90976df4dd789/raw/d5a4609410028e38b28b5187d59aef37d57f0e4c/iris.csv";
float[] v0 = {};
float[] v1 = {};
float[] v2 = {};
float[] v3 = {};
String[] v4 = {};

void setup() {
  float x;
  size(600, 400);
  background(0);
  stroke(255);
  for (int i = 0; i < 4; i++) {
    x = map(i, 0, 3, 0 + 10, w - 10);
    line( 
      x, 
      10, 
      x, 
      h-10);
  }
  table = loadTable(url, "header,csv");
  
  for (TableRow row : table.rows()) {

    float sl = row.getFloat("sl");
    float sw = row.getFloat("sw");
    float pl = row.getFloat("pl");
    float pw = row.getFloat("pw");
    String species = row.getString("class");

    v0 = append(v0, sl); 
    v1 = append(v1, sw); 
    v2 = append(v2, pl); 
    v3 = append(v3, pw); 
    v4 = append(v4, species);
  }

  float x0 = map(0, 0, 3, 0 + 10, w - 10);
  float x1 = map(1, 0, 3, 0 + 10, w - 10);
  float x2 = map(2, 0, 3, 0 + 10, w - 10);
  float x3 = map(3, 0, 3, 0 + 10, w - 10);
  
  for (TableRow row : table.rows()) {
    float sl = row.getFloat("sl");
    float sw = row.getFloat("sw");
    float pl = row.getFloat("pl");
    float pw = row.getFloat("pw");
    String species = row.getString("class");

    if (species.equals("Iris-setosa")) { 
      stroke(255, 0, 0);
    } else if (species.equals("Iris-versicolor")) { 
      stroke(0, 255, 0);
    } else { 
      stroke(0, 0, 255);
    }

    float y0 = map(sl, min(v0), max(v0), h - 10, 10 );
    float y1 = map(sw, min(v1), max(v1), h - 10, 10 );
    float y2 = map(pl, min(v2), max(v2), h - 10, 10 );
    float y3 = map(pw, min(v3), max(v3), h - 10, 10 );

    line(x0, y0, x1, y1);
    line(x1, y1, x2, y2);
    line(x2, y2, x3, y3);
 
  }
}