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

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

import plotly.plotly as py
from plotly.graph_objs import *
import plotly
from plotly.widgets import GraphWidget

import pandas as pd

df = pd.read_csv('https://raw.githubusercontent.com/plotly/widgets/master/ipython-examples/311_150k.csv', infer_datetime_format=True)
df = df
df.head()

df['Complaint Type'].value_counts()

c = df['Complaint Type'].value_counts()
url = py.plot([Bar(x=c.index, y=c.values)], filename='311 most common complaints', auto_open=False)
plotly.tools.embed(url)

graph = GraphWidget(url)

# Place the graph in a popup, so that we can move it around
popup = widgets.PopupWidget(
    children=[graph]
)
popup.set_css('display', 'none', selector='.btn')

popup

a = df['Agency Name'].value_counts()
graph.restyle({'x': [a.index], 'y': [a.values]})

column_headers_dropdown = widgets.DropdownWidget()
column_headers_dropdown.values  = {column: column for column in df.columns}
column_headers_dropdown

def on_dropdown_selection(_, old_selection, new_selection):
    clear_output()
    display(new_selection)
    
    vc = df[new_selection].value_counts()

    graph.restyle({'x': [vc.index], 'y': [vc.values]})
    
column_headers_dropdown.on_trait_change(on_dropdown_selection, 'value')

idx = df['Complaint Type'].str.contains('Tree').fillna(False)
df[idx]['Complaint Type'].value_counts()

t = widgets.TextWidget()
t.description = 'Search complaint types (e.g. "Tree")'
t

def on_text_input(_, old_text, new_text):
    clear_output()
    display(new_text)
    
    idx = df['Complaint Type'].str.contains(new_text).fillna(False)
    vc = df[idx][column_headers_dropdown.value].value_counts()
    
    graph.restyle({'x': [vc.index], 'y': [vc.values]})    
    
t.on_trait_change(on_text_input, 'value', remove=False)

# 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())