D3 and Protovis

[neotrex]

Hello!

Is there any official position regarding what happened to Protovis?
Do we need to switch to D3 or there will be a new Protovis version?

In case of worst case scenario (meaning - we do need to switch), can
you post links to some tutorials like:
http://multimedia.journalism.berkeley.edu/tutorials/protovis-javascript-charts-part-1/
or
http://eagereyes.org/tutorials/protovis-primer-part-1
or
http://www.jeromecukier.net/?p=426

Best regards,
neotrex

[Mike Bostock]

> Is there any official position regarding what happened to Protovis?

D3 is, roughly speaking, the next generation of Protovis. They share
many of the same ideas, such as using functions of data to specify
visual encodings, and scales & layouts. The main difference is that D3
works directly with the browser's native representation—typically SVG
or HTML—and supports powerful animated transitions. There's more
comparison here:

http://mbostock.github.com/d3/tutorial/protovis.html

In an ideal world, I could have just made a few incremental feature
enhancements to Protovis. But D3 addresses fundmental limitations of
the Protovis language, including efficient updates to the scene,
debugging of code and working with intermediate scenegraphs. These are
inherent limitations, so it was necessary to restart and rethink the
language.

We're still in the process of porting chunks of Protovis functionality
over to D3. In many cases D3 looks very similar to Protovis, e.g.,

http://mbostock.github.com/d3/ex/tree.html

In addition to features such as scales and layouts, you'll have access
to all of SVG, CSS3 and HTML5. Not to mention animation!

> Do we need to switch to D3 or there will be a new Protovis version?

I would recommend switching to D3. I have no current plans to release
a new Protovis version. My focus now is documenting D3, and porting
functionality from Protovis to D3. So, if you have feature or
documentation requests, please let me know!

There are a few D3 tutorials already available:

http://mbostock.github.com/d3/api/
http://www.janwillemtulp.com/category/d3/
http://nelsonslog.wordpress.com/?s=D3

The next tutorial I'm writing is on selections & data binding.

Mike

[neotrex]

Hello Mike!

Thanks for your quick answer.
Yes I already noticed those tutorials. They do not provide as much
info as the links I pointed to in my first post,
but they are ok for anyone who wants to start developing something.

However, since D3 is in many aspects similar to Protovis, I am curious
about where we can find the documentation for the D3 API.
I can't really guess all the methods. Did you also planned support for
autocompletion
(on your advertisements it says something about better support for
developer tools)?
Also a tutorial on interaction would be nice to have (for example
click on nodes to display advanced tooltips, or stuff like this).
Do you think this will be available in the next weeks (let's say in 3
weeks or a month)?

That's all for the moment. We only need to take a decision in several
weeks but until now just 3 frameworks look promising
(Protovis - which we can already mark as discontinued as you just
stated, D3 and Processing).

D3 does look nice. I will build several animations/interactions
examples anyway before taking a final decision.

Best regards,
neotrex

[Mike Bostock]

> about where we can find the documentation for the D3 API.

Most of the documentation at the moment is in tutorial & example form.
However, we do have some skeleton reference documentation here:

http://mbostock.github.com/d3/api/#reference

I'm working on more comprehensive documentation, which should be
coming over the next couple of weeks. In the meantime, you can also
browse the source code to see what's supported, and make heavy use of
this group. ;)

> Did you also planned support for autocompletion

This is a function of your IDE, rather than the library, assuming I
understand your question.

> (on your advertisements it says something about better support for
> developer tools)?

This is in reference to Chrome or Safari's built-in developer tools,
Firefox's Firebug, etc.:

http://developer.apple.com/technologies/safari/developer-tools.html

D3 operates on the native representation, so it's easy to inspect
elements in the page, manipulate them with D3, then inspect the
result. With Protovis, there's an intermediate scenegraph that makes
it harder to debug. Processing has no scenegraph. (It uses
immediate-mode rendering.) Also, D3 operators are evaluated
immediately, unlike in Protovis where there is a deferred rendering
phase. This makes it much easier to debug code because there's no
hidden control flow.

> Also a tutorial on interaction would be nice to have (for example
> click on nodes to display advanced tooltips, or stuff like this).
> Do you think this will be available in the next weeks (let's say in 3
> weeks or a month)?

Sure, yep, that's the plan!

> D3 does look nice. I will build several animations/interactions
> examples anyway before taking a final decision.

Please do. And let me know if I can answer any more questions.

Cheers,
Mike

[Damien]

I rather like the way protovis allows you to create a scene and define
how it gets updated/redrawn -- all in the same statements. This is
mostly thanks to the def() method. You don't need to select all the
various elements to change when you want to change them -- you just
call render(). In D3 it seems that you need to first create
something with data().enter().append(), and then later you use a
different process to update. In other words, it separates creating
from updating. Better for performance, but my code ends up messier
than usual for the type of projects I'm working on.

FYI if you want to see the type of viz application that I'm talking
about:
http://www.mappinghealth.com/kids-ca
http://www.mappinghealth.com/maternitycare#states
http://www.mappinghealth.com/sanwater

Maybe it's just a matter of my learning D3 better, though.

Best,
Damien

[Nelson Minar]

On Fri, Apr 15, 2011 at 11:26 AM, Damien <damie...@gmail.com> wrote:

In D3 it seems that you need to first create something with data().enter().append(), and then later you use a different process to update. In other words, it separates creating from updating. Better for performance, but my code ends up messier than usual for the type of projects I'm working on.

I've been struggling with that in D3 a little myself. It feels like when I change my visualization I have to update the code in two places: the initial draw function and the update function. I can't unify the code as much as I'd like.

But D3 is designed that way on purpose; it gives you control over the update function so you can make it more efficient, more beautiful, etc. I'd say D3's transition support is one of its real innovations, and I'm optimistic we'll see some great uses of it in the coming months.

It'd be useful to have an example of doing "simple" transitions in D3, where you simply remove the whole scenegraph and re-render it every frame. That'd be analagous to what Protovis does, right?