Clojurescript, JavaScript, SVG, Charts, Graphics

Question

I'm writing a client side app. I want to use ClojureScript. I would like to generate vector graphics (graphics, charts, line graphs).

What should I read up on?

[The only hard requirement is ClojureScript -- (1) I like Clojure, and would like to do this entire app in Clojure (2) this needs to run in the browser]

Thanks!

Answer 1

Shameless plug: You can use C2, a Clojure/ClojureScript data visualization library. (Github here.) The core idea is the same as D3---mapping data to DOM elements---but since you have Clojure's more powerful semantics and data structures it ends up being much more composable than D3/JavaScript.

The docs could use some love, but if you're making traditional charts in SVG take a look at the axis and tick-generation helpers:

https://github.com/lynaghk/c2/blob/master/src/cljx/c2/svg.cljx

https://github.com/lynaghk/c2/blob/master/src/cljx/c2/ticks.cljx

While there isn't an official 0.1.0 release yet, we've used it at Keming Labs on several large web and iOS projects.

If you have a specific visualization that you're not sure how to approach, feel free to ping me @lynaghk or open up a Github issue.

Answer 2

Since regular javascript libraries can be used in clojurescript, I guess you can use something like Raphael or d3 to deal with the svg. d3 is probably better suited for what you need, although it's a bit harder to use.

There's always the alternative of working with the DOM directly, you don't need any tutorials for that. The SVG standard is pretty well structured and easy to understand.

Answer 3

I'd recommend checking out Vega-Lite & Vega, which are designed around the ideas of the Grammar of Graphics (the force behind R's popular ggplot2 library). The core idea of GG is that data visualizations are specified as declarative descriptions of how properties of the data map to aesthetics of the dataviz. Vega-Lite & Vega take things one step further in providing a grammar of interaction, which allows for the construction of interactive data visualizations and sophisticated explorer views. Moreover, it ups the ante on the declarative nature of the GG in that Vega-Lite and Vega specifications are described as pure data (JSON), which makes it very in line with the data-driven philosophy of the Clojure world, and paves the way for seamless interoperability with different languages and such.

Vega-Lite is more or less the higher lever, day-to-day data science tool, focusing on providing high leverage and automation based on very spartan specifications. It compiles to Vega, which is a somewhat lower level and more powerful, but less automated version of Vega-Lite. Usually starting out with Vega-Lite, and switching to Vega only as needed is sufficient.

For more on Vega & Vega-Lite see: https://vega.github.io.

If you'd like to use Vega-Lite or Vega from Clojure or ClojureScript, you may wish to check out a small but flexible wrapper library I wrote called Oz:

https://github.com/metasoarous/oz

Answer 4

This is an old question, but for anyone finding it now, another option is to use the strokes library, which wasn't available when the question was asked. Strokes is a Clojure wrapper around d3.js.