In [19]:
import sys
import IPython
from IPython.display import display
from IPython.display import HTML, Javascript
In [20]:
print(sys.version)
print(IPython.__version__)
3.5.1 |Anaconda 2.4.1 (64-bit)| (default, Dec  7 2015, 11:16:01) 
[GCC 4.4.7 20120313 (Red Hat 4.4.7-1)]
4.2.0

Download some GDP data from World Bank and prepare Pandas DataFrame object:

In [21]:
from pandas.io import wb
In [22]:
df = wb.download(indicator='NY.GDP.PCAP.PP.KD', country="all", start=2010, end=2014).unstack()

Cleanup and create df_selected with top 5 and bottom 5 countries based on GDP Per Capita Growth between 2010 and 2014:

In [23]:
df.columns = df.columns.levels[1]
df = df.dropna(how="any")
df = df.astype(int)
df["5yr_change"] = (df["2014"]-df["2010"])/df["2010"]
df = df.sort_values("5yr_change")
df_selected = df.head().append(df.tail())
df_selected
Out[23]:
year 2010 2011 2012 2013 2014 5yr_change
country
South Sudan 3793 3461 1786 1937 1926 -0.492223
Libya 29173 11023 22560 19557 14879 -0.489974
Central African Republic 881 893 912 572 566 -0.357548
Oman 46832 42479 41186 38835 36854 -0.213059
Greece 29259 26626 24816 24197 24569 -0.160293
China 9429 10274 11016 11805 12599 0.336197
Macao SAR, China 98722 117101 125294 136135 133341 0.350672
Sierra Leone 1345 1374 1549 1832 1875 0.394052
Turkmenistan 10031 11360 12460 13555 14762 0.471638
Mongolia 7708 8889 9809 10756 11396 0.478464

Convert DataFrame to a format understood by c3:

In [24]:
def df2c3(df):
    import numpy as np
    data = {}
    categories = list(df.index.values)
    columns = []
    for col in df.columns:
        this_col = [col]
        this_col.extend(list(df[col].values))
        columns.append(this_col)
    data["columns"] = columns
    data["categories"] = categories
    return data
In [25]:
viz_data = df2c3(df_selected[['2010', '2011', '2012', '2013', '2014']].sort_values("2014", ascending=False).T)
In [26]:
viz_data
Out[26]:
{'categories': ['2010', '2011', '2012', '2013', '2014'],
 'columns': [['Macao SAR, China', 98722, 117101, 125294, 136135, 133341],
  ['Oman', 46832, 42479, 41186, 38835, 36854],
  ['Greece', 29259, 26626, 24816, 24197, 24569],
  ['Libya', 29173, 11023, 22560, 19557, 14879],
  ['Turkmenistan', 10031, 11360, 12460, 13555, 14762],
  ['China', 9429, 10274, 11016, 11805, 12599],
  ['Mongolia', 7708, 8889, 9809, 10756, 11396],
  ['South Sudan', 3793, 3461, 1786, 1937, 1926],
  ['Sierra Leone', 1345, 1374, 1549, 1832, 1875],
  ['Central African Republic', 881, 893, 912, 572, 566]]}

Load d3 and c3 JavaScript Libraries:

In [27]:
%%javascript
require.config({
   baseUrl: "",
   paths: { 
            d3: '//cdnjs.cloudflare.com/ajax/libs/d3/3.4.8/d3.min',
            c3: "//cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min"
          }
});
In [28]:
%%javascript
require(["d3", "c3"], function(d3, c3) {
window.d3 = d3;
window.c3 = c3;
});

Pass Python viz_data object to JavaScript:

In [29]:
Javascript("""
           window.viz_data={viz_data};
           """.format(viz_data=viz_data))
Out[29]:

Add c3 styles and prepare div tag for chart:

In [30]:
%%javascript
$("head").append('<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css" rel="stylesheet" />');
$("head").append('<style>.c3-line { stroke-width: 3px; }</style>');
In [31]:
%%javascript
$("#chart1").remove();
element.append("<h4>GDP Per Capita 2010-2014 Growth - Top 5 and Bottom 5 Countries Line Chart</h4><div id='chart1'></div>");

Draw a Chart in the output cell above:

In [32]:
%%javascript
var chart = c3.generate({
    bindto: "#chart1",
    size: {height: 480 },
    data: {
        columns: viz_data["columns"],
        type:"spline"
    },
    axis: {
            x: {
                type:"category",
                categories: viz_data["categories"]
              }
          },
    grid: {
            x: {show: true},
            y: { show: true}
        }       
});

You should get something like this:

Now let's make a bar chart:

In [33]:
%%javascript
$("#chart2").remove();
element.append("<h4>GDP Per Capita 2010-2014 Growth - Top 5 and Bottom 5 Countries Bar Chart</h4><div id='chart2'></div>");
In [34]:
%%javascript
var chart = c3.generate({
    bindto: "#chart2",
    size: {height: 640 },
    data: {
        columns: viz_data["columns"],
        type:"bar"
    },
    axis: {
            x: {
                type:"category",
                categories: viz_data["categories"]
              }
          },
    grid: {
            x: {show: true},
            y: { show: true}
        }       
});

You can find more samples of c3.js charts here: http://c3js.org/examples.html