Parallel Coordinates with Patient Data

by Eamonn Maguire

HTML

<h3>Patients</h3>

<div id="parallel-coords"></div>
<pre>
Blood Glucose,Cholesterol,HDL Ratio,LDL...

CSS

pre {
    display:none;
}
svg .foreground path {
    fill: none;
    stroke: #F15A29;
    stroke-opacity: .7;
}
.axis path, .axis line {
    fill: none;
    stroke:black;
    shape-rendering: crispEdges;
}
.brush .extent {
    fill-opacity: .1;
    stroke: #fff;
    shape-rendering: crispEdges;
}

JavaScript

/**
 * Created by eamonnmaguire on 28/01/2014.
 * usage
 * parallel_coordinates.loadAndDraw("#parallelCoordinates", ["assets/data/test.csv"], 1000, 300, ["Department", "Time"], {"colorGroup":"Department"});
 */


var parallel_coordinates = (function () {

    var margins = {
        "left": 30,
            "right": 10,
            "top": 19,
            "bottom": 0
    },
    width, height;

    var x,
    y = {},
    dragging = {},
    variablesToDimension = {};

    var line = d3.svg.line(),
        axis = d3.svg.axis().orient("left"),
        foreground = {};

    var colorGroupColumn = "";

    var colors;


    var position = function (d) {
        var v = dragging[d];
        return v == null ? x(d) : v;
    };

    var transition = function (g) {
        return g.transition().duration(500);
    };

    var path = function (d) {
        return line(dimensions.map(function (p) {
            return [position(p), d.value_scale[p](d[p])];
        }));
    };


    var brush = function () {
        // change this to consider each axis individually when calculating whether or not something falls with the extent.
        // active = data_index -> p -> extents
        var actives = {};

        for (var fileIn in foreground) {
            dimensions.forEach(function (p) {
                if (!y[fileIn][p].brush.empty()) {
                    if (!(fileIn in actives)) {
                        actives[fileIn] = {}
                    }
                    actives[fileIn][p] = y[fileIn][p].brush.extent();
                }
            });
        }

        d3.selectAll("g.foreground path").style("display", function (d) {
            var on = true;
            for (var activeKey in actives) {
                for (var activeDimension in actives[activeKey]) {

                    try {
                        if (typeof d[activeDimension] === "string") {
                            var scale = d.value_scale[variablesToDimension[d[activeDimension]]];
                   ...