Question

I would like to create visualizations using Protovis, but writing in CoffeeScript rather than JavaScript (partly for the (x)->x function notation but other reasons as well)

Is this possible? What <script> tag would I use and is there any special order of script tags that are necessary?

Thanks.

Edit: I’d like to avoid a manual compilation step if possible.

Answer 1

To clarify the question a little: Protovis code is written using a special tag,

<script type="text/javascript+protovis">

after the Protovis library has been included. However, this code must be inlined with the HTML. The browser doesn’t recognize the text/javascript+protovis type, so it simply ignores the tag; Protovis finds it and reads in the text the tag contains, without attempting to load any file linked by src.

Why does Protovis do this? Because it runs a regex-based parser through the code to convert JavaScript 1.8 code to JavaScript 1.6 code; that way, you can use cutting-edge JavaScript features, and your code will still run in older browsers. Very cool.

While you could certainly write CoffeeScript code, compile it, and then paste it in, that would make for a very tedious build process. The good news is that it’s unlikely (impossible?) that you’ll get code out of the CoffeeScript compiler that uses anything beyond JS 1.6 features; most of those features are baked, in some form, into CoffeeScript itself. For instance, array comprehensions, and an abbreviated syntax for anonymous functions. That means you can just use

<script type="text/javascript" src="myProtovisCode.js"></script>

for your compiled CoffeeScript code (or text/coffeescript with the coffee-script.js library, for development).

The real trick is translating the Protovis examples, with their unfamiliar JS 1.8 syntax, into CoffeeScript. For instance,

cell.add(pv.Dot)
    .def("x", function(k0, k1) pv.Scale.linear(flowers, function(d) d[k0]).range(0, s))
    .def("y", function(k0, k1) pv.Scale.linear(flowers, function(d) d[k1]).range(0, s))

uses the abbreviated JS 1.8 anonymous function syntax, where function(x) x * x is shorthand for function(x) { return x * x; }. Of course, this translates easily to CoffeeScript:

cell.add(pv.Dot)
    .def("x", (k0, k1) -> pv.Scale.linear(flowers, (d) -> d[k0]).range(0, s))
    .def("y", (k0, k1) -> pv.Scale.linear(flowers, (d) -> d[k1]).range(0, s))

For further reference, check out New in JavaScript 1.8 over at Mozilla’s docs (Firefox being the only browser that natively supports JS 1.8 at present).