Protovis + SVGWeb does work

[Jamie Love]

Hiya,

I've implemented a proof-of-concept integration of SVGWeb and protovis. It draws everything I tried fine, renders in all the relevant browsers (including IE8) and requires (almost) no changes to how you use protovis.

Attached is the replacement protovis debug v3.1 code.

There are currently three bugs:

1/ titles added via the title() method show up only in FireFox. This appears to be some problem with how browsers+SVGWeb deal with namespaces.
2/ events, while propogated from the SVG do not trigger as the event we're given doesn't have the expected 'target' object (it's missing $scene).
3/ Rerendering (i.e. calling vis.root.render() a second time) currently does not re-update the SVG rendered by the browsers.

#3 is a known SVGWeb bug, while #1 and #2 I've asked about on the SVGWeb site. Neither of these appear insurmountable.

A fourth limitation exists - code within <script type='text/javascript-protovis'> will not work correct in IE (it'll crash the IE tab) due to some infinite looping or other weirdness. Instead, you should definitely wrap your rendering up in a window.onload callback.

I've included an example html script for your edification. Download the latest SVGWeb from http://code.google.com/p/svgweb/ drop the svg.js, svg.swf and svg.htc in the same directly as the attached two files, and load it up in your browser.

The diffs to the standard v3.1 debug file are as follows:

3507d3506
<
3565,3567c3564
<     // Set the title. Using xlink:title ensures the call works in IE
<     // but only FireFox seems to show the title.
<     // without xlink: in there, it breaks IE.
<     a.setAttributeNS(pv.ns.xlink, "xlink:title", t);
---
>     a.setAttributeNS(pv.ns.xlink, "title", t);
3856c3853
<     else e.appendChild(document.createTextNode(s.text, true)); // Needed for SVGWeb to create the right type of text node.
---
>     else e.appendChild(document.createTextNode(s.text));
3998,4015c3995,4002
<         //g = s.canvas.appendChild(this.create("svg"));
<
<         var me = this;
<         g = document.createElementNS(svgns, 'svg');
<
<         g.addEventListener('SVGLoad', function() {
<             // TODO events don't propogate completely
<             this.addEventListener ('click', pv.SvgScene.dispatch, true);
<             this.addEventListener ('mousedown', pv.SvgScene.dispatch, true);
<             this.addEventListener ('mouseup', pv.SvgScene.dispatch, true);
<             this.addEventListener ('mouseout', pv.SvgScene.dispatch, true);
<             this.addEventListener ('mouseover', pv.SvgScene.dispatch, true);
<         }, false);
<         pv.mustAppend = pv.mustAppend || []; // stupid name. Was just playing around when it fixed it.
<         pv.mustAppend.push ({svg:g, canvas: s.canvas});
<
<         scenes.parent = g;
<
---
>         g = s.canvas.appendChild(this.create("svg"));
>         g.onclick
>             = g.onmousedown
>             = g.onmouseup
>             = g.onmousemove
>             = g.onmouseout
>             = g.onmouseover
>             = pv.SvgScene.dispatch;
4017d4003
<
4749,4756d4734
<   if (pv.mustAppend) {
<     for (var i = 0; i < pv.mustAppend.length; ++i) {
<         if (!pv.mustAppend[i].appended) {
<             svgweb.appendChild (pv.mustAppend[i].svg, pv.mustAppend[i].canvas);
<             pv.mustAppend[i].appended = true;
<         }
<     }
<   }
6492d6469
<
6539c6516
<       c = s.$canvas = document.createElement("div"); // Can't use a span, must use a div.
---
>       c = s.$canvas = document.createElement("span");

[Pedro Alves]

Jamie, congrats this are superb news. We'll look into this today!

Just a few comments/ questions

> I've implemented a proof-of-concept integration of SVGWeb and protovis.
> It draws everything I tried fine, renders in all the relevant browsers
> (including IE8) and requires (almost) no changes to how you use protovis.

Correct me if I'm wrong, but I assume we'll want to keep using the
standard protovis for all browsers and svgweb to IE only? Is the code
*that* compatible?

> 2/ events, while propogated from the SVG do not trigger ...

What's the real implication here? I'm not too familiar with events yet
so I'm not sure if there are workarounds

> 3/ Rerendering ...

I assume this means that we don't have animations / data changing
capabilities? What if we remove the entire element and render it again?

> A fourth limitation exists - code within <script
> type='text/javascript-protovis'> will not work correct in IE

Just to be sure, we can still use the satandard text/javascript 1.6 then?

-pedro

> --
> You received this message because you are subscribed to the Google
> Groups "protovis" group.
> To post to this group, send email to prot...@googlegroups.com.
> To unsubscribe from this group, send email to
> protovis+u...@googlegroups.com.
> For more options, visit this group at
> http://groups.google.com/group/protovis?hl=en.

[Kirby Files]

Jamie, thanks a million. I was just looking at starting this work
today, and wake up to find you're already done.

I've applied your code, and it's working great for me, though as you
say, without mouseover events.

@Pedro:

> Correct me if I'm wrong, but I assume we'll want to keep using the
> standard protovis for all browsers and svgweb to IE only? Is the code
> *that* compatible?

Not necessarily. SvgWeb passes has very little overhead for browsers
with native SVG support -- it just passes the calls through. This
assumes we can get a fix to the event listeners and render() issues,
as we wouldn't want to degrade interaction.

>  > 3/ Rerendering ...
>
> I assume this means that we don't have animations / data changing
> capabilities? What if we remove the entire element and render it again?

That's right. I'll be trying removing the svgRoot and re-appendChild()
it, and will report back on my results.

>  > A fourth limitation exists - code within <script
>  > type='text/javascript-protovis'> will not work correct in IE
>
> Just to be sure, we can still use the satandard text/javascript 1.6 then?

Yup, that's working fine for me.

--kirby

[jose.coelho]

Hello,
i was trying to get the helloworld.html example to work, so i
basically:

- Created a folder with the following files:
- helloworld.html
- protovis-svgweb-d3.1.js
from this page
- svg.js
- svg.htc
- svg.swf

when i open the .html on firefox or chrome i get a square with a red
border with a function drawn inside, but when i try to open it on IE8
(the whole purpose of this), it only shows the red outline without
anything inside, maybe i'm missing something.

[jose.coelho]

Hello,

I was trying to run the helloworld.html example and had some problems
with it. It works fine in firefox and chrome but it doesn't in IE (the
whole purpose of integrating protovis with svgweb). Although in
firefox/chrome i got a red square with a chart function inside, on IE8
it only displays the red square outline.

This is what i did:
- created a test folder
- moved helloworld.html, svg.js, svg.swf, svg.htc and protovis-svgweb-
d3.1.js to the test folder
- changed the window.onload function to a var i called on the end of
the file because of some random error
- opened helloworld.html in firefox SUCESS
- opened helloworld.html in chrome SUCESS
- opened helloworld.html in IE8 FAIL

not sure what i did wrong or what i didn't do, thanks for any
assistance in advance

-- José

[Jamie Love]

On Thu, Feb 11, 2010 at 10:59 PM, Pedro Alves <pmga...@gmail.com> wrote:

Jamie, congrats this are superb news. We'll look into this today!


Just a few comments/ questions

> I've implemented a proof-of-concept integration of SVGWeb and protovis.
> It draws everything I tried fine, renders in all the relevant browsers
> (including IE8) and requires (almost) no changes to how you use protovis.

Correct me if I'm wrong, but I assume we'll want to keep using the standard protovis for all browsers and svgweb to IE only? Is the code *that* compatible?

I was a bit lazy in my implementation, and it uses SVGWeb in all cases (with the file I attached).

It is definitely easy to do an if/else implementation. In the protovis-svgweb-d3.1.js file the code would have to do an if (IE) ... check around my changes, (the checking code could be appropriated from JQuery or similar).
Another approach would be to use the IE if type commands in the HTML file:

 <!--[if IE]>
<script src="svg.js"></script>
<script src="protovis-svgweb-d3.1.js"></script>

<![endif]-->
 <!--[if !IE]>
<script src="protovis-d3.1.js"></script>
<![endif]-->

> 2/ events, while propogated from the SVG do not trigger ...

What's the real implication here? I'm not too familiar with events yet so I'm not sure if there are workarounds

Well, no interaction works... but that's it. So if you have static graphs you won't be impacted.

I did some further testing yesterday, The events actually trigger, but for some reason we don't get a variable (the $scene variable) on the event target (which is the DOM SVG node created by protovis earlier). It seems that something in SVGWeb or my changes hides/looses that variable so events don't trigger through to the right handler in the end.

I've asked about this on the svgweb list.
 

> 3/ Rerendering ...

I assume this means that we don't have animations / data changing capabilities? What if we remove the entire element and render it again?

After sending my original email, I figured out how to make this work. Attached is an updated svgweb file that allows animation (I needed to add two extra lines:


999,4018c3995,4002

<         //g = s.canvas.appendChild(this.create("svg"));
<
<         var me = this;
<         g = document.createElementNS(svgns, 'svg');
<
<         g.addEventListener('SVGLoad', function() {

<             scenes.parent = this;                   <------------- here
<             scenes.$g = this;                         <------------ and here
<             // TODO events don't work

You can see a demo here:

http://www.nsquaredsoftware.com/svgwebdemo/

Sadly, while drawing completely new graphs in my ExtJS based applications seems to work perfectly, the above demo fails in IE to change the graph type (but works in other browsers). SVGWeb does some real hacking around that area, but there is probably something that can be done in how the graph is completely recreated as well (I haven't figured it out yet).

> A fourth limitation exists - code within <script
> type='text/javascript-protovis'> will not work correct in IE

Just to be sure, we can still use the satandard text/javascript 1.6 then?

absolutely. 

[Jamie Love]

Can you tell me if:

http://www.nsquaredsoftware.com/svgwebdemo/

works for you under IE8.

IE8 comes with developer tools (see the tools menu, or press F12). Can you load that up select the 'script' button in the button bar at the top, reload your page, and see if any errors occur in the console.

Also, usually in the bottom left of the browser window is a little yellow warning sign if something breaks. Clicking on it gives more information on the error. Does that appear for you, and what's the error?

Ta

2010/2/12 jose.coelho <jose.alva...@gmail.com>

[Jamie Love]

2010/2/12 jose.coelho <jose.alva...@gmail.com>

Hello,

I was trying to run the helloworld.html example and had some problems
with it. It works fine in firefox and chrome but it doesn't in IE (the
whole purpose of integrating protovis with svgweb). Although in
firefox/chrome i got a red square with a chart function inside, on IE8
it only displays the red square outline.

This is what i did:
- created a test folder
- moved helloworld.html, svg.js, svg.swf, svg.htc and protovis-svgweb-
d3.1.js to the test folder
- changed the window.onload function to a var i called on the end of
the file because of some random error

This isn't good. The onload function needs to be onload because otherwise svgweb hasn't had a chance to initialise. You'll need to change it back and figure out what the original error was and fix that.

[jose.coelho]

Hello,

so I tryed the link:
http://www.nsquaredsoftware.com/svgwebdemo/

and it works great on firefox (as usual) but when i run it in IE8, it
only works the dot example (maybe because its the default/first one to
show), when i try the dropdown menu and click on any other example, it
returns the following errors on the developer tools console:

Invalid argument. svg-uncompressed.js, line951 character 15

also in the previous helloworld.html example, i re-did again all the
steps with a fresh downloaded file and this time it didn't return any
error(i probably did something wrong the first time), although it
still doesn't show the function on IE and only the red square outline.

Thanks
-José

[Jamie Love]

Well, I can't say why the helloworld.html example doesn't work for you as I have no information and it works on all my tests,

but in regards to the svgwebdemo, yes, it fails to swap between the graphs under IE. SVGWeb tries to unload the flash movie and breaks, and I'm not sure why (I haven't investigated much). I think it's something that can be worked around because in my internal applications it swaps graphs fine.

Jamie

2010/2/13 jose.coelho <jose.alva...@gmail.com>

[Kirby Files]

Jamie,
I've done a fairly crude job of introducing conditional support for
SvgWeb in your branch of protovis. I have contextualized any
svgweb-specific calls, so that it can be run without SvgWeb (for
browsers with native support), or with SvgWeb for IE.
This gets rid of the performance impact of loading svg.js, and gets
rid of the limitations you've discovered. For my graphs, it gives a
top-quality experience for native SVG browsers, and at least a
view-only fallback for IE.

I add svg.js with:

<!--[if IE]><script type="text/javascript" src="./js/svg.js"
data-path="./js">
</script><![endif]-->

--kirby

[Jamie Love]

Hi All,

I've made SVGWeb + protovis handle events, but using the flash renderer means it's to slow to re-render graphs on on mouseover/mousemove. It'd work fine if you're not re-rendering the graph though.

If anyone wants to know how, let me know and I'll tidy up the code.

Jamie

[Aureliano Calvo]

I would live to know how does it work.Lack of IE support did stop me of presenting protovis as The Tool to make visualizations.

[jose.coelho]

I'm very interested in it too, same reasons as Aureliano.

On 24 Fev, 10:41, Aureliano Calvo <aurelianoca...@gmail.com> wrote:
> I would live to know how does it work.Lack of IE support did stop me of
> presenting protovis as The Tool to make visualizations.
>

> On Wed, Feb 24, 2010 at 5:38 AM, Jamie Love <drjl...@gmail.com> wrote:
>
> > Hi All,
>
> > I've made SVGWeb + protovis handle events, but using the flash renderer
> > means it's to slow to re-render graphs on on mouseover/mousemove. It'd work
> > fine if you're not re-rendering the graph though.
>
> > If anyone wants to know how, let me know and I'll tidy up the code.
>
> > Jamie
>
> >  --
> > You received this message because you are subscribed to the Google Groups
> > "protovis" group.
> > To post to this group, send email to prot...@googlegroups.com.
> > To unsubscribe from this group, send email to

> > protovis+u...@googlegroups.com<protovis%2Bunsu...@googlegroups.com>

[dscottsf]

On Feb 11, 11:23 am, Jamie Love <drjl...@gmail.com> wrote:
> Can you tell me if:
>
> http://www.nsquaredsoftware.com/svgwebdemo/
>
> works for you under IE8.

Unfortunately it doesn't. What's weird is it seems to crash on
document.getElementsByTagNameNS() in:

if (protovisTest != null) {
var svg = document.getElementsByTagNameNS(svgns, 'svg')[0];
svgweb.removeChild(svg, svg.parentNode);
}

with 'doesn't support this property or method'.

I thought that was standard equipment on IE8. I'm probably missing
something really obvious here...

d

[Aureliano Calvo]

Weird it seems to work in my IE 8 when it's loaded the first time but doesn't work when I press F5 to reload. When I switch to IE 7 mode (using the developer tools), the graph width goes to the entire page width (which I assume it shouldn't because it doesn't do that neither in Chrome nor IE 8 mode) and it doesn't work in quirks mode.

This is really weird behaviour.

[Jamie Love]

Hi All,

I've reworked my SVGWeb+protovis so it's much more gentle - You can see the results here:

http://www.nsquaredsoftware.com/svgwebdemo/protovis/tests/

SVGWeb is now integrated into a clone of what will become protovis v3.2. The code is at:

http://gitorious.org/~jlove/protovis/jloves-protovis

(all the code running at the above test link is in the repository).

The test link above includes three demos (I can easily do any other protovis examples you'd like to see from on the web). You can see from these demos that relatively complex graphs (Playfair's wheat graph) and interaction (simple bar chart example from protovis site) both work.

These tests all work in IE for me, so please let me know if something doesn't work for you.

Be aware (I write on the test page listed above) there are some important things to know about using SVGWeb - nothing really bad - just slightly different ways that code needs to be structured for IE's benefit.

I'm working on the outstanding issues - 

Cheers

Jamie

--

[Jamie Love]

Oh, in case it wasn't clear, interaction (mouse movement) works :-)

[Aureliano Calvo]

The graphics do show quite nicely when I load the graphics the first time but I only see a blank page after reloading them pressing F5. Is this a known bug? I'm testing it with IE8 under Windows 7.

[Jamie Love]

It happens to me at the moment as well. It appears that the onload event handling doesn't always work. This is not a protovis thing as far as I can tell - it's just IE being weird. 

Probably easily fixed by including jquery and letting it deal with the problem ;-)

[Jamie Love]

I looked a bit further at this.

It appears to be a time-sensitive issue, triggered due to the graph being drawn on load. 

If I delay the rendering of the graph by 1 second, the problem goes away.

I've been unable to figure out a better solution yet!

[Pedro Alves]

Does this mean it doesn't have to be on the onload at all?

> <aurelia...@gmail.com <mailto:aurelia...@gmail.com>>

> wrote:
>
>
>
> On Wed, Feb 24, 2010 at 5:32 PM, dscottsf
> <d.sco...@gmail.com <mailto:d.sco...@gmail.com>> wrote:
>
> On Feb 11, 11:23 am, Jamie Love <drjl...@gmail.com

> <mailto:prot...@googlegroups.com>.

> To unsubscribe from this group, send email to
> protovis+u...@googlegroups.com

> <mailto:protovis%2Bunsu...@googlegroups.com>.

> For more options, visit this group at
> http://groups.google.com/group/protovis?hl=en.
>
>
> --
> You received this message because you are subscribed to the
> Google Groups "protovis" group.
> To post to this group, send email to

> prot...@googlegroups.com <mailto:prot...@googlegroups.com>.

> To unsubscribe from this group, send email to
> protovis+u...@googlegroups.com

> <mailto:protovis%2Bunsu...@googlegroups.com>.

> For more options, visit this group at
> http://groups.google.com/group/protovis?hl=en.
>
>
> --
> You received this message because you are subscribed to the
> Google Groups "protovis" group.
> To post to this group, send email to prot...@googlegroups.com

> <mailto:prot...@googlegroups.com>.

> To unsubscribe from this group, send email to
> protovis+u...@googlegroups.com

> <mailto:protovis%2Bunsu...@googlegroups.com>.

[Aureliano Calvo]

I've been looking at the source code of the svgweb tetris example (http://codinginparadise.org/projects/svgweb/samples/javascript-samples/blocks_game.html) and it came to my attention that it uses svgweb.addOnLoad instead of window.onload it is not used in the examples Jamie showed us. 

My 2 cents,

Aureliano.

[David.Scott]

It wasn't obvious - but my VMware image was hosed so I couldn't
install Flash. I fixed it and am seeing most of the examples now.

It might be wise to kick up a fuss if the user is trying to use SVGWeb
and doesn't have Flash installed.

d