D3 in Jupyter : PyData NYC 2015

Brian Coffey
Data Scientist, Stitch Fix
PyData NYC 2015
D3 in Jupyter

https://github.com/stitchfix/d3-jupyter-tutorial

Overview
1. Why you may occasionally wish to do this (but likely not all the time)
2. Hello DOM!
3. Meet bl.ocks.org, I think you’ll be great friends
4. A simple D3 scatterplot in Jupyter
5. A bar chart with interactivity (hello again DOM!)
6. Networks, maps and more
7. D3_lib.py (if you want to)
8. Discussion: From sketch to notebook frame

Why not all the time?
matplotlib, mpld3, bokeh, seaborn, toyplot, vispy, vincent, …

Why not all the time?
matplotlib, mpld3, bokeh, seaborn, toyplot, vispy, vincent, …
Okay. Then why bother at all?
1. Maybe you just want the ultimate freedom in your data visualization, and
you happen to have some extra time on your hands, and/or you happen
to be a D3 wiz.
2. Maybe the perfect visualization for your analytical needs is not readily
available with other graphing tools, but there is a D3 example out there
that would be perfect with just some minor tweaks.
3. Maybe you are collaborating with a front-end person on a custom viz

Just a heads up before we dig in.
If you are not already familiar with html, css and javascript, your eyes may
glaze over a bit during the first part of this tutorial.
But get what you can out of it, as understanding how it works will help you
to make the most of D3 in your Jupyter notebooks. I will try to be very clear
on the essential pieces of information you need to function, and on the
major gotchas for troubleshooting.
And if you get too lost, fear not. At the other end, there is a small helper
library and a collection of examples that you can use straight out of the box.

2. Hello DOM!
“Oh, you can just call me Document Object Model for short”
Check me out in your browser’s development tools. Highlight a particular
element using the magnifying glass.
notebook: hello_dom.ipynb

from IPython.core.display import HTML
HTML( ‘<h1>Hello DOM!</h1>’ )
in general … HTML( [insert a html string here and I will put it in the DOM] )
(I will put it in the div assigned to the output_result of the code block that I am in.)
2. Hello DOM! hello_dom.ipynb

Let’s add some style…
HTML(‘
<style> … </style>
<h1 class=“steely”>Hello DOM!</h1>’)

And some javascript to modify the newly-added DOM element
HTML( ‘…
<h1 class=“steely” id=“steely-DOM”>Hello DOM!</h1>
<script>$(‘steely-DOM’).text(“Hello JavaScript!!!”)</script>’)

Great. But how does D3 fit into this?
D3 is a JavaScript library. The Ds are for Data Driven Documents.
Think ‘Data Driven DOM’.
A core aspect of using the D3 library is the following pattern:
1. Select some array of DOM elements
Note that this may be an empty array
2. ‘Attach’ an array of data to that array of DOM elements
The array lengths need not match. Extra data may ‘enter’, or DOM elements may ‘exit’. D3
coordinates all of this with elegance.
3. Perform some actions for each element in the data array
This will generally involve modifying the selected DOM elements, or removing or appending
new DOM elements, based on the values of the data array.

Appending elements to the DOM with D3

Just one last step – writing data from Python into the JavaScript for use by
D3

A Brief Review of Key Points:
IPython.core.display.HTML allows you to directly write new DOM elements
With that HTML function, we can add css (<style>) and javascript (<script>)
elements, as well as <div> elements (or <h1> elements, etc) for them to act
on
D3 is a clever javascript library for DOM modification based on arrays of
data
We can write python data directly into <script> element text so that it can be
acted upon by D3.
for any late-joiners:

A Brief Review of Key Points:
IPython.core.display.HTML allows you to directly write new DOM elements
With that HTML function, we can add css (<style>) and javascript (<script>)
elements, as well as <div> elements (or <h1> elements, etc) for them to act
on
D3 is a clever javascript library for DOM modification based on arrays of
data
We can write python data directly into <script> element text so that it can be
acted upon by D3.
Sure. Great. But I haven’t seen any data visualizations yet…

http://bl.ocks.org/mbostock/4063269http://bl.ocks.org/mbostock/1353700http://bl.ocks.org/mbostock/4060954
d3js.org , bl.ocks.org/mbostock
(And welcome to data visualization heaven)

http://bl.ocks.org/mbostock/4060954
Anatomy of a bl.ock
Pretty graphic, often interactive
Short description
html, css and javascript that
produces the graphic
data that gets read by script,
usually in csv or tsv form

Using this bl.ocks example: http://bl.ocks.org/mbostock/3887118
We will produce this in Jupyter:
4. A simple D3 scatterplot in Jupyter iris_scatterplot.ipynb

5. A bar chart with interactivity bar_chart_with_update.ipynb
(hello again DOM!)
watch out for the twist…

6. Networks, maps and more
sigma_js_graph.ipynb
temperature_histories.ipynb
polyFill_d3.ipynb
3d_meshing.ipynb

7. D3_lib.py (if you want to) multiple_simple_examples.ipynb
We have encapsulated a lot of the boilerplate for this method into an
external python file, which in turn calls external files containing your css
and js templates.
This just helps to keep things visually clean.
Feel free to use it as is and/or modify it to suit your needs.

8. Discussion: From sketch to notebook frame randomized_sketch.ipynb

Data Science @ Stitch
Fixbcoffey@stitchfix.com multithreaded.stitchfix.com
Thank you!

D3 in Jupyter : PyData NYC 2015

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to D3 in Jupyter : PyData NYC 2015 (20)

Recently uploaded (20)

D3 in Jupyter : PyData NYC 2015