mirror of
https://github.com/d3/d3.git
synced 2026-01-25 15:24:06 +00:00
3081dd45ef
Rather than producing separate files for each module, the default build now produces a single file. This should encourage better page-load performance as the files were relatively small. Also, it's easier to deal with only one file rather than many, especially if you're not quite sure what the dependencies are. You may still create minimized builds, if you don't want every feature. This commit also demotes the chart components to the examples directory, rather than keeping them as part of the core library. As always, D3 is not a charting library, and these were ever only intended to serve as examples.
134 lines
3.2 KiB
HTML
134 lines
3.2 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
|
|
<title>Parallel Coordinates</title>
|
|
<style type="text/css">
|
|
|
|
svg {
|
|
font: 10px sans-serif;
|
|
}
|
|
|
|
.background path {
|
|
fill: none;
|
|
stroke: #ccc;
|
|
stroke-opacity: .4;
|
|
shape-rendering: crispEdges;
|
|
}
|
|
|
|
.foreground path {
|
|
fill: none;
|
|
stroke: steelblue;
|
|
stroke-opacity: .7;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<script type="text/javascript" src="../../d3.v2.js"></script>
|
|
<script type="text/javascript">
|
|
|
|
var m = [30, 10, 10, 10],
|
|
w = 960 - m[1] - m[3],
|
|
h = 500 - m[0] - m[2];
|
|
|
|
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 + m[1] + m[3])
|
|
.attr("height", h + m[0] + m[2])
|
|
.append("g")
|
|
.attr("transform", "translate(" + m[3] + "," + m[0] + ")");
|
|
|
|
d3.csv("cars.csv", function(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([h, 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) + ")"; });
|
|
|
|
// 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("text-anchor", "middle")
|
|
.attr("y", -9)
|
|
.text(String);
|
|
|
|
// 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("brush", 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])]; }));
|
|
}
|
|
|
|
// 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";
|
|
});
|
|
}
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|