Skip to content

Commit 81a0f2c

Browse files
johnkiernanderjohnkiernander
committed
Recovered storyboard example
1 parent 01db7e5 commit 81a0f2c

2 files changed

Lines changed: 252 additions & 260 deletions

File tree

‎examples/advanced_storyboard_control.html‎

Lines changed: 126 additions & 130 deletions
Original file line numberDiff line numberDiff line change
@@ -5,135 +5,131 @@
55
<script src="/lib/d3.v3.min.js"></script>
66
<script src="/dist/dimple.v1.1.5.js"></script>
77
<script type="text/javascript">
8-
var svg = dimple.newSvg("#chartContainer", 590, 400);
9-
d3.tsv("/data/example_data.tsv", function (data) {
10-
11-
// Filter for 1 year
12-
data = dimple.filterData(data, "Month", [
13-
"Jan-12", "Feb-12", "Mar-12", "Apr-12", "May-12", "Jun-12",
14-
"Jul-12", "Aug-12", "Sep-12", "Oct-12", "Nov-12", "Dec-12"
15-
]);
16-
17-
// Create the indicator chart on the right of the main chart
18-
var indicator = new dimple.chart(svg, data);
19-
20-
// Pick blue as the default and orange for the selected month
21-
var defaultColor = indicator.defaultColors[0];
22-
var indicatorColor = indicator.defaultColors[2];
23-
24-
// The frame duration for the animation in milliseconds
25-
var frame = 750;
26-
27-
// Place the indicator bar chart to the right
28-
indicator.setBounds(434, 49, 153, 311);
29-
30-
// Add dates along the y axis
31-
var y = indicator.addCategoryAxis("y", "Month");
32-
y.addOrderRule("Date", "Desc");
33-
34-
// Use sales for bar size and hide the axis
35-
var x = indicator.addMeasureAxis("x", "Unit Sales");
36-
x.hidden = true;
37-
38-
// Add the bars to the indicator and add event handlers
39-
var s = indicator.addSeries(null, dimple.plot.bar);
40-
s.addEventHandler("click", onClick);
41-
// Draw the side chart
42-
indicator.draw();
43-
44-
// Remove the title from the y axis
45-
y.titleShape.remove();
46-
47-
// Remove the lines from the y axis
48-
y.shapes.selectAll("line,path").remove();
49-
50-
// Move the y axis text inside the plot area
51-
y.shapes.selectAll("text")
52-
.style("text-anchor", "start")
53-
.style("font-size", "11px")
54-
.attr("transform", "translate(18, 0.5)");
55-
56-
// This block simply adds the legend title. I put it into a d3 data
57-
// object to split it onto 2 lines. This technique works with any
58-
// number of lines, it isn't dimple specific.
59-
svg.selectAll("title_text")
60-
.data(["Click bar to select",
61-
"and pause. Click again",
62-
"to resume animation"])
63-
.enter()
64-
.append("text")
65-
.attr("x", 435)
66-
.attr("y", function (d, i) { return 15 + i * 12; })
67-
.style("font-family", "sans-serif")
68-
.style("font-size", "10px")
69-
.style("color", "Black")
70-
.text(function (d) { return d; });
71-
72-
// Manually set the bar colors
73-
s.shapes
74-
.attr("rx", 10)
75-
.attr("ry", 10)
76-
.style("fill", defaultColor.fill)
77-
.style("stroke", defaultColor.stroke)
78-
.style("opacity", 0.4);
79-
svg.selectAll("rect.Jan-12")
80-
.style("fill", indicatorColor.fill)
81-
.style("stroke", indicatorColor.stroke);
82-
83-
// Draw the main chart
84-
var bubbles = new dimple.chart(svg, data);
85-
bubbles.setBounds(60, 50, 355, 310)
86-
bubbles.addMeasureAxis("x", "Distribution");
87-
bubbles.addMeasureAxis("y", "Price");
88-
bubbles.addSeries(["SKU", "Channel", "Owner"], dimple.plot.bubble)
89-
bubbles.addLegend(60, 10, 410, 60);
90-
91-
// Add a storyboard to the main chart and set the tick event
92-
var story = bubbles.setStoryboard("Month", onTick);
93-
// Change the frame duration
94-
story.frameDuration = frame;
95-
// Order the storyboard by date
96-
story.addOrderRule("Date");
97-
98-
// Draw the bubble chart
99-
bubbles.draw();
100-
101-
// Orphan the legends as they are consistent but by default they
102-
// will refresh on tick
103-
bubbles.legends = [];
104-
// Remove the storyboard label because the chart will indicate the
105-
// current month instead of the label
106-
story.storyLabel.remove();
107-
108-
// On click of the side chart
109-
function onClick(e) {
110-
// Pause the animation
111-
story.pauseAnimation();
112-
// If it is already selected resume the animation
113-
// otherwise pause and move to the selected month
114-
if (e.yValue === story.getFrameValue()) {
115-
story.startAnimation();
116-
} else {
117-
story.goToFrame(e.yValue);
118-
story.pauseAnimation();
119-
}
120-
}
121-
122-
// On tick of the main charts storyboard
123-
function onTick(e) {
124-
// Color all shapes the same
125-
s.shapes
126-
.transition()
127-
.duration(frame / 2)
128-
.style("fill", defaultColor.fill)
129-
.style("stroke", defaultColor.stroke);
130-
// Then color the selected shape differently
131-
svg.selectAll("rect." + e)
132-
.transition()
133-
.duration(frame / 2)
134-
.style("fill", indicatorColor.fill)
135-
.style("stroke", indicatorColor.stroke);
136-
}
137-
});
8+
var svg = dimple.newSvg("#chartContainer", 590, 400);
9+
d3.tsv("/data/example_data.tsv", function (data) {
10+
11+
// Filter for 1 year
12+
data = dimple.filterData(data, "Month", [
13+
"Jan-12", "Feb-12", "Mar-12", "Apr-12", "May-12", "Jun-12",
14+
"Jul-12", "Aug-12", "Sep-12", "Oct-12", "Nov-12", "Dec-12"
15+
]);
16+
17+
// Create the indicator chart on the right of the main chart
18+
var indicator = new dimple.chart(svg, data);
19+
20+
// Pick blue as the default and orange for the selected month
21+
var defaultColor = indicator.defaultColors[0];
22+
var indicatorColor = indicator.defaultColors[2];
23+
24+
// The frame duration for the animation in milliseconds
25+
var frame = 2000;
26+
27+
var firstTick = true;
28+
29+
// Place the indicator bar chart to the right
30+
indicator.setBounds(434, 49, 153, 311);
31+
32+
// Add dates along the y axis
33+
var y = indicator.addCategoryAxis("y", "Month");
34+
y.addOrderRule("Date", "Desc");
35+
36+
// Use sales for bar size and hide the axis
37+
var x = indicator.addMeasureAxis("x", "Unit Sales");
38+
x.hidden = true;
39+
40+
// Add the bars to the indicator and add event handlers
41+
var s = indicator.addSeries(null, dimple.plot.bar);
42+
s.addEventHandler("click", onClick);
43+
// Draw the side chart
44+
indicator.draw();
45+
46+
// Remove the title from the y axis
47+
y.titleShape.remove();
48+
49+
// Remove the lines from the y axis
50+
y.shapes.selectAll("line,path").remove();
51+
52+
// Move the y axis text inside the plot area
53+
y.shapes.selectAll("text")
54+
.style("text-anchor", "start")
55+
.style("font-size", "11px")
56+
.attr("transform", "translate(18, 0.5)");
57+
58+
// This block simply adds the legend title. I put it into a d3 data
59+
// object to split it onto 2 lines. This technique works with any
60+
// number of lines, it isn't dimple specific.
61+
svg.selectAll("title_text")
62+
.data(["Click bar to select",
63+
"and pause. Click again",
64+
"to resume animation"])
65+
.enter()
66+
.append("text")
67+
.attr("x", 435)
68+
.attr("y", function (d, i) { return 15 + i * 12; })
69+
.style("font-family", "sans-serif")
70+
.style("font-size", "10px")
71+
.style("color", "Black")
72+
.text(function (d) { return d; });
73+
74+
// Manually set the bar colors
75+
s.shapes
76+
.attr("rx", 10)
77+
.attr("ry", 10)
78+
.style("fill", function (d) { return (d.y === 'Jan-12' ? indicatorColor.fill : defaultColor.fill) })
79+
.style("stroke", function (d) { return (d.y === 'Jan-12' ? indicatorColor.stroke : defaultColor.stroke) })
80+
.style("opacity", 0.4);
81+
82+
// Draw the main chart
83+
var bubbles = new dimple.chart(svg, data);
84+
bubbles.setBounds(60, 50, 355, 310)
85+
bubbles.addMeasureAxis("x", "Distribution");
86+
bubbles.addMeasureAxis("y", "Price");
87+
bubbles.addSeries(["SKU", "Channel", "Owner"], dimple.plot.bubble)
88+
bubbles.addLegend(60, 10, 410, 60);
89+
90+
// Add a storyboard to the main chart and set the tick event
91+
var story = bubbles.setStoryboard("Month", onTick);
92+
// Change the frame duration
93+
story.frameDuration = frame;
94+
// Order the storyboard by date
95+
story.addOrderRule("Date");
96+
97+
// Draw the bubble chart
98+
bubbles.draw();
99+
100+
// Orphan the legends as they are consistent but by default they
101+
// will refresh on tick
102+
bubbles.legends = [];
103+
// Remove the storyboard label because the chart will indicate the
104+
// current month instead of the label
105+
story.storyLabel.remove();
106+
107+
// On click of the side chart
108+
function onClick(e) {
109+
// Pause the animation
110+
story.pauseAnimation();
111+
// If it is already selected resume the animation
112+
// otherwise pause and move to the selected month
113+
if (e.yValue === story.getFrameValue()) {
114+
story.startAnimation();
115+
} else {
116+
story.goToFrame(e.yValue);
117+
story.pauseAnimation();
118+
}
119+
}
120+
121+
// On tick of the main charts storyboard
122+
function onTick(e) {
123+
if (!firstTick) {
124+
// Color all shapes the same
125+
s.shapes
126+
.transition()
127+
.duration(frame / 2)
128+
.style("fill", function (d) { return (d.y === e ? indicatorColor.fill : defaultColor.fill) })
129+
.style("stroke", function (d) { return (d.y === e ? indicatorColor.stroke : defaultColor.stroke) });
130+
}
131+
firstTick = false;
132+
}
133+
});
138134
</script>
139135
</div>

0 commit comments

Comments
 (0)