D3 Examples - Assignment 4 Parallel Coordinates

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title> D3: A Parallel Coordinates of Selected Cars</title>
        <script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
        <style type="text/css">
            .svg{ font: 10px sans-serif; }
            .background path{ 
                fill: none;
                stroke: #aaa;
                shape-rendering: crispEdges;
                }
            .axis line,
            .axis path{
                fill: none;
                stroke: #000;
                shape-rendering: crispEdges;
            }
        </style>
    </head>
    <body>
        <script type="text/javascript">
        /*
            Reference: https://bl.ocks.org/mbostock/1341021
        */
​
            var title = "The Height, Width, Length, and the Number of Doors of Cars";
​
            var margin = {top:5, right:5, bottom:100, left:100};
            var w_full = 1200;
            var h_full = 600;
​
            var w = w_full - margin.right - margin.left;
            var h = h_full - margin.top - margin.bottom;
​
            var x = d3.scale.ordinal().rangePoints([0,w],1),
                y = {};
​
            var line = d3.svg.line(),
                axis = d3.svg.axis().orient("left"),
                background,
                foreground;
​
​
            var svg = d3.select("body")
                        .append("svg")
                        .attr("width",w_full)
                        .attr("height",100)
                        .append("g")
                        .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
​
            svg.append("text")
               .text(title)
               .attr("x",w_full/2)
               .attr("y",50)
               .style("text-anchor","middle")
               .style("fill","black")
               .style("font-size",20);
​
            svg = d3.select("body")
                        .append("svg")
                        .attr("width",w_full)
                        .attr("height",h_full)
                        .append("g")
                        .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
​
            d3.csv("cars.csv", function(error,cars){
                x.domain(dimensions = d3.keys(cars[0]).filter(function(d){
                    return d != "Model" && (y[d] = d3.scale.linear()
                                                     .domain(d3.extent(cars, function(p){return +p[d];}))
                                                     .range([h,0]));
                }));
​
                background = svg.append("g")
                                .attr("class","background")
                                .selectAll("path")
                                .data(cars)
                                .enter()
                                .append("path")
                                .attr("d",path);
​
                var g = svg.selectAll(".dimensions")
                           .data(dimensions)
                           .enter()
                           .append("g")
                           .attr("class","dimensions")
                           .attr("transform", function(d) { return "translate(" + x(d) + ")"; });
​
                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; });
​
​
                function path(d){
                    return line(dimensions.map(function(p){return [x(p), y[p](d[p])]; }));
                }
            });
​
​
​
        </script>
    </body>
</html>
    