Skip to content

Commit

Permalink
Transitions for horizon bands!
Browse files Browse the repository at this point in the history
  • Loading branch information
@mbostock
mbostock committed May 26, 2011
1 parent a151653 commit c75ebe1
Show file tree
Hide file tree
Showing 7 changed files with 97 additions and 27 deletions.
35 changes: 26 additions & 9 deletions d3.chart.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -550,6 +550,10 @@ d3.chart.horizon = function() {
h = 40,
duration = 0;

var color = d3.scale.linear()
.domain([-1, 0, 1])
.range(["#d62728", "#fff", "#1f77b4"]);

// For each small multiple…
function horizon(g) {
g.each(function(d, i) {
Expand Down Expand Up @@ -588,9 +592,6 @@ d3.chart.horizon = function() {
id = ++d3_chart_horizonId;
}

// Stash the new scales.
this.__chart__ = {x: x1, y: y1, id: id};

// We'll use a defs to store the area path and the clip path.
var defs = g.selectAll("defs")
.data([data]);
Expand Down Expand Up @@ -640,20 +641,29 @@ d3.chart.horizon = function() {

// Instantiate each copy of the path with different transforms.
var u = g.select("g").selectAll("use")
.data(d3.range(-1, -bands - 1, -1).concat(d3.range(1, bands + 1)))
.attr("class", function(d) { return "q" + (d + bands) + "-" + n; });
.data(d3.range(-1, -bands - 1, -1).concat(d3.range(1, bands + 1)), Number);

// TODO don't fudge the enter transition
u.enter().append("svg:use")
.attr("xlink:href", "#d3_chart_horizon_path" + id)
.attr("class", function(d) { return "q" + (d + bands) + "-" + n; })
.attr("transform", function(d) { return transform(d + (d > 0 ? 1 : -1)); })
.style("fill", color)
.transition()
.duration(duration)
.attr("transform", transform);

// TODO Better transitions when the number of bands changes.
u.transition()
.duration(duration)
.attr("transform", transform);
.attr("transform", transform)
.style("fill", color);

u.exit().remove();
u.exit().transition()
.duration(duration)
.attr("transform", transform)
.remove();

// Stash the new scales.
this.__chart__ = {x: x1, y: y1, id: id};
});
d3.timer.flush();
}
Expand All @@ -667,6 +677,7 @@ d3.chart.horizon = function() {
horizon.bands = function(x) {
if (!arguments.length) return bands;
bands = +x;
color.domain([-bands, 0, bands]);
return horizon;
};

Expand All @@ -676,6 +687,12 @@ d3.chart.horizon = function() {
return horizon;
};

horizon.colors = function(x) {
if (!arguments.length) return color.range();
color.range(x);
return horizon;
};

horizon.interpolate = function(x) {
if (!arguments.length) return interpolate;
interpolate = x + "";
Expand Down
2 changes: 1 addition & 1 deletion d3.chart.min.js
View file

Large diffs are not rendered by default.

9 changes: 9 additions & 0 deletions examples/horizon/horizon.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
#controls {
position: relative;
width: 960px;
}

#bands {
position: absolute;
right: 0;
}
14 changes: 13 additions & 1 deletion examples/horizon/horizon.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,23 @@
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Horizon Chart</title>
<link type="text/css" rel="stylesheet" href="../../lib/colorbrewer/colorbrewer.css"/>
<link type="text/css" rel="stylesheet" href="../button.css"/>
<link type="text/css" rel="stylesheet" href="horizon.css"/>
<script type="text/javascript" src="../../d3.js"></script>
<script type="text/javascript" src="../../d3.chart.js"></script>
</head>
<body>
<div id="chart"></div>
<div id="controls">
<span id="mode">
<button class="first active">Offset</button
><button class="last">Mirror</button>
</span>
<span id="bands">
<button class="first">&#x2212;</button
><button class="last">+</button>
</span>
</div>
<script type="text/javascript" src="horizon.js"></script>
</body>
</html>
28 changes: 22 additions & 6 deletions examples/horizon/horizon.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,10 @@ var chart = d3.chart.horizon()
.mode("offset")
.interpolate("basis");

var svg = d3.select("#chart").append("svg:svg")
.attr("width", w)
.attr("height", h);

d3.json("unemployment.json", function(data) {

// Offset so that positive is above-average and negative is below-average.
Expand All @@ -18,10 +22,22 @@ d3.json("unemployment.json", function(data) {
return [Date.UTC(data.year[i], data.month[i] - 1), rate - mean];
});

d3.select("body").append("svg:svg")
.data([data])
.attr("class", "RdBu")
.attr("width", w)
.attr("height", h)
.call(chart);
// Render the chart.
svg.data([data]).call(chart);

// Enable mode buttons.
d3.selectAll("#mode button")
.data(["offset", "mirror"])
.on("click", function(m) {
svg.call(chart.duration(0).mode(m));
d3.selectAll("#mode button")
.classed("active", function(d) { return d == m; });
});

// Enable bands buttons.
d3.selectAll("#bands button")
.data([-1, 1])
.on("click", function bands(db) {
svg.call(chart.duration(1000).bands(Math.max(1, chart.bands() + db)));
});
});
1 change: 0 additions & 1 deletion examples/stream/stream.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,6 @@ function transition() {
return data0 = d;
})
.transition()
.delay(500)
.duration(2500)
.attr("d", area);
}
35 changes: 26 additions & 9 deletions src/chart/horizon.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,10 @@ d3.chart.horizon = function() {
h = 40,
duration = 0;

var color = d3.scale.linear()
.domain([-1, 0, 1])
.range(["#d62728", "#fff", "#1f77b4"]);

// For each small multiple…
function horizon(g) {
g.each(function(d, i) {
Expand Down Expand Up @@ -53,9 +57,6 @@ d3.chart.horizon = function() {
id = ++d3_chart_horizonId;
}

// Stash the new scales.
this.__chart__ = {x: x1, y: y1, id: id};

// We'll use a defs to store the area path and the clip path.
var defs = g.selectAll("defs")
.data([data]);
Expand Down Expand Up @@ -105,20 +106,29 @@ d3.chart.horizon = function() {

// Instantiate each copy of the path with different transforms.
var u = g.select("g").selectAll("use")
.data(d3.range(-1, -bands - 1, -1).concat(d3.range(1, bands + 1)))
.attr("class", function(d) { return "q" + (d + bands) + "-" + n; });
.data(d3.range(-1, -bands - 1, -1).concat(d3.range(1, bands + 1)), Number);

// TODO don't fudge the enter transition
u.enter().append("svg:use")
.attr("xlink:href", "#d3_chart_horizon_path" + id)
.attr("class", function(d) { return "q" + (d + bands) + "-" + n; })
.attr("transform", function(d) { return transform(d + (d > 0 ? 1 : -1)); })
.style("fill", color)
.transition()
.duration(duration)
.attr("transform", transform);

// TODO Better transitions when the number of bands changes.
u.transition()
.duration(duration)
.attr("transform", transform);
.attr("transform", transform)
.style("fill", color);

u.exit().remove();
u.exit().transition()
.duration(duration)
.attr("transform", transform)
.remove();

// Stash the new scales.
this.__chart__ = {x: x1, y: y1, id: id};
});
d3.timer.flush();
}
Expand All @@ -132,6 +142,7 @@ d3.chart.horizon = function() {
horizon.bands = function(x) {
if (!arguments.length) return bands;
bands = +x;
color.domain([-bands, 0, bands]);
return horizon;
};

Expand All @@ -141,6 +152,12 @@ d3.chart.horizon = function() {
return horizon;
};

horizon.colors = function(x) {
if (!arguments.length) return color.range();
color.range(x);
return horizon;
};

horizon.interpolate = function(x) {
if (!arguments.length) return interpolate;
interpolate = x + "";
Expand Down

0 comments on commit c75ebe1

Please sign in to comment.