parallel_coordinates = {
var margin = {top: 30, right: 10, bottom: 10, left: 10};
var width = 960 - margin.left - margin.right;
var height = 400 - margin.top - margin.bottom;
var x = d3.scalePoint().range([0, width]).padding(1),
y = {};
var line = d3.line().x(function(d) { return d[0]; }).y(function(d) { return d[1]; }),
axis = d3.axisLeft(),
background,
foreground;
var dimensions = null;
const svg = d3.select(DOM.svg(width + margin.left + margin.right, height+margin.top + margin.bottom));
const svg_adjusted = svg.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
x.domain(dimensions = d3.keys(sample_data[0]).filter(function(d) {
return d != "name" && (y[d] = d3.scaleLinear()
.domain(d3.extent(sample_data, function(p) { return +p[d]; }))
.range([height, 0]));
}));
console.log(sample_data[0])
background = svg_adjusted.append("g")
.attr("class", "background")
.selectAll("path")
.data(sample_data)
.enter().append("path")
.attr("d", path);
// Add blue foreground lines for focus.
foreground = svg_adjusted.append("g")
.attr("class", "foreground")
.selectAll("path")
.data(sample_data)
.enter().append("path")
.attr("d", path);
// Add a group element for each dimension.
const g = svg_adjusted.selectAll(".dimension")
.data(dimensions)
.enter().append("g")
.attr("class", "dimension")
.attr("transform", function(d) { return "translate(" + x(d) + ")"; });
// 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.brushY()
.extent([[-10,0], [10,height]])
.on("brush", brush)
.on("end", brush)
)
})
.selectAll("rect")
.attr("x", -8)
.attr("width", 16);
// Returns the path for a given data point.
function path(d) {
return line(dimensions.map(function(p) { return [x(p), y[p](d[p])]; }));
}
console.log(dimensions.map(function(p) { return [x(p), y[p](sample_data[0][p])]; }))
// Handles a brush event, toggling the display of foreground lines.
function brush() {
var actives = [];
svg.selectAll(".brush")
.filter(function(d) {
y[d].brushSelectionValue = d3.brushSelection(this);
return d3.brushSelection(this);
})
.each(function(d) {
// Get extents of brush along each active selection axis (the Y axes)
actives.push({
dimension: d,
extent: d3.brushSelection(this).map(y[d].invert)
});
});
var selected = [];
// Update foreground to only display selected values
foreground.style("display", function(d) {
let isActive = actives.every(function(active) {
let result = active.extent[1] <= d[active.dimension] && d[active.dimension] <= active.extent[0];
return result;
});
// Only render rows that are active across all selectors
if(isActive) selected.push(d);
return (isActive) ? null : "none";
});
}
return svg.node();
}