iflot - connects Flot library to IPython

Yet another small library trying to enhance the IPython experience with great interactive visualization. The Flot plotting library supports a large number of appealing charts and supports rich javascript interaction and data integration.

This work aims to expose the full Flot API to IPython developers. It enhances a previous implmentation by crbates.

To use the library you should:

  1. import iflot

  2. Instansiate iflot.Plot()

  3. Create a plot placeholder using create_plot_placeholder(). This creates a stub in the notebook that uses a unique name provided by you.

  4. Call plot() using the name of the place holder you wish to plot or replace. You may use any option available in the Flot libarary documentation. See the examples below.

    file is hoted on:
    https://github.com/okotek/iflot/


In [1]:
"""
"""

#-----------------------------------------------------------------------------
# Copyright (c) 2013, the IPython Development Team.
#
# Distributed under the terms of the Modified BSD License.
#
# The full license is in the file COPYING.txt, distributed with this software.
#-----------------------------------------------------------------------------

#-----------------------------------------------------------------------------
# Imports
#-----------------------------------------------------------------------------

# Stdlib imports
import string
import json
import IPython.core.display

#-----------------------------------------------------------------------------
# Classes and functions
#-----------------------------------------------------------------------------

class Plot():
    '''
    '''
    
    def create_plot_placeholder( self, name, **kargs ):
        src = """
        <div id="%(n)s" style="width:600px;height:300px;"/>   
        """%{'n':name}
        IPython.core.display.display_html(IPython.core.display.HTML(data=src))
        #print (src)
    
    def plot( self, data, options, name = None):
        """
           data = [(x1,y1,options1),(x2,y2,options2),...]
        """
        if name is None:
            name = str(self.nextName)
            self.nextName += 1
            self.create_plot_placeholder(name)
        src = ''
        encoder = json.JSONEncoder()

        src += 'var plot%(n)s = $.plot($("#%(n)s"), ['%{'n':name}
        
        for sernum,ser in enumerate(data):
            src += "{data :  %s , %s },\n"%(encoder.encode(zip(ser[0],ser[1])), encoder.encode(ser[2])[1:-1])

        src += '], %s);'%encoder.encode(options)

        IPython.core.display.display_javascript(IPython.core.display.Javascript(data=src,
                lib=["http://cdnjs.cloudflare.com/ajax/libs/flot/0.7/jquery.flot.min.js",
                    "http://cdnjs.cloudflare.com/ajax/libs/flot/0.7/jquery.flot.navigate.min.js",
                    "http://cdnjs.cloudflare.com/ajax/libs/flot/0.7/jquery.flot.selection.min.js",
                    "http://cdnjs.cloudflare.com/ajax/libs/flot/0.7/jquery.flot.pie.min.js",
                    ]))

        #print (src)

Minimal


In [2]:
#import iflot
#reload(iflot)
import numpy as np
x = np.linspace(0,np.pi*2, 100)
y = np.sin(x)
plt = Plot()
plt.plot([(x,y,{ 'lines' : { 'show' : True } })],{},'minimal')
plt.create_plot_placeholder('minimal')


A static chart with 4 series of data


In [5]:
import iflot
import numpy as np
x = np.linspace(0,np.pi*2, 100)
x2 = np.linspace(0,np.pi*2, 10)
y1 = np.sin(x)*8
y2 = np.cos(x)*8
y3 = np.cos(x2/2.0)*8
plt = iflot.Plot()
plt.create_plot_placeholder('orik')
options={}
options['pan'] = { 'interactive' : True }
#options['zoom'] = { 'interactive' : True } # bug needs to fixed
zoompanrange = { 'zoomRange' : [0.1, 10.0], 'panRange' : [-10,10] }
options['xaxis'] = zoompanrange
options['yaxis'] = zoompanrange

plt.plot([(range(6), range(6,0,-1), { 'bars' : { 'show' : True }}),
          (x,y1,{ 'lines' : { 'show' : True } }), 
          (x,y2, { 'lines' : { 'show' : True, 'fill' : True }}),
          (x2, y3, { 'points' : { 'show' : True }, 'lines' : { 'show' : True }})], options, 'orik')


A similiar chart using a different placeholder name


In [6]:
import iflot
import numpy as np
x = np.linspace(0,np.pi*2, 100)
x2 = np.linspace(0,np.pi*2, 10)
y1 = np.sin(x)*8
y2 = np.cos(x)*8
y3 = np.cos(x2/2.0)*8
plt = iflot.Plot()
plt.create_plot_placeholder('orig')
options={}
options['pan'] = { 'interactive' : False , 'trigger': "click" }
options['zoom'] = { 'interactive' : False , 'trigger': "click" , 'amount': 1.5}
zoompanrange = { 'zoomRange' : [0.1, 10.0], 'panRange' : [-15,15] }
options['xaxis'] = zoompanrange
options['yaxis'] = zoompanrange

plt.plot([(range(6), range(6,0,-1), { 'bars' : { 'show' : True }, 'label' : 'Series A'}),
          (x,y1,{ 'lines' : { 'show' : True }, 'label' : 'Series B'}), 
          (x,y2, { 'lines' : { 'show' : True, 'fill' : True }}),
          (x2, y3, { 'points' : { 'show' : True }, 'lines' : { 'show' : True }})], options, 'orig')


A simple animation created by replacing the placeholder above once every second.


In [7]:
import time
for t in range(10):
    plt.plot([(range(6), range(6,0,-1), { 'bars' : { 'show' : True }}),
              (x,y1*t,{ 'lines' : { 'show' : True } }), 
              (x,y2, { 'lines' : { 'show' : True, 'fill' : True }}),
              (x2, y3, { 'points' : { 'show' : True }, 'lines' : { 'show' : True }})], options, 'orig')
    time.sleep(1)


Pie Chart


In [8]:
import iflot
reload(iflot)
plt = iflot.Plot()
plt.create_plot_placeholder('pie')
options={}
options['series']={'pie':{'show':True}}
plt.plot([\
    ([1],[50],{ 'label' : 'label1'}),
    ([2],[30],{ 'label' : 'label2'}),
    ([3],[20],{ 'label' : 'label3'}),
    ],options,'pie')



In [ ]: