Protovis uses JavaScript. It helps if you’re already familiar with the language, but it's not necessary; you can pick it up as you go, and learn by example. Here's a minimal but complete visualization that displays “Hello, world!”:
<script type="text/javascript" src="protovis-d3.2.js"></script>
<script type="text/javascript+protovis">
new pv.Panel()
.width(150)
.height(150)
.anchor("center").add(pv.Label)
.text("Hello, world!")
.root.render();
</script>
|
You’ll find more off-the-shelf examples included when you download Protovis.
(Most of the examples you'll see in the documentation use method chaining to make specifications more concise. This means that the method to set a property returns a reference to the mark itself, allowing you to set multiple properties in a single statement. If you prefer a more traditional verbose style, you can use that instead.)
Breaking it down:
1. The first <script> element loads Protovis. You need to download protovis.js and install it in the same directory as the HTML file you are editing, or update the path accordingly. The precise name of this file depends on which version you download; if you're just getting started, you probably want to use a development version, such as protovis-d3.2.js. You can place this <script> element anywhere you like, as long as it is loaded before you try to visualize anything. Inside the <head> element is a safe bet.
2. The second <script> element is your visualization! Pay close attention to the type attribute: text/javascript+protovis. This allows you to use expression closures in browsers other than Firefox. If you only want to use Firefox, or if you prefer to write proper functions, you can use the standard text/javascript instead.
3. The example visualization uses a panel that is 150 pixels wide and 150 pixels tall. The SVG element is inserted into the document at the same location as the script. The words “Hello, world!” appear centered in the canvas.
To see more, browse our examples gallery and use your web browser to view the source. Thanks to JavaScript, Protovis visualizations are inherently open-source—you can see how any visualization is implemented and even access the underlying data set.
Next: Scatterplot Matrix