That is interesting!

I was playing around with your demo and ran a little bookmarklet that would
refresh the stepped version automatically.

I first included jquery through a bookmarklet. Then, I pasted this into my
javascript console window:

var refresh = function(location) {
    $.get(location, function(x) {
        var $html = $(x);
        var url = $html.find('a:contains(step)').attr("href");
        var svg = $html.find('svg');
        setTimeout(function() { refresh(url) }, 500)

I think this appears more seamless (like the iframe approach) instead of
doing a full page refresh.

It looks like Alex's approach is about 15x lighter on the wire. I ran
fiddler and it looks like it transmits upwards of 639 bytes for a full
chart whereas the svg is around 9500 bytes. Still, it's an neat

On Sun, Sep 15, 2013 at 12:51 PM, Tomas Hlavaty <> wrote:

> Hi Alex,
> as a proof of concept, I have implemented your zapper demo using svg and
> without any javascript, see
> Tomas Hlavaty <> writes:
> > Another way of achieving the same result without any need for
> > javascript would be using SVG.  It works very well across browsers
> > nowadays.  Canvas could be an iframe with a refresh rate if required
> > and SVG could be inlined in the HTML, generated in a similar way as
> > the usual PicoLisp generated HTML.  As an added bonus, SVG could
> > contain links which could trigger picolisp actions without the need
> > for calculating positions on server side (because the browser would do
> > this work for us), should the users wish to inspect a point in the
> > demo graph.
> 1) It uses svg instead of canvas, meaning that:
>   - There is no javascript required for drawing stuff.  The same
>     approach to generating html can be used to generate svg.
>   - It's easy to define parts of the picture to be clickable, so if you
>     click on a point in the graph, the text clicked will be updated with
>     the y axis value, as an example.  Also it displays a buuble if you
>     leave cursor above a point.
>   - svg used to be slow, broken and non-portable across browsers a few
>     years ago but these days, it's rather good for many use-cases.
>     There are still some things broken on some browsers, but it's
>     getting steadily better.
>   - Graphics transformation can be easily specified in svg, so there is
>     no need to do "complicated" coordinate calculations. e.g.
>     <g transform="translate(0 300) scale(1 -1) translate(0.5 150.5)">
>     changes the orientation and origin of the coordinate system, and
>     also moves the centres of lines a bit so that 1px lines are sharp
>     (which is what you discussed with Jon I guess, and which your
>     example doesn't do for the horizontal axis I think).
> 2) The example doesn't use any javascript meaning that the maximum
>    refresh speed is 1s.  This is good enough for many use-cases.  If
>    not, a bit of javascript can be added in a similar way like the
>    current picolisp refresh is implemented.  As you mentioned, something
>    like the +Auto class.
>    If the automatic refresh is not desirable for the whole page, the
>    whole svg graph could be put into an iframe which would refresh, but
>    the surounding html would stay.  But it's not critical for this demo.
> 3) Bug: If you click too fast or at the same time as refresh happens,
>    the browser and session can get out of sync and it will stop reacting
>    to click, unfortunately.  I have to figure out why.  If that happens,
>    simply open the link again, or just discard the "s" query parameter.
> Generally I find svg much better than using canvas, which is too low
> level.  In picolisp, one could write similar functions like for html, or
> use the '<xml>' function to generate arbitrary svg.
> Enjoy:-)
> Tomas
> --

Reply via email to