vitalif-js
/
dimple
mirror of https://github.com/vitalif/dimple
1
0
Fork 0
Code Issues Releases Wiki Activity

Recovered storyboard example

master 1.1.5
John Kiernander 2014-02-14 10:10:16 +00:00
parent 01db7e5c30
commit 81a0f2c465
2 changed files with 216 additions and 224 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
examples/advanced_storyboard_control.html
View File

@ -22,7 +22,9 @@
var indicatorColor = indicator.defaultColors[2];
// The frame duration for the animation in milliseconds
var frame = 750;
var frame = 2000;
var firstTick = true;
// Place the indicator bar chart to the right
indicator.setBounds(434, 49, 153, 311);
@ -73,12 +75,9 @@
s.shapes
.attr("rx", 10)
.attr("ry", 10)
.style("fill", defaultColor.fill)
.style("stroke", defaultColor.stroke)
.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);
svg.selectAll("rect.Jan-12")
.style("fill", indicatorColor.fill)
.style("stroke", indicatorColor.stroke);
// Draw the main chart
var bubbles = new dimple.chart(svg, data);
@ -121,18 +120,15 @@
// 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", 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);
.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>

24
examples/templates/advanced_storyboard_control.html
View File

@ -19,7 +19,9 @@
var indicatorColor = indicator.defaultColors[2];
// The frame duration for the animation in milliseconds
var frame = 750;
var frame = 2000;
var firstTick = true;
// Place the indicator bar chart to the right
indicator.setBounds(434, 49, 153, 311);
@ -70,12 +72,9 @@
s.shapes
.attr("rx", 10)
.attr("ry", 10)
.style("fill", defaultColor.fill)
.style("stroke", defaultColor.stroke)
.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);
svg.selectAll("rect.Jan-12")
.style("fill", indicatorColor.fill)
.style("stroke", indicatorColor.stroke);
// Draw the main chart
var bubbles = new dimple.chart(svg, data);
@ -118,18 +117,15 @@
// 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", 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);
.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>