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