Skip to content

Commit 704c2d5

Browse files
gordonwoodhullgordonwoodhull
committed
add @XaserAcheron's example for #1177 
1 parent 47fb8e2 commit 704c2d5

File tree

1 file changed

+158
-0
lines changed

1 file changed

+158
-0
lines changed

‎web/transitions/number-transitions.html

+158
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>dc.js - Number Transition Tester</title>
5+
<meta charset="UTF-8">
6+
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
7+
<link rel="stylesheet" type="text/css" href="../css/dc.css"/>
8+
</head>
9+
<body>
10+
<div class="container">
11+
<script type="text/javascript" src="../examples/header.js"></script>
12+
13+
<script type="text/javascript" src="../js/d3.js"></script>
14+
<script type="text/javascript" src="../js/crossfilter.js"></script>
15+
<script type="text/javascript" src="../js/dc.js"></script>
16+
17+
<p>This example demonstrates transitioning from Infinity to finite numbers.</p>
18+
19+
<h1>bands n' stuff</h1>
20+
<div>
21+
<span id="dc-band"></span>
22+
<span id="dc-member"></span>
23+
<div>
24+
<div>
25+
<button onclick="resetFilters()">Reset Filters</button>
26+
<button onclick="redrawCharts()">Redraw Charts</button>
27+
</div>
28+
</div>
29+
Borks: <span id="dc-percent"></span>
30+
</div>
31+
<div>
32+
Works: <span id="dc-percent2"></span>
33+
</div>
34+
35+
<script type="text/javascript">
36+
37+
// by Xaser Acheron
38+
// This is a quick example demonstrating a bug
39+
// in the latest dc.js (as of 2016-01-08).
40+
41+
// To trigger: Click "Not Rush" in the leftmost chart, then deselect it.
42+
// dc.js throws an error in the tweenPie function when trying to tween the
43+
// right-hand "empty" pie segment to a segment with data.
44+
45+
// Error details screenshot for reference: http://i.imgur.com/JTsAVyo.png
46+
47+
// First, declare some data. Note the zero in the othernumber field;
48+
// we'll use this to ensure that selecting "Not Rush" in the Band chart
49+
// will cause the Member chart to become empty.
50+
var data = [
51+
{ band: "Rush"
52+
, member: "Geddy Lee"
53+
, number: "5"
54+
, othernumber: "3"
55+
},
56+
{ band: "Rush"
57+
, member: "Alex Lifeson"
58+
, number: "5"
59+
, othernumber: "3"
60+
},
61+
{ band: "Rush"
62+
, member: "Neil Peart"
63+
, number: "5"
64+
, othernumber: "5"
65+
},
66+
{ band: "Not Rush"
67+
, member: "Somebody Else"
68+
, number: "5"
69+
, othernumber: "0"
70+
}
71+
];
72+
73+
// create crossfilter/dimensions/whatnot; basic stuff
74+
var ndx = crossfilter(data);
75+
var dim_band = ndx.dimension(function (d) { return d.band ; });
76+
var dim_member = ndx.dimension(function (d) { return d.member; });
77+
78+
// define some complex-ish crossfilter reduction functions. Instead of
79+
// summing up a single value, we'll instead set the value to be an object
80+
// that contains two different values -- this is useful because we can
81+
// edit each chart's valueAccessor to change the metric shown in real time.
82+
var funcAdd = function(p, v) {
83+
p.number += (+v.number );
84+
p.othernumber += (+v.othernumber);
85+
return p;
86+
};
87+
var funcRemove = function(p, v) {
88+
p.number -= (+v.number );
89+
p.othernumber -= (+v.othernumber);
90+
return p;
91+
};
92+
var funcInitial = function() {
93+
return {
94+
number : 0
95+
, othernumber : 0
96+
};
97+
};
98+
var grp_band = dim_band .group().reduce(funcAdd, funcRemove, funcInitial);
99+
var grp_member = dim_member.group().reduce(funcAdd, funcRemove, funcInitial);
100+
var grp_all = ndx.groupAll().reduce(funcAdd, funcRemove, funcInitial);
101+
102+
// Create our charts and render them. The data is set up such that "otherNumber" contains
103+
// a zero for the "Not Rush" band; this results in a divide-by-zero (Infinity%) in the numberDisplay,
104+
// which turns to NaN% when deselecting "Not Rush". The number can be restored by pressing Redraw Charts.
105+
// [XA] somewhat amusingly, this is the exact same test case as last time despite the bug being
106+
// different. Gads!
107+
var chart_band = dc.pieChart ("#dc-band")
108+
.height(230)
109+
.width (230)
110+
.transitionDuration(1000)
111+
.dimension(dim_band)
112+
.group (grp_band)
113+
.valueAccessor(function(d) { return d.value.number; })
114+
.minAngleForLabel(0)
115+
.title(function() { return ''; })
116+
;
117+
var chart_band = dc.pieChart ("#dc-member")
118+
.height(230)
119+
.width (230)
120+
.transitionDuration(1000)
121+
.dimension(dim_member)
122+
.group (grp_member)
123+
.valueAccessor(function(d) { return d.value.number * d.value.othernumber; })
124+
.minAngleForLabel(0)
125+
.title(function() { return ''; })
126+
;
127+
var label_percent = dc.numberDisplay("#dc-percent")
128+
.transitionDuration(1000)
129+
.group(grp_all)
130+
.valueAccessor(function(d) { return d.number / d.othernumber; })
131+
.formatNumber(function(d) {
132+
return d3.format('%')(d);
133+
})
134+
;
135+
var label_percent2 = dc.numberDisplay("#dc-percent2")
136+
.transitionDuration(1000)
137+
.group(grp_all)
138+
.valueAccessor(function(d) { return d.othernumber ? (d.number / d.othernumber) : NaN; })
139+
.formatNumber(function(d) {
140+
return d3.format('%')(d);
141+
})
142+
;
143+
144+
// Render it.
145+
dc.renderAll();
146+
147+
// Functions for buttons n' things.
148+
function resetFilters() {
149+
dc.filterAll();
150+
dc.redrawAll();
151+
}
152+
function redrawCharts() {
153+
dc.redrawAll();
154+
}
155+
</script>
156+
</div>
157+
</body>
158+
</html>

0 commit comments

Comments
 (0)