Embedding Interactive Charts on an IPython Notebook - Part 3

Plotting census data using Pandas, D3.js, Chart.js and HighCharts in an IPython Notebook.

On Part 2 we showed you how to use what we learned on Part 1 to embed Chart.js charts into an IPython Notebook.

IPython Notebook

This post is also available as an IPython Notebook on github.com

Part 3 - Embedding HighCharts

Somewhat in between Charts.js and D3 is HighCharts. It can produce beautiful and professional looking animated charts without much coding and it can be customized if needed. This time we’ll plot the age of the population by region and division. We’re going to show one data series per bucket of 20 years. Before we can begin, we need to declare the requirement:

%%javascript
require.config({
    paths: {
        highcharts: '//cdnjs.cloudflare.com/ajax/libs/highcharts/4.0.1/highcharts'
    }
});

Then, we use the same trick with interact, display JavaScript with the callback function display_chart_highcharts

i = interact(
    display_chart_highcharts,
    sc_est2012_age=widgets.fixed(sc_est2012_age),
    show_javascript=widgets.CheckboxWidget(value=False),
    show=widgets.DropdownWidget(
        values={'By Region':'by_region', 'By Division': 'by_division'},
        value='by_region'
    ),
    div=widgets.HTMLWidget(value='<div id="chart_highcharts"></div>')
)
/static/media/uploads/uploads/javascript_charts_4.png

Conclusions

We showed you how to integrate three popular JavaScript charting solutions within an IPython Notebook, and how to make them interactive using HTML widgets. Following this pattern it is quite easy to integrate other libraries like Google Charts (it’s trivial using the RequireJS plugins), AmCharts or JqPlot.

We also used a little bit of Pandas magic to arrange the data to fit our needs.

Want to read more? Follow us on Twitter @machinalis


Previous / Next posts


Comments