{ "metadata": { "name": "", "signature": "sha256:12691b120280ad4d5b27b94c3d3fa324d274a90de8bcbddd8d1b7f1eada789da" }, "nbformat": 3, "nbformat_minor": 0, "worksheets": [ { "cells": [ { "cell_type": "heading", "level": 1, "metadata": {}, "source": [ "How to leverage d3.js in the noteboook" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "Because IPython supports HTML and JavaScript representations of Python objects, it is possible to leverage the power of [d3.js](http://d3js.org), even without using the new Widget architecture. These examples help to clarify the differences between regular HTML/JavaScript output and the new Widgets:\n", "\n", "**Regular HTML/JavaScript output in the notebook is put on the page a single time and subsequently cannot communicate with the backend kernel**\n", "\n", "**Widgets can communicate with the backend kernel bidirectionally at any time after being rendered on the page.**\n", "\n", "One of the central benefits of using regular HTML/JavaScript output is that the resulting visualizations will work on http://nbviewer.ipython.org for IPython 2.0.\n", "\n", "We are working on enabling Widgets on http://nbviewer.ipython.org, but it will probably be another 6 months." ] }, { "cell_type": "heading", "level": 2, "metadata": {}, "source": [ "A basic d3.js example" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "Here is a simple example from the d3 website, which shows how we can use d3 directly in the Notebook.\n", "\n", "First, let's create a `div` for a d3 visualization and define some CSS styles:" ] }, { "cell_type": "code", "collapsed": false, "input": [ "%%html\n", "\n", "
\n", "\n", "" ], "language": "python", "metadata": {}, "outputs": [ { "html": [ "\n", "\n", "\n", "" ], "metadata": {}, "output_type": "display_data", "text": [ "