The best kittens, technology, and video games blog in the world.

Monday, February 06, 2017

opal-d3 for in-browser data visualization with ruby


Ruby has always been the best language for server-side programming, but then if you want to do any dynamic front-end functionality your choices were mostly the awful javascript or one of compile-to-javascript languages like coffeescript, which were just borderline tolerable at best.

Opal tries to fix all such problems this by compiling ruby directly into javascript. It has adequate javascript interoperability, so you can use existing javascript libraries with it, but it's often fairly awkward and non-idiomatic, negating a lot of value of using superior language.

With opal-d3 I made intuitive ruby opal interface to D3 data-driver document visualization library. It's a great fit, as ruby is a great language for extracting and processing data, so it makes little sense to leave it for another language just for the final visualization step.

To use it, just gem install opal-d3. The gem includes example sinatra app.

What works and what doesn't

About 60% of D3 functionality is supported with nice ruby wrappers, including:
  • arrays
  • axes
  • collections
  • colors
  • delimiter-separated values
  • easings
  • number formats
  • interpolators
  • paths
  • polygons
  • quad trees
  • random numbers
  • scales
  • selections
  • shapes
  • time formats
  • time intervals
The following parts of D3 are not supported yet. Of course you can still access them with somewhat low-level code:
  • brushes
  • chords
  • dispatches
  • dragging
  • forces
  • geographies
  • hierarchies
  • queues
  • requests
  • timers
  • transitions
  • voronoi diagrams
  • zooming

See it in action

I included a bunch of sample visualizations with the gem, which you can also view here.

Future work

Pull requests most welcome. If you're interested in helping, some ideas are:

It would be nice to have the remaining functionality - especially geographic code, and also wrappers for any popular D3 plugins.

The interface tries to follows intuitive ruby style as much as possible, but there are some cases where it's not clear what would be the right way. I don't expect any major API changes, but some minor bits could change.

It should generally be clear what ruby equivalent is, and there's plenty of specs and a bunch of examples in demo app, but there's no comprehensive documentation or tutorials as such.

It would be good to just include more examples showcasing various included functionality - sort of like d3.js's homepage has. Especially examples showing dynamic interaction are lacking.

If it becomes popular, the project could definitely use some better kind of home page on github pages.

Unlike coffeescript which is pretty much free, opal comes with performance cost. opal-d3 right now doesn't try to minimize it, so it would be nice to have some benchmarks, and make sure it doesn't do anything unnecessarily costly.

Included example sinatra app could definitely use source maps and in-browser ruby console for editing code without reloading.

In case of trouble

If you have any questions, feel free to contact me over email, github, twitter, or whichever medium you find convenient.

No comments: