From 3780607d9c668a239e6b6a730f0a3aee378cd0f4 Mon Sep 17 00:00:00 2001 From: Adam Kulidjian Date: Fri, 9 Dec 2016 15:46:29 -0500 Subject: [PATCH] udpate animations in 1.12.10 for CHANGELOG and beef up doc examples in create_animations --- CHANGELOG.md | 62 +++++++++++++++++- plotly/plotly/plotly.py | 136 ++++++++++++++++++++++++++++++++++++---- 2 files changed, 184 insertions(+), 14 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 8a59a3a04c9..c6fefd84707 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -26,7 +26,7 @@ This project adheres to [Semantic Versioning](http://semver.org/). - Please note that these configuration options are for offline plots ONLY. For configuration options when embedding online plots please see our [embed tutorial](http://help.plot.ly/embed-graphs-in-websites/#step-8-customize-the-iframe). - `colors.py` file which contains functions for manipulating and validating colors and arrays of colors - 'scale' param in `FF.create_trisurf` which now can set the interpolation on the colorscales -- animations now work in offline mode. By running `plotly.offline.plot()` and `plotly.offline.iplot()` with a `fig` with `frames`, the resulting plot will cycle through the figures defined in `frames` either in the browser or in an ipython notebook respectively. Here's an example +- animations now work in offline mode. By running `plotly.offline.plot()` and `plotly.offline.iplot()` with a `fig` with `frames`, the resulting plot will cycle through the figures defined in `frames` either in the browser or in an ipython notebook respectively. Here's an example: ``` import IPython.display from IPython.display import display, HTML @@ -46,7 +46,65 @@ figure_or_data = {'data': [{'x': [1, 2], 'y': [0, 1]}], iplot(figure_or_data) ``` More examples can be found at https://plot.ly/python/animations/. -- Upcoming animations in online mode: use `plotly.plotly.create_animations` and `plotly.plotly.icreate_animations` which animate a figure with the `frames` argument. +- animations now work in online mode: use `plotly.plotly.create_animations` and `plotly.plotly.icreate_animations` which animate a figure with the `frames` argument. Here is a simple example: +``` +import plotly.plotly as py +from plotly.grid_objs import Grid, Column + +column_1 = Column([0.5], 'x') +column_2 = Column([0.5], 'y') +column_3 = Column([1.5], 'x2') +column_4 = Column([1.5], 'y2') + +grid = Grid([column_1, column_2, column_3, column_4]) +py.grid_ops.upload(grid, 'ping_pong_grid', auto_open=False) + +# create figure +figure = { + 'data': [ + { + 'xsrc': grid.get_column_reference('x'), + 'ysrc': grid.get_column_reference('y'), + 'mode': 'markers', + } + ], + 'layout': {'title': 'Ping Pong Animation', + 'xaxis': {'range': [0, 2], 'autorange': False}, + 'yaxis': {'range': [0, 2], 'autorange': False}, + 'updatemenus': [{ + 'buttons': [ + {'args': [None], + 'label': u'Play', + 'method': u'animate'} + ], + 'pad': {'r': 10, 't': 87}, + 'showactive': False, + 'type': 'buttons' + }]}, + 'frames': [ + { + 'data': [ + { + 'xsrc': grid.get_column_reference('x2'), + 'ysrc': grid.get_column_reference('y2'), + 'mode': 'markers', + } + ] + }, + { + 'data': [ + { + 'xsrc': grid.get_column_reference('x'), + 'ysrc': grid.get_column_reference('y'), + 'mode': 'markers', + } + ] + } + ] +} + +py.create_animations(figure, 'ping_pong') +``` ### Fixed - Trisurf now uses correct `Plotly Colorscales` when called diff --git a/plotly/plotly/plotly.py b/plotly/plotly/plotly.py index 3f16f2a6b33..756fc190000 100644 --- a/plotly/plotly/plotly.py +++ b/plotly/plotly/plotly.py @@ -1517,36 +1517,148 @@ def create_animations(figure, filename=None, sharing='public', auto_open=True): import plotly.plotly as py from plotly.grid_objs import Grid, Column - column_1 = Column([1, 2, 3], 'x') - column_2 = Column([1, 3, 6], 'y') - column_3 = Column([2, 4, 6], 'new x') - column_4 = Column([1, 1, 5], 'new y') + column_1 = Column([0.5], 'x') + column_2 = Column([0.5], 'y') + column_3 = Column([1.5], 'x2') + column_4 = Column([1.5], 'y2') + grid = Grid([column_1, column_2, column_3, column_4]) - py.grid_ops.upload(grid, 'animations_grid', auto_open=False) + py.grid_ops.upload(grid, 'ping_pong_grid', auto_open=False) # create figure figure = { 'data': [ { 'xsrc': grid.get_column_reference('x'), - 'ysrc': grid.get_column_reference('y') + 'ysrc': grid.get_column_reference('y'), + 'mode': 'markers', } ], - 'layout': {'title': 'First Title'}, + 'layout': {'title': 'Ping Pong Animation', + 'xaxis': {'range': [0, 2], 'autorange': False}, + 'yaxis': {'range': [0, 2], 'autorange': False}, + 'updatemenus': [{ + 'buttons': [ + {'args': [None], + 'label': u'Play', + 'method': u'animate'} + ], + 'pad': {'r': 10, 't': 87}, + 'showactive': False, + 'type': 'buttons' + }]}, 'frames': [ { 'data': [ { - 'xsrc': grid.get_column_reference('new x'), - 'ysrc': grid.get_column_reference('new y') + 'xsrc': grid.get_column_reference('x2'), + 'ysrc': grid.get_column_reference('y2'), + 'mode': 'markers', + } + ] + }, + { + 'data': [ + { + 'xsrc': grid.get_column_reference('x'), + 'ysrc': grid.get_column_reference('y'), + 'mode': 'markers', } - ], - 'layout': {'title': 'Second Title'} + ] } ] } - py.create_animations(figure, 'new_plot_with_animations') + py.create_animations(figure, 'ping_pong') + ``` + + Example 2: Growing Circles Animation + ``` + import plotly.plotly as py + from plotly.grid_objs import Grid, Column + + column_1 = Column([0.9, 1.1], 'x') + column_2 = Column([1.0, 1.0], 'y') + column_3 = Column([0.8, 1.2], 'x2') + column_4 = Column([1.2, 0.8], 'y2') + column_5 = Column([0.7, 1.3], 'x3') + column_6 = Column([0.7, 1.3], 'y3') + column_7 = Column([0.6, 1.4], 'x4') + column_8 = Column([1.5, 0.5], 'y4') + column_9 = Column([0.4, 1.6], 'x5') + column_10 = Column([1.2, 0.8], 'y5') + + grid = Grid([column_1, column_2, column_3, column_4, column_5, + column_6, column_7, column_8, column_9, column_10]) + py.grid_ops.upload(grid, 'growing_circles_grid', auto_open=False) + + # create figure + figure = { + 'data': [ + { + 'xsrc': grid.get_column_reference('x'), + 'ysrc': grid.get_column_reference('y'), + 'mode': 'markers', + 'marker': {'color': '#48186a', 'size': 10} + } + ], + 'layout': {'title': 'Growing Circles', + 'xaxis': {'range': [0, 2], 'autorange': False}, + 'yaxis': {'range': [0, 2], 'autorange': False}, + 'updatemenus': [{ + 'buttons': [ + {'args': [None], + 'label': u'Play', + 'method': u'animate'} + ], + 'pad': {'r': 10, 't': 87}, + 'showactive': False, + 'type': 'buttons' + }]}, + 'frames': [ + { + 'data': [ + { + 'xsrc': grid.get_column_reference('x2'), + 'ysrc': grid.get_column_reference('y2'), + 'mode': 'markers', + 'marker': {'color': '#3b528b', 'size': 25} + } + ] + }, + { + 'data': [ + { + 'xsrc': grid.get_column_reference('x3'), + 'ysrc': grid.get_column_reference('y3'), + 'mode': 'markers', + 'marker': {'color': '#26828e', 'size': 50} + } + ] + }, + { + 'data': [ + { + 'xsrc': grid.get_column_reference('x4'), + 'ysrc': grid.get_column_reference('y4'), + 'mode': 'markers', + 'marker': {'color': '#5ec962', 'size': 80} + } + ] + }, + { + 'data': [ + { + 'xsrc': grid.get_column_reference('x5'), + 'ysrc': grid.get_column_reference('y5'), + 'mode': 'markers', + 'marker': {'color': '#d8e219', 'size': 100} + } + ] + } + ] + } + py.create_animations(figure, 'growing_circles') ``` """ credentials = get_credentials()