Skip to content

Instantly share code, notes, and snippets.

@aaizemberg
Last active December 11, 2015 14:38
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save aaizemberg/d8375ff90976df4dd789 to your computer and use it in GitHub Desktop.
Save aaizemberg/d8375ff90976df4dd789 to your computer and use it in GitHub Desktop.
coordenadas paralelas con p5js
<!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>
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
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);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment