Only Line, Area and Bar (Unstacked and Stacked) charts are supported at the momen. c3py can be used for displaying charts inside Jupyter Notebooks or rendering self-contained HTML files.

In [1]:
from c3py import C3Chart as c3
In [2]:
import sys
import IPython
In [3]:
print(sys.version)
print(IPython.__version__)
3.5.2 |Continuum Analytics, Inc.| (default, Jul  2 2016, 17:53:06) 
[GCC 4.4.7 20120313 (Red Hat 4.4.7-1)]
4.2.0

For displaying inside Jupyter - Load required Javascript libraries:

In [4]:
c3.ipy_load()
c3 loaded

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

In [12]:
from pandas_datareader import data, wb
In [17]:
df = wb.download(indicator='NY.GDP.PCAP.PP.KD', country="all", start=2010, end=2015).unstack()

This is how raw df looks:

In [18]:
df.head()
Out[18]:
NY.GDP.PCAP.PP.KD
year 2010 2011 2012 2013 2014 2015
country
Afghanistan 1662.803526 1712.588720 1899.299559 1876.190879 1844.021503 1808.126028
Albania 9373.839505 9640.144593 9792.315861 9913.298591 10102.193615 10401.183471
Algeria 12898.296186 13026.191661 13209.231761 13313.558917 13553.906066 13822.566222
American Samoa NaN NaN NaN NaN NaN NaN
Andorra NaN NaN NaN NaN NaN NaN

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

In [19]:
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[19]:
year 2010 2011 2012 2013 2014 2015 5yr_change
country
South Sudan 3793 3461 1786 1937 1926 1741 -0.492223
Central African Republic 888 900 919 570 565 581 -0.363739
Oman 46839 42479 42052 39827 37667 37541 -0.195820
Lebanon 16281 15683 14946 14045 13470 13089 -0.172655
Greece 29259 26626 24816 24186 24434 24535 -0.164907
Macao SAR, China 98614 117340 125624 137164 133675 104718 0.355538
Sierra Leone 1361 1394 1570 1854 1896 1473 0.393093
Turkmenistan 10031 11360 12459 13554 14761 15527 0.471538
Mongolia 7708 8889 9809 10757 11403 11477 0.479372
Nauru 6592 7349 8061 10771 14631 14974 1.219508
In [20]:
ch1 = c3(data=df_selected[['2010', '2011', '2012', '2013', '2014', '2015']].T, 
         width=1020, height=380, kind="line", title="GDP Per Capita 2010-2015 Growth - Top 5 and Bottom 5 Countries", id="ch1")
ch1()
Out[20]:
   GDP Per Capita 2010-2015 Growth - Top 5 and Bottom 5 Countries


Now lat's create a copy of the above chart presented as an area chart

In [21]:
ch2 = ch1.copy()
In [22]:
ch2.id = "ch2"
ch2.kind = "area"
ch2()
Out[22]:
   GDP Per Capita 2010-2015 Growth - Top 5 and Bottom 5 Countries


Render a HTML file with both files:

In [23]:
with open("sample.html", "w") as f:
    f.write("<html><body>" + c3.head + ch1.to_html() + "<br/><br/>" + ch2.to_html() + "</html></body>")

Yuri Zhylyuk 2016-10-23