About proto/viewer

proto/viewer is a visual design environment for protovis. It is being created and maintained by Rio Akasaka for a student project for Data Visualization, CS448B, taught by Prof. Jeffrey Heer at Stanford University. The codebase is available on GitHub.

For questions and feedback please email rio@cs.stanford.edu

Compatibility

Protoviewer is viewable in Firefox and Chrome, which supports SVG. Internet Explorer does not. Inline SVG support is still shaky in Firefox, so your best experience is in Chrome.

The list of libraries employed for this tool are as follows:

• protovis 3.2 (link)
• jQuery and jQuery UI (link)
• CodeMirror (link) by Marijn Haverbeke for the code editor and syntax highlighting
• canviz (link), a JS library for Graphviz, from which I modified their ColorBrewer mapping.
• Pretty Print for Javascript (link) by James Padolsey for the rendering of the JSON viewer
• jquery.editable (link) by Mika Tuupola for inline editing of the data viewer
• RGB to HTML/Hex (link) for converting ColorBrewer RGB to hexadecimal
• JSLint (link) by Douglas Crockford, for parsing and evaluating user inputted JavaScript and CSV.

Features

1. Click on individual data points and view it in the context of the JSON object.
2. Modify color choices for maps based on ColorBrewer.
3. Save the SVG output.
4. Modify your workspace by undocking and moving panels.
5. Automatically verify for JSON errors using an integrated JSLint syntax checker.
6. Automatically define categorical/nominal/date values from JSON.
7. Save and retrieve your workspace based on a session ID.
8. Inline data modification.
9. Syntax highlighting and automatic rerendering of code.
10. Look up specific syntax: highlight the word and hit "lookup".
11. Upload your own JSON text or Excel/text CSV files.
12. View other people's work by saving to the public gallery.