Archive for the ‘Protovis’ Category

D3.js – Data Driven Documents

Thursday, November 3rd, 2011

D3.js – Data Driven Documents

From the webpage:

D3 allows you to bind arbitrary data to a Document Object Model (DOM), and then apply data-driven transformations to the document. As a trivial example, you can use D3 to generate a basic HTML table from an array of numbers. Or, use the same data to create an interactive SVG bar chart with smooth transitions and interaction.

D3 is not a traditional visualization framework. Rather than provide a monolithic system with all the features anyone may ever need, D3 solves only the crux of the problem: efficient manipulation of documents based on data. This gives D3 extraordinary flexibility, exposing the full capabilities of underlying technologies such as CSS3, HTML5 and SVG. It avoids learning a new intermediate proprietary representation. With minimal overhead, D3 is extremely fast, supporting large datasets and dynamic behaviors for interaction and animation. And, for those common needs, D3’s functional style allows code reuse through a diverse collection of optional modules.

Any description of the graphics on my part would be inadequate. Visit the site, you will see what I mean.

Pay special attention to the architecture of D3, there may be lessons for future topic maps development.

D3 replaces Protovis, which is no longer under active development. Protovis is, however, still suggested as a source of examples, etc.

A Protovis Primer, Part 1

Thursday, November 3rd, 2011

A Protovis Primer, Part 1

From the post:

Protovis is a very powerful visualization toolkit. Part of what makes it special is that it is written in JavaScript and runs in the browser without the need for any plugins. Its clever use of JavaScript’s language features makes it very elegant, but it can also be confusing to people who are not familiar with functional programming concepts and the finer points of JavaScript. This multi-part tutorial shows how to create a visualization (my interactive Presidents Chart) in Protovis, and explains the concepts that are involved along the way.

This introduction is based on my experiences with using Protovis in my Visualization and Visual Communication class earlier this spring. While the concepts involved are really not that difficult, they are rather foreign to students who have not been exposed to functional programming. And since that is also the case for a lot of hobbyists and people wanting to do visualization who do not have a computer science background, I imagine they run into the same problems.

This has grown from being a single article into several parts (and is still expanding). Let me know if there are things that you don’t understand or that you think need to be covered in more detail, so I can tailor the next parts accordingly.

Protovis requires a modern browser, which means any recent version of Safari, Chrome, FireFox, or Opera. Internet Explorer does not work, because it does not support the HTML5 Canvas element. The visualizations in this article are all Protovis drawings (check out the source code!), with a fall-back to images for RSS readers and IE users. There is no real difference at this point, but once we get to interaction, you will want to read this in a supported browser.

See the comments as well for pointers.

A Protovis Primer, Part 2 – If you are interested in earthquakes, this is the tutorial for you! Plus really nifty bar chart techniques.

A Protovis Primer, Part 3 – Lives and office terms of US presidents. OK, so not every data set is a winner. 😉 Still, the techniques are applicable to other, more interesting data sets.