Tools from the Pros #3: Jan Willem Tulp on D3 and Protovis

Jan Willem Tulp When I saw for the first time a visualization developed by Jan, the Ghost Counties, I was totally fascinated. It’s brilliant. It took me a while to understand how it works, but once I got it I could not help but admiring the strange mix of complexity and simplicity it provides.

Despite he looks so serious in this picture on the left, he has a big smile and he is fun. I met him for the first time at Visualizing Europe and since then we exchanged many emails. Plus, he is a regular commenter here (and everywhere) and I love him for that.

I don’t know how much I have to add to convince you his advice is a valuable one. Just give a look to his portfolio and judge yourself. He is IMO one of the most interesting data visualization freelancers recently appeared on the scene.

I know, by talking with him, he is proficient with several technologies but he has a passion for D3.

How did you start using Protovis/D3?

I’ve always been someone interested in the latest technologies. So, since I follow the data viz community very closely, I was aware of Protovis very early on, and I was aware of the development of D3 even before it was released to the public. I have a software development background, so I don’t have too much trouble finding my way in new programming languages, and since it excites me to work with new technologies and frameworks, I just started playing with Protovis and D3 as soon as it became available.

What’s the best and worst aspect of Protovis/D3?

The best aspect of Protovis is that it is a domain specific declarative language, which means that is fairly easy to start writing code, using visualization related keywords and functions. The best aspects of D3 is it’s flexibility (more direct integration with SVG) and better performance. The worst aspect of both D3 and Protovis is that it’s hard or impossible to get it working on older browsers, and the learning curve for D3 may be somewhat harder than for Protovis.

Ok, I am a beginner and I want to learn Protovis/D3, where do I start?

I think Protovis is easier to start with than D3, but Protovis is no longer under development. I also see that the Protovis mailing list is not very active anymore, while the D3 mailing list is very active. But, I guess Protovis would be a very good way to start if you’re a beginner. Basic Javascript programming skills would be recommended, both for Protovis and D3. For some great Protovis tutorials you should check out Jerome’s blog: (part 1 – 5: working with data in protovis). Also, the Protovis website has quite some examples that are pretty good. For D3, documentation, examples and tutorials are still under development: so, with D3 you’re more on your own right now (and of course the mailing list). But things are improving rapidly.

How is the learning curve vs. return-on-investment of Protovis/D3?

Protovis is really a good way to learn visualization and programming at the same time. Protovis is a language that is really geared towards the visualization (and diagrams) domain, so it really makes sense to talk about axis, marks, lines, bars, pies, etc. Also, there are really quite some good examples on the Protovis website, so it’s fairly easy to get started. However, right now Protovis is not supported anymore, and people are really moving to D3 now, so getting support may become a little tricky. Also, Protovis does not perform as well as D3 with very complex graphs for instance, and also, compared to D3, in Protovis you’re a little bit limited to the animations you can achieve. So, overall, a good way to start and also good to make some nice standard diagrams and visualizations, but if you really want to do ‘heavy’ visualization stuff, you might consider moving on to D3.

D3 is more powerful, more flexible and seems to have more capabilities (and better performance) than Protovis. The flip side is that in order to have a more flexible programming language, the language is also more abtract. Though many concepts of Protovis are also implemented in D3, and there are also quite some predefined visualization layouts, it’s also more useful (compared to Protovis) to gain some knowledge of SVG, since it’s more likely that you might do some low level stuff. D3 does give you much better animation capabilities, better performance, more flexibility, so, once you get the hang of D3 and some SVG, you’re able to create some very compelling interactive visualizations.

What other tools would you recommend other than Protovis/D3?

The tools you mention are some of the best right now. I also think that Raphaël is a fairly good alternative if you want to do Javascript-based visualization that works in older browsers as well. Personally I don’t have much experience with Raphaël yet. Also Processing now has an Android mode, which is great if you want to create visualizations that run on Android phones, and the upcoming Processing 2.0 also has a Javascript mode, so you can easily create HTML5 canvas based visualizations with the Processing development tool.

A recommendation I’d like to add: when I work on Protovis or D3 visualizations, I use TextMate on the Mac. This allows you to open a preview window which renders your visualization near real-time when you are typing in your code. I’m sure that are similar tools that do this. This is really great for getting immediate feedback while you’re coding.