Created
July 26, 2018 09:11
-
-
Save RCura/994dd18012b347691fbec3b46548cf24 to your computer and use it in GitHub Desktop.
Parcoords : rotate axis title + wrap long titles
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<style> | |
svg { | |
font: 12px sans-serif; | |
} | |
.background path { | |
fill: none; | |
stroke: #ddd; | |
shape-rendering: crispEdges; | |
} | |
.foreground path { | |
fill: none; | |
stroke: steelblue; | |
} | |
.brush .extent { | |
fill-opacity: .3; | |
stroke: #fff; | |
shape-rendering: crispEdges; | |
} | |
.axis line, | |
.axis path { | |
fill: none; | |
stroke: #000; | |
shape-rendering: crispEdges; | |
} | |
.axis text { | |
text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff; | |
cursor: move; | |
} | |
</style> | |
<body> | |
<script src="//d3js.org/d3.v3.min.js"></script> | |
<script> | |
var margin = {top: 100, right: 10, bottom: 10, left: 10}, | |
width = 960 - margin.left - margin.right, | |
height = 500 - margin.top - margin.bottom; | |
var x = d3.scale.ordinal().rangePoints([0, width], 1), | |
y = {}, | |
dragging = {}; | |
var line = d3.svg.line(), | |
axis = d3.svg.axis().orient("left"), | |
background, | |
foreground; | |
var svg = d3.select("body").append("svg") | |
.attr("width", width + margin.left + margin.right) | |
.attr("height", height + margin.top + margin.bottom) | |
.append("g") | |
.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
d3.csv("cars.csv", function(error, cars) { | |
// Extract the list of dimensions and create a scale for each. | |
x.domain(dimensions = d3.keys(cars[0]).filter(function(d) { | |
return d != "name" && (y[d] = d3.scale.linear() | |
.domain(d3.extent(cars, function(p) { return +p[d]; })) | |
.range([height, 0])); | |
})); | |
// Add grey background lines for context. | |
background = svg.append("g") | |
.attr("class", "background") | |
.selectAll("path") | |
.data(cars) | |
.enter().append("path") | |
.attr("d", path); | |
// Add blue foreground lines for focus. | |
foreground = svg.append("g") | |
.attr("class", "foreground") | |
.selectAll("path") | |
.data(cars) | |
.enter().append("path") | |
.attr("d", path); | |
// Add a group element for each dimension. | |
var g = svg.selectAll(".dimension") | |
.data(dimensions) | |
.enter().append("g") | |
.attr("class", "dimension") | |
.attr("transform", function(d) { return "translate(" + x(d) + ")"; }) | |
.call(d3.behavior.drag() | |
.origin(function(d) { return {x: x(d)}; }) | |
.on("dragstart", function(d) { | |
dragging[d] = x(d); | |
background.attr("visibility", "hidden"); | |
}) | |
.on("drag", function(d) { | |
dragging[d] = Math.min(width, Math.max(0, d3.event.x)); | |
foreground.attr("d", path); | |
dimensions.sort(function(a, b) { return position(a) - position(b); }); | |
x.domain(dimensions); | |
g.attr("transform", function(d) { return "translate(" + position(d) + ")"; }) | |
}) | |
.on("dragend", function(d) { | |
delete dragging[d]; | |
transition(d3.select(this)).attr("transform", "translate(" + x(d) + ")"); | |
transition(foreground).attr("d", path); | |
background | |
.attr("d", path) | |
.transition() | |
.delay(500) | |
.duration(0) | |
.attr("visibility", null); | |
})); | |
// Add an axis and title. | |
g.append("g") | |
.attr("class", "axis") | |
.each(function(d) { d3.select(this).call(axis.scale(y[d])); }) | |
.append("text") | |
.attr("dy", ".35em") | |
.attr("transform", "rotate(-45)") | |
.style("text-anchor", "middle") | |
.attr("y", -50) | |
.attr("x", +30) | |
.text(function(d) { return d; }) | |
.call(wrap, 10); | |
// 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.svg.brush().y(y[d]).on("brushstart", brushstart).on("brush", brush)); | |
}) | |
.selectAll("rect") | |
.attr("x", -8) | |
.attr("width", 16); | |
}); | |
function position(d) { | |
var v = dragging[d]; | |
return v == null ? x(d) : v; | |
} | |
function transition(g) { | |
return g.transition().duration(500); | |
} | |
// Returns the path for a given data point. | |
function path(d) { | |
return line(dimensions.map(function(p) { return [position(p), y[p](d[p])]; })); | |
} | |
function brushstart() { | |
d3.event.sourceEvent.stopPropagation(); | |
} | |
// Handles a brush event, toggling the display of foreground lines. | |
function brush() { | |
var actives = dimensions.filter(function(p) { return !y[p].brush.empty(); }), | |
extents = actives.map(function(p) { return y[p].brush.extent(); }); | |
foreground.style("display", function(d) { | |
return actives.every(function(p, i) { | |
return extents[i][0] <= d[p] && d[p] <= extents[i][1]; | |
}) ? null : "none"; | |
}); | |
} | |
function wrap(text, width) { | |
text.each(function() { | |
var text = d3.select(this), | |
words = text.text().split(/\s+/).reverse(), | |
word, | |
line = [], | |
lineNumber = 0, | |
lineHeight = 1.1, // ems | |
y = text.attr("y"), | |
dy = parseFloat(text.attr("dy")), | |
tspan = text.text(null).append("tspan").attr("x", 0).attr("y", y).attr("dy", dy + "em"); | |
while (word = words.pop()) { | |
line.push(word); | |
tspan.text(line.join(" ")); | |
if (tspan.node().getComputedTextLength() > width) { | |
line.pop(); | |
tspan.text(line.join(" ")); | |
line = [word]; | |
tspan = text.append("tspan").attr("x", 0).attr("y", y).attr("dy", ++lineNumber * lineHeight + dy + "em").text(word); | |
} | |
} | |
}); | |
} | |
function type(d) { | |
d.value = +d.value; | |
return d; | |
} | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment