Motion Charts in Python with Pandas

Hans Olav Melberg (hans.melberg@gmail.com), 17. October, 2015

Import modules



In [9]:

    
from motionchart.motionchart import MotionChart, MotionChartDemo
import webbrowser
import pandas as pd
import pyperclip

Install if necessary, using "pip install motionchart"

Define dataframe



In [2]:

    
fruitdf = pd.DataFrame([
      ['Apples',  '1988-0-1', 1000, 300, 44,'East'],
      ['Oranges', '1988-0-1', 1150, 200, 42, 'West'],
      ['Bananas', '1988-0-1', 300,  250, 35, 'West'],
      ['Apples',  '1989-6-1', 1200, 400, 48, 'East'],
      ['Oranges', '1989-6-1', 750,  150, 47, 'West'],
      ['Bananas', '1989-6-1', 788,  617, 45, 'West']])
fruitdf.columns = ['fruit', 'time', 'sales', 'price', 'temperature', 'location']
fruitdf['time'] =  pd.to_datetime(fruitdf['time'])

Create and show MotionChart



In [3]:

    
mChart = MotionChart(df = fruitdf)
mChart.to_notebook()

Demo



In [ ]:

    
motionChartDemo()

A more detailed look at the options

1. Use the column names from the dataframe to define which variable to use



In [ ]:

    
mc = MotionChart(df = fruitdf,
              key = 'time',
              x = 'price',
              y = 'sales',
              size = 'temperature',
              color = 'fruit',
              category = 'location')
mc.to_browser()

Remember that clicking on the chart after it is created in the browser also allows you to change the specification.

2. To send the object to the Jupyter Notebook, to a browser, to the clipboard and to a html file



In [ ]:

    
mc.to_notebook()
mc.to_browser()
mc.to_clipboard()
mc.to_file()

3. You are free to use the column number instead of the column name

This is useful if you want to use the index column of the dataframe.



In [8]:

    
mc = MotionChart(df = fruitdf, 
                 title = "Motion Chart",
                 url = "http://socr.ucla.edu/htmls/HTML5/MotionChart",
                 key = 1,
                 x = 2,
                 y = 3,
                 size = 4, 
                 color = 5,
                 category = 1)

4. Offline?

It is possible to use create and show motionCharts without an internet connection. This requires that you first install the folders with the javascript files on your local machine (copy the "css" and "js" folders and the content from https://github.com/hmelberg/motionchart). Next, when defining a motion chart you tell it the path to the local folder where the required files are like this:



In [ ]:

    
mChart = MotionChart(dataframe, url = "(path to your folder with the motion chart js and css)")

List of options and defaults



In [ ]:

    
mc = MotionChart(
                    df = df, 
                    title = "Motion Chart",
                    url = "http://socr.ucla.edu/htmls/HTML5/MotionChart",
                    key = 1,
                    x = 2,
                    y = 3,
                    size = 4, 
                    color = 5,
                    category = 1,
                    xscale='linear',
                    yscale='linear',
                    play = 'true',
                    loop = 'false',
                    width = 800,
                    height = 600,
                    varLabels=None)

Explained

# specifies the name of the pandas dataframe used to create the motion chart, default is df

title

# string. The title of the chart (text, string)

url

# string. url to folder with js and css files; can be local, default is external (requires web)

key

# string or integer. the column number of the "play" variable (does not have to be time)

# string or integer. number (integer) or name (text, string) of the x-variable in the chart

# string or integer. number (integer) or name (text, string) of the x-variable in the chart

size

# name (string) or column number of the variable used to determine the size of the circles

color

# name (string) or column number of the variable used to determine the color of the circles

category

# name (string) or column number of the variable used to describe the category

xscale

# Scale for x-variable, default 'linear'. Options: 'log', 'sqrt', 'log', 'quadnomial', 'ordinal'

yscale

# Scale for y-variable, default 'linear'. Options: 'log', 'sqrt', 'log', 'quadnomial', 'ordinal'

play

# string. 'true' or 'false' (default, false). Determines whether the motion starts right away

loop

# string. 'true' or 'false' (default, false). Determines whether the motion keeps repeating

width

# integer. width of chart in pixels, default 800

height

# integer. height of chart in pixels, default 400

varLabels

# list. list of labels for columns (default is column headers of dataframe, 
# must be of same length as the number of columns in the dataframe, including the index columns

Acknowledgements and more information

See https://github.com/RamyElkest/SocrMotionChartsHTML5 for more information about the javascript which builds the chart
See also https://github.com/psychemedia/dataviz4development/tree/master/SocrMotionCharts
For more bakcground, and java version, see http://www.amstat.org/publications/jse/v18n3/dinov.pdf