Skip to content
Switch branches/tags

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time



This repository is an experiment trying to incorporate D3 into IPython Notebook (Jupyter). The main objective is to take advantage of Jupyter's interface which enables manipulation of the DOM, to build interactive, JavaScript-powered plots.

Why ?

Because IPython Notebook is really convenient. In fact, since the notebook supports markdown, HTML (through IPython.core.display) in addition to python/julia/R type cells, it is suitable for writing a complete blog post or a web-oriented scientific essay with only little post-editing needed. Therefore, it would be nice to have a way to automatically incorporate interactive graphs in it, by writing python code. There are actually ways to perfom such task :

All of them are pretty good, and if you are reading this, you have probably already heard of them. Truthfully, you should try either Altair or holoviews, if you are looking for a well maintained package that will prove useful in the long term.

D3IpyPlus's plots are based on D3plus which has a nice API, and is much easier to work with than d3js. The main idea was inspired from

Basic ScatterPlot Example

Don't forget that this will only works in Ipython notebook.

from d3IpyPlus import ScatterPlot

sample_data = [
    {"value": 100, "weight": .45, "type": "alpha"},
    {"value": 70, "weight": .60, "type": "beta"},
    {"value": 40, "weight": -.2, "type": "gamma"},
    {"value": 15, "weight": .1, "type": "delta"}

# you can pass a container_id parameter, that will correspond to 
# the id of the div to which your plot will be attached
# Alternatively, a unique div id will be automatically generated if the argument is missing.
scplot = ScatterPlot(x='value', y='weight', id='type', width=600, size=10)
# The following will display the plot inside the notebook
# You can also dump html source corresponding to the plot
# which will output the following html
    <script src='' type='text/javascript'></script>
    <script src='' type='text/javascript'></script>
    <div id='d3viz_1'></div>
             width: 600px;
             height: 400px;
    (function (){
        var viz_data = [{"type": "alpha", "weight": 0.45, "value": 100}, {"type": "beta", "weight": 0.6, "value": 70}, {"type": "gamma", "weight": -0.2, "value": 40}, {"type": "delta", "weight": 0.1, "value": 15}];

        var visualization = d3plus.viz()


Detailed examples

Detailed examples are available in the example folder. A Binder link is also available if you want a live version (click on the badge) Binder


Using d3plus in jupyter notebook




No releases published


No packages published