Assignment 4 Parallel Coordinates

<!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>

https://d3js.org/d3.v3.min.js