D3 Examples - Assignment 4 - Parallel Coordinates using D3

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<!-- Example based on https://bl.ocks.org/jasondavies/1341281 -->
<style>
    svg {
        font: 12px sans-serif;
    }
​
    .background path {
        fill: none;
        stroke: #ddd;
        shape-rendering: crispEdges;
    }
​
    .foreground path {
        fill: none;
        stroke: steelblue;
    }
​
    .brush .extent {
        fill-opacity: .3;
        stroke: #fff;
        shape-rendering: crispEdges;
    }
​
    .title {
        font-family: sans-serif;
        font-size: 20px;
    }
​
    .axis line,
    .axis path {
        fill: none;
        stroke: #000;
        shape-rendering: crispEdges;
    }
​
    .axis text {
        text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff;
        cursor: move;
    }
</style>
​
<body>
    <script src="https://d3js.org/d3.v3.min.js"></script>
    <script>
        var margin = {
                top: 100,
                right: 10,
                bottom: 10,
                left: 10
            },
            width = 960 - margin.left - margin.right,
            height = 500 - margin.top - margin.bottom;
​
        var x = d3.scale.ordinal().rangePoints([0, width], 1),
            y = {},
            dragging = {};
​
        var line = d3.svg.line(),
            axis = d3.svg.axis().orient("left"),
            background,
            foreground;
​
        var svg = d3.select("body").append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
            .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
​
        //Create Title 
        svg.append("text")
            .attr("class", "title")
            .attr("x", width / 2)
            .attr("y", -50)
            .style("text-anchor", "middle")
            .style("font-weight", "bolder")
            .text("Parallel Coordinates using D3");
​
        d3.csv("cars.csv", function (error, cars) {
​
            cars = cars.filter(function (row) {
                return row['Year'] == '9';
            })
​
            // Extract the list of dimensions and create a scale for each.
            x.domain(dimensions = d3.keys(cars[0]).filter(function (d) {
                return d != "Make" && d != "Year" && (y[d] = d3.scale.linear()
                    .domain(d3.extent(cars, function (p) {
                        return +p[d];
                    }))
                    .range([height, 0]));
            }));
​
            // Add grey background lines for context.
            background = svg.append("g")
                .attr("class", "background")
                .selectAll("path")
                .data(cars)
                .enter().append("path")
                .attr("d", path);
​
            // Add blue foreground lines for focus.
            foreground = svg.append("g")
                .attr("class", "foreground")
                .selectAll("path")
                .data(cars)
                .enter().append("path")
                .attr("d", path);
​
            // Add a group element for each dimension.
            var g = svg.selectAll(".dimension")
                .data(dimensions)
                .enter().append("g")
                .attr("class", "dimension")
                .attr("transform", function (d) {
                    return "translate(" + x(d) + ")";
                })
                .call(d3.behavior.drag()
                    .origin(function (d) {
                        return {
                            x: x(d)
                        };
                    })
                    .on("dragstart", function (d) {
                        dragging[d] = x(d);
                        background.attr("visibility", "hidden");
                    })
                    .on("drag", function (d) {
                        dragging[d] = Math.min(width, Math.max(0, d3.event.x));
                        foreground.attr("d", path);
                        dimensions.sort(function (a, b) {
                            return position(a) - position(b);
                        });
                        x.domain(dimensions);
                        g.attr("transform", function (d) {
                            return "translate(" + position(d) + ")";
                        })
                    })
                    .on("dragend", function (d) {
                        delete dragging[d];
                        transition(d3.select(this)).attr("transform", "translate(" + x(d) + ")");
                        transition(foreground).attr("d", path);
                        background
                            .attr("d", path)
                            .transition()
                            .delay(500)
                            .duration(0)
                            .attr("visibility", null);
                    }));
​
            // Add an axis and title.
            g.append("g")
                .attr("class", "axis")
                .each(function (d) {
                    d3.select(this).call(axis.scale(y[d]));
                })
                .append("text")
                .style("text-anchor", "middle")
                .attr("y", -9)
                .text(function (d) {
                    return d;
                });
​
            // Add and store a brush for each axis.
            g.append("g")
                .attr("class", "brush")
                .each(function (d) {
                    d3.select(this).call(y[d].brush = d3.svg.brush().y(y[d]).on("brushstart", brushstart).on(
                        "brush", brush));
                })
                .selectAll("rect")
                .attr("x", -8)
                .attr("width", 16);
        });
​
        function position(d) {
            var v = dragging[d];
            return v == null ? x(d) : v;
        }
​
        function transition(g) {
            return g.transition().duration(500);
        }
​
        // Returns the path for a given data point.
        function path(d) {
            return line(dimensions.map(function (p) {
                return [position(p), y[p](d[p])];
            }));
        }
​
        function brushstart() {
            d3.event.sourceEvent.stopPropagation();
        }
​
        // Handles a brush event, toggling the display of foreground lines.
        function brush() {
            var actives = dimensions.filter(function (p) {
                    return !y[p].brush.empty();
                }),
                extents = actives.map(function (p) {
                    return y[p].brush.extent();
                });
            foreground.style("display", function (d) {
                return actives.every(function (p, i) {
                    return extents[i][0] <= d[p] && d[p] <= extents[i][1];
                }) ? null : "none";
            });
        }
    </script>
    </body>
    