D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
aaizemberg
Full window
Github gist
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>
https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.19/p5.min.js