Loads the Iris Dataset .csv and graphs the distribution of its points in paper.js's Paperscript; eat your heart out, d3.js

paperjsCSVGraphing.js

// Run at http://sketch.paperjs.org

function graphData(data){
    // Define the colors of the different species
    let colors = {
        'setosa': '#7fc97f',
        'versicolor':'#beaed4',
        'virginica':'#fdc086'
    }
    // Graph each datum
    data.forEach(function(flower) {
        let color = colors[flower.species];
        let flowerDot = new Path.Circle({
            center: [flower.sepal_length*100.0, 
                     flower.sepal_width *100.0],
            radius: 6,
            fillColor: color,
            opacity: 0.5
        });
        
        // Add hover events
        flowerDot.onMouseEnter = function() {
            this.fillColor = 'red';
            this.opacity = 1;
            this.text = new PointText({
                point: this.segments[0].point.add([8, -20]),
                justification: 'center',
                fillColor: 'black',
                content: flower.species
            });
            this.text.backing = new Path.Rectangle({
                rectangle: this.text.bounds.expand(3),
                strokeColor: 'black',
                fillColor: 'white',
                radius: new Size(2, 2)
            });
            this.text.backing.insertBelow(this.text);
        }
        flowerDot.onMouseLeave = function() {
            this.fillColor = color;
            this.opacity = 0.5;
            this.text.backing.remove();
            this.text.remove();
            this.text = null;
        }
    });
}

// We're not weenies, parse the .csv manually
function parseCSV(csvText) {
    let variableTypes = [];
    let data = [];
    let lines = csvText.split("\n");
    lines.forEach((line, lineIndex)=>{
        if(line){
            let datum = {};
            let elements = line.split(",");
            elements.forEach((element, elementIndex)=>{
                if(lineIndex == 0){
                    variableTypes.push(element);
                } else {
                    if(parseFloat(element)) { element = parseFloat(element); }
                    datum[variableTypes[elementIndex]] = element;
                }
            });
            if(lineIndex > 0){ data.push(datum); }
        }
    });
    return data;
}

// Handle Mouse Callbacks ------------
var dragging = false;
var lastMouse = new Point(0,0);
var delta = new Point(0,0);
function onMouseDrag(event) {
    let curPoint = view.projectToView(event.point);
    if (dragging) { delta.set((curPoint-lastMouse)/view.zoom); }
    dragging = true;
    lastMouse.set(curPoint);
}
function onMouseUp(event){ dragging = false; }
function onFrame(event) {
  view.translate(delta);
  if(dragging) { delta.set([0,0]); } 
  else { delta.set(delta / 1.1); }
}
function onMouseMove(event){
    lastMouse.set(view.projectToView(event.point));
}
// Manually handle mouseWheel events; fairly brittle...
document.addEventListener("wheel", (e) => {
    e = e || window.event;
    let delta = e.wheelDelta;
    paper.view.scale(1.0 + (delta*0.001), 
                     paper.view.viewToProject(lastMouse));
    e.returnValue = false;
});
// -------------------------------

// Set up the XMLHttpRequest and Graph the .csv data
let xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange=function() {
  if (xmlhttp.readyState==4 && xmlhttp.status==200) {
    graphData(parseCSV(xmlhttp.responseText));
  }
}
xmlhttp.open("GET", 'https://gist.githubusercontent.com/curran/a08a1080b88344b0c8a7/raw/d546eaee765268bf2f487608c537c05e22e4b221/iris.csv', false);
xmlhttp.send();