hvergara / matta

matta - view and scaffold d3.js visualizations in IPython notebooks

matta

An artist for your IPython notebook that helps you to use and scaffold visualizations with d3.js.

Currently matta supports some visualizations that I have needed to implement in my on-going doctoral thesis. But the main idea is to have a generalizable template to build visualizations on.

matta works with Python 2. Python 3 support is planned to be added at some point.

Contributions are welcome.

Examples / Documentation

Although there is no official documentation yet, you can explore the following resources for examples and descriptions.

IPython Notebooks

The following notebooks serve as examples/documentation:

• Basic Notebook Examples
• Let's Make a Map Too
• Let's Make Scaffold a Barchart

If you do not see any visualizations when browsing the notebooks on NBViewer, please refresh the page. I don't know why it doesn't work on first load -- if you have any idea of why this happens, please let me know! :)

In the Wild

• 2|S: Los Dos Santiagos: this is a project where we scaffolded many visualizations (Sankey, TopoJSON, Force Edge Bundle) to visualize transport data in Santiago, Chile. All visualizations in the page were scaffolded with matta! Note: the site is in spanish.

Initialization / Installation

First, install the python package:

pip install -r requirements.txt
python setup.py install

Then make a symbolic link in your IPython profile to matta libs:

~/.ipython/profile_default/static/custom$ ln -s ~/phd/apps/matta/matta/libs/ matta

And finally, edit the custom.js file and add the following lines:

require.config({
    paths: {
        "leaflet": "/static/custom/matta/leaflet-0.7.3/leaflet-src",
        "wordcloud": "/static/custom/matta/d3.layout.cloud",
        "sankey": "/static/custom/matta/d3.sankey",
        "matta": "/static/custom/matta/matta",
        "tile": "/static/custom/matta/d3.geo.tile",
        "force_edge_bundling": "/static/custom/matta/d3.ForceEdgeBundling",
        "topojson": "/static/custom/matta/topojson",
        "d3": "/static/custom/matta/d3.v3.min"
    }
});

require(['matta'], function(matta) {
    matta.add_css('/static/custom/matta/matta.css');
});

Credits

Although matta is mostly coded by me (@carnby, it contains many code and ideas from others. In particular:

• Jason Davies and Mike Bostock -- much code from them is being used, reused and abused (not to mention d3.js itself). Thanks!
• Force Bundle Layout
• All the great devs behind IPython, numpy, scipy, pandas, networkx, seaborn, d3.js...

In particular, it includes the following libraries:

• d3.js
• d3.sankey
• d3.layout.cloud
• d3.ForceEdgeBundling
• topojson 1.6.18
• leaflet

Thanks to all of them!

About the name

See Roberto Matta @ Wikipedia. He has a painting named "ojo con los desarrolladores" (desarrolladores is spanish for developers).