Parallel_Coordinates_d3

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Parallel Coordinates</title>
		<script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
		<style type="text/css">
		</style>
	</head>
<body>
<script>

var margin = {top: 50, right: 100, bottom: 50, left: 100};
var w = 1000;
var h = 750;

w = w - margin.left - margin.right;
h = h - margin.top - margin.bottom;

let attrs = [];
attrs.push("Totals_Violent_Assault");
attrs.push("Totals_Violent_Murder");
attrs.push("Totals_Violent_Rape");
attrs.push("Totals_Violent_Robbery");
attrs.push("Totals_Property_Burglary");

var x_coords = [];
x_coords.push(margin.left);
x_coords.push(margin.left + 175);
x_coords.push(margin.left + 175*2);
x_coords.push(margin.left + 175*3);
x_coords.push(w);

var x = d3.scaleOrdinal()
          .domain(attrs)
          .range(x_coords);

let y = {};

var line = d3.line();
var foreground;

var svg = d3.select("body").append("svg")
    .attr("width", w + margin.left + margin.right)
    .attr("height", h + margin.top + margin.bottom);

svg.append("text")
    .attr("x", (w)/2)
    .attr("y", (margin.top / 4))
    .attr("text-anchor", "middle")
		.attr("font-weight","bold")
    .style("font-size", "16px")
    .style("text-decoration", "underline")
    .text("Parallel Coordinates using County crime data");

for(var i=0;i<x_coords.length;i++)
{
  svg.append("text")
      .attr("x", x_coords[i])
      .attr("y", (3*margin.top / 4))
      .attr("text-anchor", "middle")
			.attr("font-weight","bold")
      .style("font-size", "12px")
      .text(attrs[i]);
}

svg.append("g")
   .attr("transform", "translate(" + margin.left + "," + margin.top + ")")

d3.csv("county_crime_sample.csv", function(error, csv_data) {

attrs.forEach(function(d,i) {
    y[i] = d3.scaleLinear()
             .domain(d3.extent(csv_data, function(p) {
               return +p[d]}))
             .range([margin.top,h-margin.bottom]);
  });

foreground = svg.append("g")
      .selectAll("path")
      .data(csv_data)
      .enter().append("path")
      .attr("d", path)
			.style("stroke","#CD5C5C")
			.style("fill","none");

// Add a group element for each dimension.
  var g = svg.selectAll("dimension")
      .data(attrs)
      .enter().append("g")
      .attr("d", "dimension")
      .attr("transform", function(d) { return "translate(" + x(d) + ")"; });

// Add an axis and title.
  g.append("g")
      .each(function(d,i) {d3.select(this).call(d3.axisLeft(y[i])); })
      .append("text")
      .style("text-anchor", "middle")
      .attr("y", -9)
      .text(function(d) { return d; });
});

// Returns the path for a given data point.
function path(d) {

return line(attrs.map(function(p,i)
  {
    return [x(p), y[i](d[p])];}));
}

</script>
</body>
</html>

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