For more information on nvd3, see https://github.com/areski/python-nvd3
This notebook demonstrates simple ipython compatibility in the nvd3-python package, without making any major modifications to how the main package is structured. It utilizes the IPython display-formatter functionality, as described at:
For additional examples, see:
https://github.com/sympy/sympy/blob/master/sympy/interactive/printing.py
Usage of nvd3-python in IPython notebook should be the same as any other IPython-aware display type. In any IPython interface which supports HTML views, nvd3-python will display nvd3 chart objects inline.
import random
from IPython import display as d
import nvd3
nvd3.ipynb.initialize_javascript(use_remote=True)
loaded nvd3 IPython extension run nvd3.IPython_wrapper.initialize_javascript() to set up the notebook help(nvd3.IPython_wrapper.initialize_javascript) for options
Note that the javascript packages for display of nvd3 charts must be loaded into the IPython notebook before charts will display. By default, these are loaded from http://notebook-hostname:port/files/ - this is the default location where IPython 1.x serves files that are in the local working directory. For normal usage, the preferred approach is to download d3.v3.js, nv.d3.js, and nv.d3.css and place them in your notebook working directory.
However, if we want the notebook to display correctly when using http://nbviewer.ipython.org we must point to remotely hosted versions of the nvd3 and d3 javascript and css files. Use_remote=true does just this, with the additional capability to individually define the URLs for each file (or use the defaults).
help(nvd3.ipynb.initialize_javascript)
nvd3.ipynb.initialize_javascript(use_remote=True)
Help on function initialize_javascript in module nvd3.ipynb: initialize_javascript(d3_js_url='http://nvd3.org/assets/lib/d3.v3.js', nvd3_js_url='http://nvd3.org/assets/js/nv.d3.js', nvd3_css_url='http://nvd3.org/assets/css/nv.d3.css', use_remote=False) Initialize the ipython notebook to be able to display nvd3 results. by instructing IPython to load the nvd3 JS and css files, and the d3 JS file. by default, it looks for the files in your IPython Notebook working directory. Takes the following options: use_remote: use remote hosts for d3.js, nvd3.js, and nv.d3.css (default False) * Note: the following options are ignored if use_remote is False: nvd3_css_url: location of nvd3 css file (default http://nvd3.org/assets/css/nv.d3.css) nvd3_js_url: location of nvd3 javascript file (default http://nvd3.org/assets/js/nv.d3.js) nvds_url: location of d3 javascript file (default http://nvd3.org/assets/lib/d3.v3.js)
** Stacked Area Chart **
Here, we create a simple stacked area chart.
Note that there is a potential bug with ipython display of the interactive guideline - the amount of space above the chart affects the placement of the tooltip when viewed in IPython notebook. A simple workaround is to display the chart at the top of the notebook, rather than lower like we see here.
type = 'stackedAreaChart'
chart2 = nvd3.stackedAreaChart(name=type,height=450,use_interactive_guideline=True)
nb_element = 50
xdata = range(nb_element)
ydata = [i * random.randint(1, 10) for i in range(nb_element)]
ydata2 = [x * 2 for x in ydata]
ydata3 = [x * 5 for x in ydata]
chart2.add_serie(name="serie 1", y=ydata, x=xdata)
chart2.add_serie(name="serie 2", y=ydata2, x=xdata)
chart2.add_serie(name="serie 3", y=ydata3, x=xdata)
chart2
chart = nvd3.scatterChart(name='scatterChart_1', width=600, height=300, x_is_date=False)
nb_element = 50
xdata = [i + random.randint(1, 10) for i in range(nb_element)]
ydata = [i * random.randint(1, 10) for i in range(nb_element)]
ydata2 = [x * 2 for x in ydata]
ydata3 = [x * 5 for x in ydata]
kwargs1 = {'shape': 'circle', 'size': '1'}
kwargs2 = {'shape': 'cross', 'size': '10'}
kwargs3 = {'shape': 'triangle-up', 'size': '100'}
extra_serie = {"tooltip": {"y_start": "", "y_end": " calls"}}
chart.add_serie(name="serie 1", y=ydata, x=xdata, extra=extra_serie, **kwargs1)
chart.add_serie(name="serie 2", y=ydata2, x=xdata, extra=extra_serie, **kwargs2)
chart.add_serie(name="serie 3", y=ydata3, x=xdata, extra=extra_serie, **kwargs3)
chart
type = 'pieChart'
chart1 = nvd3.pieChart(name=type, color_category='category20c', height=450, width=450)
chart1.set_containerheader("\n\n<h2>" + type + "</h2>\n\n")
#Create the keys
xdata = ["Orange", "Banana", "Pear", "Kiwi", "Apple", "Strawberry", "Pineapple"]
ydata = [3, 4, 0, 1, 5, 7, 3]
#Add the serie
extra_serie = {"tooltip": {"y_start": "", "y_end": " cal"}}
chart1.add_serie(y=ydata, x=xdata, extra=extra_serie)
chart1
chart3=nvd3.lineWithFocusChart(name="focusChart",height=450)
nb_element = 100
xdata = range(nb_element)
ydata = [i * random.randint(1, 10) for i in range(nb_element)]
chart3.add_serie(x=xdata,y=ydata,name="random data")
chart3
import numpy
chart4 = nvd3.multiBarChart(name="multiBarChart",height=450)
max_value = 8
data1 = numpy.random.normal(loc=max_value/2,scale=max_value/6,size=1000)
hist1 = numpy.histogram(data1,bins=100)
xdata1 = hist1[1].tolist()
ydata1 = hist1[0].tolist()
data2 = numpy.random.gamma(shape=2., scale=1., size=1000)
hist2 = numpy.histogram(data2,bins=xdata1)
xdata2 = hist2[1].tolist()
ydata2 = hist2[0].tolist()
chart4.add_serie(x=xdata1,y=ydata1,name="Normal Distribution")
chart4.add_serie(x=xdata2,y=ydata2,name="Gamma Distribution")
chart4