Skip to content

Commit

Permalink
Recovered storyboard example
Browse files Browse the repository at this point in the history
  • Loading branch information
@johnkiernander
johnkiernander committed Feb 14, 2014
1 parent 01db7e5 commit 81a0f2c
Show file tree
Hide file tree
Showing 2 changed files with 252 additions and 260 deletions.
256 changes: 126 additions & 130 deletions examples/advanced_storyboard_control.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,135 +5,131 @@
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.1.5.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {

// Filter for 1 year
data = dimple.filterData(data, "Month", [
"Jan-12", "Feb-12", "Mar-12", "Apr-12", "May-12", "Jun-12",
"Jul-12", "Aug-12", "Sep-12", "Oct-12", "Nov-12", "Dec-12"
]);

// Create the indicator chart on the right of the main chart
var indicator = new dimple.chart(svg, data);

// Pick blue as the default and orange for the selected month
var defaultColor = indicator.defaultColors[0];
var indicatorColor = indicator.defaultColors[2];

// The frame duration for the animation in milliseconds
var frame = 750;

// Place the indicator bar chart to the right
indicator.setBounds(434, 49, 153, 311);

// Add dates along the y axis
var y = indicator.addCategoryAxis("y", "Month");
y.addOrderRule("Date", "Desc");

// Use sales for bar size and hide the axis
var x = indicator.addMeasureAxis("x", "Unit Sales");
x.hidden = true;

// Add the bars to the indicator and add event handlers
var s = indicator.addSeries(null, dimple.plot.bar);
s.addEventHandler("click", onClick);
// Draw the side chart
indicator.draw();

// Remove the title from the y axis
y.titleShape.remove();

// Remove the lines from the y axis
y.shapes.selectAll("line,path").remove();

// Move the y axis text inside the plot area
y.shapes.selectAll("text")
.style("text-anchor", "start")
.style("font-size", "11px")
.attr("transform", "translate(18, 0.5)");

// This block simply adds the legend title. I put it into a d3 data
// object to split it onto 2 lines. This technique works with any
// number of lines, it isn't dimple specific.
svg.selectAll("title_text")
.data(["Click bar to select",
"and pause. Click again",
"to resume animation"])
.enter()
.append("text")
.attr("x", 435)
.attr("y", function (d, i) { return 15 + i * 12; })
.style("font-family", "sans-serif")
.style("font-size", "10px")
.style("color", "Black")
.text(function (d) { return d; });

// Manually set the bar colors
s.shapes
.attr("rx", 10)
.attr("ry", 10)
.style("fill", defaultColor.fill)
.style("stroke", defaultColor.stroke)
.style("opacity", 0.4);
svg.selectAll("rect.Jan-12")
.style("fill", indicatorColor.fill)
.style("stroke", indicatorColor.stroke);

// Draw the main chart
var bubbles = new dimple.chart(svg, data);
bubbles.setBounds(60, 50, 355, 310)
bubbles.addMeasureAxis("x", "Distribution");
bubbles.addMeasureAxis("y", "Price");
bubbles.addSeries(["SKU", "Channel", "Owner"], dimple.plot.bubble)
bubbles.addLegend(60, 10, 410, 60);

// Add a storyboard to the main chart and set the tick event
var story = bubbles.setStoryboard("Month", onTick);
// Change the frame duration
story.frameDuration = frame;
// Order the storyboard by date
story.addOrderRule("Date");

// Draw the bubble chart
bubbles.draw();

// Orphan the legends as they are consistent but by default they
// will refresh on tick
bubbles.legends = [];
// Remove the storyboard label because the chart will indicate the
// current month instead of the label
story.storyLabel.remove();

// On click of the side chart
function onClick(e) {
// Pause the animation
story.pauseAnimation();
// If it is already selected resume the animation
// otherwise pause and move to the selected month
if (e.yValue === story.getFrameValue()) {
story.startAnimation();
} else {
story.goToFrame(e.yValue);
story.pauseAnimation();
}
}

// On tick of the main charts storyboard
function onTick(e) {
// Color all shapes the same
s.shapes
.transition()
.duration(frame / 2)
.style("fill", defaultColor.fill)
.style("stroke", defaultColor.stroke);
// Then color the selected shape differently
svg.selectAll("rect." + e)
.transition()
.duration(frame / 2)
.style("fill", indicatorColor.fill)
.style("stroke", indicatorColor.stroke);
}
});
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {

// Filter for 1 year
data = dimple.filterData(data, "Month", [
"Jan-12", "Feb-12", "Mar-12", "Apr-12", "May-12", "Jun-12",
"Jul-12", "Aug-12", "Sep-12", "Oct-12", "Nov-12", "Dec-12"
]);

// Create the indicator chart on the right of the main chart
var indicator = new dimple.chart(svg, data);

// Pick blue as the default and orange for the selected month
var defaultColor = indicator.defaultColors[0];
var indicatorColor = indicator.defaultColors[2];

// The frame duration for the animation in milliseconds
var frame = 2000;

var firstTick = true;

// Place the indicator bar chart to the right
indicator.setBounds(434, 49, 153, 311);

// Add dates along the y axis
var y = indicator.addCategoryAxis("y", "Month");
y.addOrderRule("Date", "Desc");

// Use sales for bar size and hide the axis
var x = indicator.addMeasureAxis("x", "Unit Sales");
x.hidden = true;

// Add the bars to the indicator and add event handlers
var s = indicator.addSeries(null, dimple.plot.bar);
s.addEventHandler("click", onClick);
// Draw the side chart
indicator.draw();

// Remove the title from the y axis
y.titleShape.remove();

// Remove the lines from the y axis
y.shapes.selectAll("line,path").remove();

// Move the y axis text inside the plot area
y.shapes.selectAll("text")
.style("text-anchor", "start")
.style("font-size", "11px")
.attr("transform", "translate(18, 0.5)");

// This block simply adds the legend title. I put it into a d3 data
// object to split it onto 2 lines. This technique works with any
// number of lines, it isn't dimple specific.
svg.selectAll("title_text")
.data(["Click bar to select",
"and pause. Click again",
"to resume animation"])
.enter()
.append("text")
.attr("x", 435)
.attr("y", function (d, i) { return 15 + i * 12; })
.style("font-family", "sans-serif")
.style("font-size", "10px")
.style("color", "Black")
.text(function (d) { return d; });

// Manually set the bar colors
s.shapes
.attr("rx", 10)
.attr("ry", 10)
.style("fill", function (d) { return (d.y === 'Jan-12' ? indicatorColor.fill : defaultColor.fill) })
.style("stroke", function (d) { return (d.y === 'Jan-12' ? indicatorColor.stroke : defaultColor.stroke) })
.style("opacity", 0.4);

// Draw the main chart
var bubbles = new dimple.chart(svg, data);
bubbles.setBounds(60, 50, 355, 310)
bubbles.addMeasureAxis("x", "Distribution");
bubbles.addMeasureAxis("y", "Price");
bubbles.addSeries(["SKU", "Channel", "Owner"], dimple.plot.bubble)
bubbles.addLegend(60, 10, 410, 60);

// Add a storyboard to the main chart and set the tick event
var story = bubbles.setStoryboard("Month", onTick);
// Change the frame duration
story.frameDuration = frame;
// Order the storyboard by date
story.addOrderRule("Date");

// Draw the bubble chart
bubbles.draw();

// Orphan the legends as they are consistent but by default they
// will refresh on tick
bubbles.legends = [];
// Remove the storyboard label because the chart will indicate the
// current month instead of the label
story.storyLabel.remove();

// On click of the side chart
function onClick(e) {
// Pause the animation
story.pauseAnimation();
// If it is already selected resume the animation
// otherwise pause and move to the selected month
if (e.yValue === story.getFrameValue()) {
story.startAnimation();
} else {
story.goToFrame(e.yValue);
story.pauseAnimation();
}
}

// On tick of the main charts storyboard
function onTick(e) {
if (!firstTick) {
// Color all shapes the same
s.shapes
.transition()
.duration(frame / 2)
.style("fill", function (d) { return (d.y === e ? indicatorColor.fill : defaultColor.fill) })
.style("stroke", function (d) { return (d.y === e ? indicatorColor.stroke : defaultColor.stroke) });
}
firstTick = false;
}
});
</script>
</div>
Loading

0 comments on commit 81a0f2c

Please sign in to comment.