Bokeh & HTML 5 Canvas: Raster or Vector graphics?

Hi there,

Prompted by the new release of Bokeh 0.7 I am giving a talk at my company on Bokeh. I read on the main website that most of the magic is done by BokehJS, which exposes the control of the HTML5 Canvas. When I go to Wikipedia, I read that “unlike canvas, which is raster-based, SVG is vector-based, i.e., each drawn shape is remembered as an object in a scene graph or Document Object Model, which is subsequently rendered to a bitmap.”

This is news to me, since I thought that like Bokeh used vector graphics under the hood (IIRC D3.js uses SVG). Moreover, Bokeh allows you to easily do infinitely resize and I never see the bitmap artifacts when doing so.

I know that Bokeh may end up using SVG at some point, but for now, is it correct to say that Bokeh uses raster-based graphics? Vector-based? Or a combination of both?

Josh

Hi Josh,

Bokeh is definitely based on the HTML5 canvas, which as you note, generates a rasterized bitmap image. The reason you don't see artifacts when resizing the plot is because the resize is not simply acting on the bitmapped image. Rather, BokehJS has knowledge of data space bounds and screen space bounds and uses this information to compute screen coordinates for all actors in the scene. Whenever either of the bounds change, the coordinates are all re-computed, and the scene is completely redrawn (i.e., re-rasterized by the canvas raster engine). The resize tool is actually very simple, it just changes the canvas size, which triggers all of the above to happen.

An interesting thing to note, however, is that the canvas API is basically a vector API. That is, you define paths, apply affine transformations, and then stroke/fill them. The rasterization is largely hidden from canvas users.

Regarding the future:

* we are looking at node-canvas to provide static SVG output. This is an often requested feature, and the only reason it would be remotely possible without creating an entirely new backend from scratch is because, as mentioned above, the canvas API is a vector API. The standard canvas output is a bitmap, but node-canvas can redirect and render to SVG instead (apparently, and hopefully).

* we are also looking at webgl-canvas for the future as well. Better performance in the "hundreds of thousands" of points range is also desired, and perhaps some measure of 3D plots as well. Please note this is *extremely* preliminary and tentative, no work or even real planning has started in this direction.

Thanks,

Bryan

···

On Dec 15, 2014, at 11:40 PM, Josh Wasserstein <[email protected]> wrote:

Hi there,

Prompted by the new release of Bokeh 0.7 I am giving a talk at my company on Bokeh. I read on the main website that most of the magic is done by BokehJS, which exposes the control of the HTML5 Canvas. When I go to Wikipedia, I read that "unlike canvas, which is raster-based, SVG is vector-based, i.e., each drawn shape is remembered as an object in a scene graph or Document Object Model, which is subsequently rendered to a bitmap."

This is news to me, since I thought that like Bokeh used vector graphics under the hood (IIRC D3.js uses SVG). Moreover, Bokeh allows you to easily do infinitely resize and I never see the bitmap artifacts when doing so.

I know that Bokeh may end up using SVG at some point, but for now, is it correct to say that Bokeh uses raster-based graphics? Vector-based? Or a combination of both?

Josh

--
You received this message because you are subscribed to the Google Groups "Bokeh Discussion - Public" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].
To post to this group, send email to [email protected].
To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/CAD4ivxWy7deiOkwNQ1u_aN6MkoknHhS3VMTFTDoX-b7upGjz1w%40mail.gmail.com.
For more options, visit https://groups.google.com/a/continuum.io/d/optout.

Thank you Bryan. That was very helpful.

Josh

···

On Mon, Dec 15, 2014 at 7:12 PM, Bryan Van de Ven [email protected] wrote:

Hi Josh,

Bokeh is definitely based on the HTML5 canvas, which as you note, generates a rasterized bitmap image. The reason you don’t see artifacts when resizing the plot is because the resize is not simply acting on the bitmapped image. Rather, BokehJS has knowledge of data space bounds and screen space bounds and uses this information to compute screen coordinates for all actors in the scene. Whenever either of the bounds change, the coordinates are all re-computed, and the scene is completely redrawn (i.e., re-rasterized by the canvas raster engine). The resize tool is actually very simple, it just changes the canvas size, which triggers all of the above to happen.

An interesting thing to note, however, is that the canvas API is basically a vector API. That is, you define paths, apply affine transformations, and then stroke/fill them. The rasterization is largely hidden from canvas users.

Regarding the future:

  • we are looking at node-canvas to provide static SVG output. This is an often requested feature, and the only reason it would be remotely possible without creating an entirely new backend from scratch is because, as mentioned above, the canvas API is a vector API. The standard canvas output is a bitmap, but node-canvas can redirect and render to SVG instead (apparently, and hopefully).

  • we are also looking at webgl-canvas for the future as well. Better performance in the “hundreds of thousands” of points range is also desired, and perhaps some measure of 3D plots as well. Please note this is extremely preliminary and tentative, no work or even real planning has started in this direction.

Thanks,

Bryan

On Dec 15, 2014, at 11:40 PM, Josh Wasserstein [email protected] wrote:

Hi there,

Prompted by the new release of Bokeh 0.7 I am giving a talk at my company on Bokeh. I read on the main website that most of the magic is done by BokehJS, which exposes the control of the HTML5 Canvas. When I go to Wikipedia, I read that “unlike canvas, which is raster-based, SVG is vector-based, i.e., each drawn shape is remembered as an object in a scene graph or Document Object Model, which is subsequently rendered to a bitmap.”

This is news to me, since I thought that like Bokeh used vector graphics under the hood (IIRC D3.js uses SVG). Moreover, Bokeh allows you to easily do infinitely resize and I never see the bitmap artifacts when doing so.

I know that Bokeh may end up using SVG at some point, but for now, is it correct to say that Bokeh uses raster-based graphics? Vector-based? Or a combination of both?

Josh

You received this message because you are subscribed to the Google Groups “Bokeh Discussion - Public” group.

To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].

To post to this group, send email to [email protected].

To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/CAD4ivxWy7deiOkwNQ1u_aN6MkoknHhS3VMTFTDoX-b7upGjz1w%40mail.gmail.com.

For more options, visit https://groups.google.com/a/continuum.io/d/optout.

You received this message because you are subscribed to the Google Groups “Bokeh Discussion - Public” group.

To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].

To post to this group, send email to [email protected].

To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/14F92EA5-CE2A-45BF-A9B8-DE3B834C177A%40continuum.io.

For more options, visit https://groups.google.com/a/continuum.io/d/optout.

btw, the very initial implementation used d3 (many years ago) but we
replaced it with canvas because canvas can render larger number of
points faster than SVG. (though this 32k point limitation is odd -
we can work around that though). For simple transforms, SVG is
fine, but for more complex interactions (like if the user selects
points) if you have to re-draw anyways, then the SVG lag becomes
noticeable.

···

On 12/15/2014 08:04 PM, Josh
Wasserstein wrote:

Thank you Bryan. That was very helpful.

Josh

      On Mon, Dec 15, 2014 at 7:12 PM, Bryan

Van de Ven [email protected]
wrote:

Hi Josh,

        Bokeh is definitely based on the HTML5 canvas, which as you

note, generates a rasterized bitmap image. The reason you
don’t see artifacts when resizing the plot is because the
resize is not simply acting on the bitmapped image. Rather,
BokehJS has knowledge of data space bounds and screen space
bounds and uses this information to compute screen
coordinates for all actors in the scene. Whenever either of
the bounds change, the coordinates are all re-computed, and
the scene is completely redrawn (i.e., re-rasterized by the
canvas raster engine). The resize tool is actually very
simple, it just changes the canvas size, which triggers all
of the above to happen.

        An interesting thing to note, however, is that the canvas

API is basically a vector API. That is, you define paths,
apply affine transformations, and then stroke/fill them. The
rasterization is largely hidden from canvas users.

        Regarding the future:



        * we are looking at node-canvas to provide static SVG

output. This is an often requested feature, and the only
reason it would be remotely possible without creating an
entirely new backend from scratch is because, as mentioned
above, the canvas API is a vector API. The standard canvas
output is a bitmap, but node-canvas can redirect and render
to SVG instead (apparently, and hopefully).

        * we are also looking at webgl-canvas for the future as

well. Better performance in the “hundreds of thousands” of
points range is also desired, and perhaps some measure of 3D
plots as well. Please note this is extremely preliminary
and tentative, no work or even real planning has started in
this direction.

        Thanks,



        Bryan




            > On Dec 15, 2014, at 11:40 PM, Josh Wasserstein <[email protected]                >

wrote:

            >

            > Hi there,

            >

            > Prompted by the new release of Bokeh 0.7 I am

giving a talk at my company on Bokeh. I read on the main
website that most of the magic is done by BokehJS, which
exposes the control of the HTML5 Canvas. When I go to
Wikipedia, I read that “unlike canvas, which is
raster-based, SVG is vector-based, i.e., each drawn
shape is remembered as an object in a scene graph or
Document Object Model, which is subsequently rendered to
a bitmap.”

            >

            > This is news to me, since I thought that like Bokeh

used vector graphics under the hood (IIRC D3.js uses
SVG). Moreover, Bokeh allows you to easily do infinitely
resize and I never see the bitmap artifacts when doing
so.

            >

            > I know that Bokeh may end up using SVG at some

point, but for now, is it correct to say that Bokeh uses
raster-based graphics? Vector-based? Or a combination of
both?

            >

            > Josh

            >

            > You received this message because you are

subscribed to the Google Groups “Bokeh Discussion -
Public” group.

            > To unsubscribe from this group and stop receiving

emails from it, send an email to [email protected].

            > To post to this group, send email to [email protected]

            > To view this discussion on the web visit [https://groups.google.com/a/continuum.io/d/msgid/bokeh/CAD4ivxWy7deiOkwNQ1u_aN6MkoknHhS3VMTFTDoX-b7upGjz1w%40mail.gmail.com](https://groups.google.com/a/continuum.io/d/msgid/bokeh/CAD4ivxWy7deiOkwNQ1u_aN6MkoknHhS3VMTFTDoX-b7upGjz1w%40mail.gmail.com).

            > For more options, visit [https://groups.google.com/a/continuum.io/d/optout](https://groups.google.com/a/continuum.io/d/optout).



            --

            You received this message because you are subscribed to

the Google Groups “Bokeh Discussion - Public” group.

            To unsubscribe from this group and stop receiving emails

from it, send an email to [email protected].

            To post to this group, send email to [email protected]

            To view this discussion on the web visit [https://groups.google.com/a/continuum.io/d/msgid/bokeh/14F92EA5-CE2A-45BF-A9B8-DE3B834C177A%40continuum.io](https://groups.google.com/a/continuum.io/d/msgid/bokeh/14F92EA5-CE2A-45BF-A9B8-DE3B834C177A%40continuum.io).

            For more options, visit [https://groups.google.com/a/continuum.io/d/optout](https://groups.google.com/a/continuum.io/d/optout).

  You received this message because you are subscribed to the Google

Groups “Bokeh Discussion - Public” group.

  To unsubscribe from this group and stop receiving emails from it,

send an email to [email protected]uum.io.

  To post to this group, send email to [email protected]

  To view this discussion on the web visit [https://groups.google.com/a/continuum.io/d/msgid/bokeh/CAD4ivxV_V8gvHrHXz%3DrSYXKhUueycYRUncXvZPiHLY46rWrdJA%40mail.gmail.com](https://groups.google.com/a/continuum.io/d/msgid/bokeh/CAD4ivxV_V8gvHrHXz%3DrSYXKhUueycYRUncXvZPiHLY46rWrdJA%40mail.gmail.com?utm_medium=email&utm_source=footer).

  For more options, visit [https://groups.google.com/a/continuum.io/d/optout](https://groups.google.com/a/continuum.io/d/optout).