Coder Social home page Coder Social logo

py_d3's Introduction

py_d3 PyPi version t

py_d3 is an IPython extension which adds D3 support to the Jupyter Notebook environment.

D3 is a well-known and -loved JavaScript data visualization and document object manipulation library which makes it possible to express even extremely complex visual ideas simply using an intuitive grammar. Jupyter is a browser-hosted Python executable environment which provides an intuitive data science interface.

These libraries are foundational cornerstones of web-based data visualization and web-based data science, respectively. Wouldn't it be great if we could them to work together? This module does just that.

Quickstart

To create a D3 block in your notebook, add the %%d3 cell magic to the top of the cell:

alt text

To choose a specific version of D3, append the version number onto the end of the line:

alt text

Both 3.x and 4.x versions of D3 are supported. Note, however, that you may only run one version of D3 per notebook.

py_d3 allows you to express even very complex visual ideas within a Jupyter Notebook without much difficulty. A Radial Reingold-Tilford Tree, for example:

alt text

An interactive treemap (original):

alt text

Or even the entire D3 Show Reel animation:

alt text

For more examples refer to the examples notebooks.

Installation

The easiest way to get py_d3 is to pip install py_d3 and then run %load_ext py_d3 in Jupyter Notebook.

alt text

Porting

Most HTML-hosted D3 visualizations, even very complex ones, can be made to run inside of a Jupyter Notebook %%d3 cell with just two modifications:

  • Remove any D3 imports in the cell (e.g. <script src="https://d3js.org/d3.v3.js"></script>). D3 is initialized at cell runtime by the %%d3 cell magic (3.5.11 by default, you can specify a specific version via line parameter, e.g. %%d3 3.4.3).
  • Since an HTML document can only have one <body> tag, and it's already defined in the Jupyter framing, variants of d3.select("body").append("g") won't work. Workaround: define an <g> element yourself and then do d3.select("g") instead.

These changes alone were sufficient to import the visualizations presented here and in the examples.

Technicals

Jupyter notebooks allow executing arbitrary JavaScript code using IPython.display.JavaScript, however it makes no effort to restrict the level of DOM objects accessible to executable code. Thus if you ran, for instance, %javascript d3.selectAll("div").remove();, you would target and remove all div elements on the page, including the ones making up the notebook itself!

This plugin attempts to improve on a few existing Jupyter-D3 bindings by restricting d3 scope to whatever cell you are running the code in. It achieves this by monkey-patching subselection over the core d3.select and d3.selectAll methods (see this comment by Mike Bostock for ideation).

py_d3, though thoroughly capable, has a lot of quirks:

  • Force graphs don't work at all. Use ipython-d3networkx instead.
  • You will need to run your cells first before your plots will show up.
  • D3 cells generated via Run All may fail. Run the cell individually instead.
  • You probably will have to run the first %%d3 cell on the page twice.
  • Your version of D3 will be cached. To load a different version, purge your cache.
  • If you have multiple D3 cells in your notebook, make sure that each one starts with the same %%d3 <VERSION> magic! See Issue #4.

Contributing

The codebase is actually very simple. Pull requests welcome!

Liscense

MIT.

py_d3's People

Contributors

residentmario avatar jobjob avatar

Watchers

James Cloos avatar Charlie Wu avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.