[WIP] Animation documentation #527

rreusser · 2016-09-15T18:56:00Z

This PR adds documentation for animations. Things that remain to be done:

Review docs
Fix some minor issues related to animations and reflect the changes in the docs.
find a home for animation attributes. The options are documented in the source, but they don't yet have a home in the web documentation.
add additional examples. e.g. Gapminder example. (needs slider implementation, but don't want to block all the docs on that).
Upload thumbnail to AWS:

cldougl

Such awesome docs -- thanks so much for adding the markdown option earlier, the text is super important for these examples and you did an amazing job of keeping the text extremely informative while concise as well !!

cldougl · 2016-09-16T02:57:20Z

_posts/plotly_js/animations/2016-09-15-animations-animating-many-frames-quickly.html

@@ -0,0 +1,72 @@
+---
+name: Animating many frames quickly


@rreusser the name serves as the title of the example so I would recommend capitalizing like: Animating Many Frames Quickly

cldougl · 2016-09-16T03:09:45Z

_posts/plotly_js/animations/2016-09-15-animations-animating-sequences-of-frames.html

@@ -0,0 +1,44 @@
+---
+name: Animating sequences of frames


capitalize title

cldougl · 2016-09-16T03:36:29Z

_posts/plotly_js/animations/2016-08-29-animations_plotly_js_index.html

+title: JavaScript Graphing Library Animations | Examples | Plotly
+name: Animations
+permalink: javascript/animations/
+description: How to animate charts in JavaScript with the animate API.


To stay consistent with the other docs you can set the description to: How to animate D3.js-based line and scatter plots in JavaScript.

Can do. The only reason I didn't is that it's not limited to scatter traces or D3-based traces. See: https://rreusser.github.io/animation-experiments/#3d (the timing is not great at the moment; needs a patch)

Good point! How about: How to animate Plotly graphs in JavaScript.

cldougl · 2016-09-16T03:39:18Z

_posts/plotly_js/animations/2016-08-29-animations_plotly_js_index.html

+language: plotly_js
+page_type: example_index
+has_thumbnail: true
+display_as: basic


Do you think this would fit better under the chart_events category: https://plot.ly/javascript/#chart-events (https://github.com/plotly/documentation/blob/source-design-merge/_includes/documentation_eg.html#L9)?
If you do move it to chart_events rather than basic, I would change the order to #1 (get this front and center :) )

I'll go with chart_events and order: 0.5 (could readjust to integers, but… why? 😄 )

cldougl · 2016-09-16T03:40:27Z

_posts/plotly_js/animations/2016-09-15-animations-object-constancy.html

@@ -0,0 +1,38 @@
+---
+name: Object constancy


cldougl · 2016-09-16T03:41:30Z

_posts/plotly_js/animations/2016-09-15-animations-frame-groups-and-animation-modes.html

@@ -0,0 +1,94 @@
+---
+name: Frame groups and animation modes


cldougl · 2016-09-16T03:43:30Z

_posts/plotly_js/animations/2016-09-15-animations-frame-groups-and-animation-modes.html

@@ -0,0 +1,94 @@
+---
+name: Frame groups and animation modes
+plot_url: http://codepen.io/plotly/embed/rrZRmA/?height=500&theme-id=15263&default-tab=result


👏 👏 I love this example so much-- this is one of the coolest thing I've ever seen plotly do!!!!!!!!!!!!!

cldougl · 2016-09-16T03:43:49Z

_posts/plotly_js/animations/2016-09-15-animations-frame-groups-and-animation-modes.html

+
+  The first row of buttons animates a different set of predefined frames by changing the second argument of `Plotly.animate`. Passing `null` animates all defined frames in sequence, while passing an array of strings (here, the frames in reverse) animates a specific sequence of frames. By passing a plain string (here, `lower` or `upper`), it filters the animated frames to those with a `group` property equal to that name.
+
+  The second row of buttons chnages the animation `mode`. The mode defines whether an animation either interrupts or follows the current animation. `immediate` mode discards all queued frames and begins a new sequence immediately. The `next` mode is very similar but doesn't begin the new animation until the *end* of the current frame. Finally, `afterall` queues the new frames so that the new animation begins only after all previous animations have completed.


chnages

changes

cldougl · 2016-09-16T03:49:37Z

_posts/plotly_js/animations/2016-09-15-animations-animating-the-data.html

+sitemap: false
+arrangement: horizontal
+markdown_content: |
+  The animate command lets you add dynamic behavior to Plotly graphs in a number of different ways. At its core, `Plotly.animate` transitions traces to a new state or sequence of states. Therefore to animate a trace, *you must first plot the trace you wish to animate*.


I would probably also mention: At the moment, you can only animate scatter traces. & you can link to the line & scatter doc to show scatter traces include line & filled line plots

Ah, slight subtlety. You can only smoothly transition scatter traces, but you can animate anything. If it doesn't know how to interpolate smoothly, it will just update instantaneously.

ok cool! In that case I think it's good to leave as is for now and if questions/confusion come up we can add info accordingly!

cldougl · 2016-09-16T03:52:38Z

_posts/plotly_js/animations/2016-09-15-animations-defining-named-frames.html

@@ -0,0 +1,55 @@
+---
+name: Defing named frames with <code>Plotly.addFrames</code>


I think this should be Defining?

cldougl · 2016-09-16T03:59:32Z

@rreusser I'm good for you to 💃 💃 this after taking a look at my comments (mostly tiny typos/grammar things) and adding the thumbnail.
(and as I mentioned earlier, it's totally fine to merge then add additional examples or edit existing examples later :) )

First cut at animation documentation

86f51fb

cldougl reviewed Sep 16, 2016

View reviewed changes

rreusser added 3 commits September 16, 2016 12:20

Grammar and typo fixes for animation docs

8852790

FIx a minor typo in animation docs

45af780

Wording updates to animation docs

b92ebbf

cldougl added the plotly.js label Sep 18, 2016

rreusser merged commit 18f7780 into source-design-merge Sep 20, 2016

rreusser deleted the animation-documentation branch September 20, 2016 15:45

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[WIP] Animation documentation #527

[WIP] Animation documentation #527

rreusser commented Sep 15, 2016 •

edited

Loading

cldougl left a comment

cldougl Sep 16, 2016 •

edited

Loading

cldougl Sep 16, 2016

cldougl Sep 16, 2016

rreusser Sep 16, 2016 •

edited

Loading

cldougl Sep 18, 2016

cldougl Sep 16, 2016

rreusser Sep 16, 2016

cldougl Sep 16, 2016

cldougl Sep 16, 2016

cldougl Sep 16, 2016

cldougl Sep 16, 2016

cldougl Sep 16, 2016 •

edited

Loading

rreusser Sep 16, 2016

cldougl Sep 18, 2016

cldougl Sep 16, 2016

cldougl commented Sep 16, 2016


		The first row of buttons animates a different set of predefined frames by changing the second argument of `Plotly.animate`. Passing `null` animates all defined frames in sequence, while passing an array of strings (here, the frames in reverse) animates a specific sequence of frames. By passing a plain string (here, `lower` or `upper`), it filters the animated frames to those with a `group` property equal to that name.

		The second row of buttons chnages the animation `mode`. The mode defines whether an animation either interrupts or follows the current animation. `immediate` mode discards all queued frames and begins a new sequence immediately. The `next` mode is very similar but doesn't begin the new animation until the end of the current frame. Finally, `afterall` queues the new frames so that the new animation begins only after all previous animations have completed.

		@@ -0,0 +1,55 @@
		---
		name: Defing named frames with <code>Plotly.addFrames</code>

[WIP] Animation documentation #527

[WIP] Animation documentation #527

Conversation

rreusser commented Sep 15, 2016 • edited Loading

cldougl left a comment

Choose a reason for hiding this comment

cldougl Sep 16, 2016 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rreusser Sep 16, 2016 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

cldougl Sep 16, 2016 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

cldougl commented Sep 16, 2016

rreusser commented Sep 15, 2016 •

edited

Loading

cldougl Sep 16, 2016 •

edited

Loading

rreusser Sep 16, 2016 •

edited

Loading

cldougl Sep 16, 2016 •

edited

Loading