from IPython.display import Image
Image(url='http://i.imgur.com/5Y6fZNC.gif')

from plotly.widgets import GraphWidget

from IPython.html import widgets 
from IPython.display import display, clear_output

g = GraphWidget('https://plot.ly/~chris/4103')

class xydata:
    def __init__(self):
        self.x = [0]
        self.y = [0]
    
    def on_x_change(self, name, old_value, new_value):
        self.x.append(new_value)
        self.y.append(self.y[-1])
        self.replot()
        
    def on_y_change(self, name, old_value, new_value):
        self.x.append(self.x[-1])
        self.y.append(new_value)
        self.replot()
        
    def replot(self):
        g.restyle({
            'x': [self.x],
            'y': [self.y]
        })


x_slider = widgets.FloatSliderWidget()
x_slider.description = 'X Value'
x_slider.value = 0
y_slider = widgets.FloatSliderWidget()
y_slider.description = 'Y Value'
y_slider.value = 0

xystate = xydata()
x_slider.on_trait_change(xystate.on_x_change, 'value')
y_slider.on_trait_change(xystate.on_y_change, 'value')

shake = widgets.ButtonWidget()
def on_shake(widget):
    g.restyle({'x': [[]], 'y': [[]]})
    xystate.x = [x_slider.value]
    xystate.y = [y_slider.value]

shake.on_click(on_shake)
shake.description = 'Shake'

display(x_slider)
display(y_slider)
display(shake)
display(g)

# CSS styling within IPython notebook - feel free to re-use
from IPython.core.display import HTML
import urllib2

HTML(urllib2.urlopen('http://bit.ly/1Bf5Hft').read())