Possible to write Protovis code in CoffeeScript?

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.

Locke

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).

Acanthous

Answer 2

It's better to write in CoffeeScript for development purposes only, and then compile into plain JS to include in <script>.

Compile using the -c flag:

coffee -c someFile.coffee

The output will be someFile.js in the same directory.

Kimberly

You could use Sinatra or something similar to render the page and convert coffeescript to javascript on the fly. – Yoohoo

Answer 3

OK I've played with this a bit and I can in fact use Protovis with Coffeescript, using a <script type="text/coffeescript"> tag, which can optionally have an src="x.coffee" attribute. No external compilation required. Clearly this requires the browser to compile the Coffeescript to Javascript every time the page loads but for quick visualization tasks it works for me.

Locke

See my simul-posted answer for further explanation. Note that text/coffeescript scripts get run after all other scripts, regardless of where you put the tags, because they're loaded via Ajax from coffee-script.js. – Acanthous