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.
In [ ]:
import random
from IPython import display as d
import nvd3
nvd3.ipynb.initialize_javascript(use_remote=True)
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).
In [ ]:
help(nvd3.ipynb.initialize_javascript)
nvd3.ipynb.initialize_javascript(use_remote=True)
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.
In [ ]:
type = 'stackedAreaChart'
chart2 = nvd3.stackedAreaChart(name=type,height=450,width=500,
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
In [ ]:
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
In [ ]:
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