[IPython-dev] notebook plots via javascript

Bob McElrath bob+ipython@mcelrath....
Thu Jun 7 18:58:41 CDT 2012

Brian Granger [ellisonbg@gmail.com] wrote:
> Bob,
> This is great.  In my work on this branch to make svg images resizable:
> https://github.com/ipython/ipython/pull/1832
> I noticed that the svg created by matplotlib was pixelated.

I'll take a look at that...

> I didn't play with this yet, but left some comments.  Maybe open up
> pull request for this just to have a good place to discuss things.
> There is another question about the svg that matplotlib generates.
> Currently, the main svg tag has a width and height that is specified
> in pts.  I am finding that in the notebook this is very difficult to
> deal with.  Do you think it is possible to specify the width/height in
> the svg tag in pixels?

So far I was trying to get the SVG to simply fill the available space with the
    div.output_svg svg {
        width: 100%;
        height: 32em;
You can set the width and height arbitrarily, using px if you want using that,
however you will be unable to change the aspect ratio.

Turns out even filling the space is difficult because SVG maintaining a fixed
aspect ratio.  We would need some javascript to switch that to 
    width: 100%; 
    height: (aspect ratio)*(measured width);
for the case when the browser window is narrower than 32em/(aspect ratio).

In a nutshell, if you want to change the aspect ratio, you will have to dig into
the matplotlib code, and change the SVG it generates.

> > While this isn't interactive javascript yet, we can begin attaching some
> > javascript to the SVG DOM elements.
> And the figure resizing in my branch above would be a good start.

Yes...of course, what we *really* want in resize-able circumstances is to change
the tick marks, axis/label fonts, etc to maintain a reasonable figure.  This is
really beyond the scope of what we can do with matplotlib.  As far as I can see,
matplotlib is really oriented to producing printable output.

I don't know where you want to go with ipython's graphics, but I think adding
axis labels, legends, modifying scaling and tick marks (etc) by typing a
sequence of plt.*() calls is a horrible thing to do to a person.  What I would
love to see is:
1. A new matplotlib backend that generates a blob of data wrapped in svg and
2. Interactive ability to scale/rotate/label that data in the browser.
3. A reverse tie-in so that interactive modifications to the figure become
    python commands in the corresponding code block.

However, that's a much longer-term project if someone wants to take it on...
There are a lot of javascript plotting libraries out there these days that one
might look to for inspiration...

Cheers, Bob McElrath

"The individual has always had to struggle to keep from being overwhelmed by
the tribe.  If you try it, you will be lonely often, and sometimes frightened.
But no price is too high to pay for the privilege of owning yourself." 
    -- Friedrich Nietzsche

More information about the IPython-dev mailing list