D3.compose – compose reusable charts and components with D3.js
csnw.github.io
csnw.github.io
It gives you a declarative means of specifying the visualization and comes from the the same lab that created d3
D3 is pretty awesome and all but it is NOT a charting library. It's a data binding framework. It adds several layers of incredibly hard to follow abstraction.
It's super duper cool when it does exactly what you want and all you desire is to drop your in your data. A+++ would recommend. But if you want to do something slightly different it's a huge pain in the ass. At the end of the day it's just a handful of SVG primitives. Draw them yourself and move on with your day. I promise you it's easier.
I mostly write in ClojureScript, so the data binding wasn't that attractive — I can do all of that work better anyway.
I guess what I'm looking for is a library with graphics/charting primitives written in ClojureScript, possibly using React. Hmm.
Your experience is totally different from everyone on every team I've used D3 with, and all the people I've taught D3. I can understand "D3 does too little", but "D3 does too much" is just weird.
What I've needed from D3 is the math-y bits: calculating layouts, paths, etc. What I don't need (or want) is for it to ever touch the DOM.
But that's what it wants to do most. D3 is sort of the best of the jQuery-inspired "select and mutate" generation - it does data binding in a way that really makes sense as long as you let it handle DOM operations.
But following React, there's been a pretty big movement away from procedural DOM manipulation and toward the declarative re-rendery "DOM as a pure function of state" approach. In that case, letting D3 mess with the DOM (especially in the way that it does, where complex links between DOM and data are maintained in the background) is bad news.
If you already have a way of getting elements in and out of the DOM and keeping their state aligned with the data that you like better than the select-and-mutate model, a lot of what D3 does seems unnecessary or introduces problematic interference. React and D3, for instance, tend to not play very nice without a lot of effort.
I've had projects where programmers lean on D3 because that's the way they've learned to get SVG elements into the DOM - they'll take an example they've found somewhere that mostly only uses simple shapes, modify it a little bit to do what they want and ask me for help adding that visualization into another project. Sometimes in these cases, D3 isn't getting used for much except for "insert an svg element with these attributes for every node in this data structure", in which case it's total overkill, and I end up stripping it out entirely. I sometimes end up keeping it around for things (I'm probably not going to write my own Reingold-Tilford tree layout algorithm), but often in these cases I have to do extra work to keep it from conflicting with other things.
But the one thing that I couldn't find a good solution to, was transitions/animations as data changes. Support for transitions in d3 is quite impressive (often just calling .transition() on your selection) and I couldn't find nearly as nice a solution with React, though chenglou[0] seems to be making continuous progress.
http://bl.ocks.org/cpapazian/6228888157c39be85e9c
The D3Component wrapper lets you put a d3-style reusable component inside of a react dom tree, using react props to pass parameters and event handlers to the d3 chart.
It doesn't do anything if you just desire to drop in your data - you need to build everything from scratch. On the other hand, if you start with good code or a good example and want to do something slightly different, it's very easy to modify to do what you want.
The amount of code it would take to "do everything yourself" that D3 does would be an order of magnitude more.
I also have not found it too hard to step outside of/modify the online examples, though I guess it depends on the particular viz you're trying to create.
Why don't scientists use these libraries, making error bars an appealing thing to add? In my experience, D3 isn't a great too for interactive analysis: plot, stare, tweak, re-plot. I get bogged down in the details of the visualization, vs something like Matlab that almost always throws up a reasonable plot with interactive controls. Since D3 doesn't encourage the type of workflow that results in a graph with error bars, you get a self-reinforcing dynamic where nobody who works with D3 is interested in making it easy to create graphs with error bars.
There are still a few kinks to work out, like making sure <template> is supported in SVG documents, but once that's working something like SVG + Polymer data binding will be better than D3.
D3 is super for customization, but it's really really low-level.
As it sits on top of crossfilter (http://square.github.io/crossfilter/) you can also do unusual things behind the scenes to the data sets. As an example, I used google maps to restrict datasets to the current map view. Worked surprisingly well. http://www.bathhacked.org/projects/hacked21-food-standards/