
D3.compose – compose reusable charts and components with D3.js - sebg
http://csnw.github.io/d3.compose/
======
currywurst
The logical conclusion of this approach is the Vega visualization grammar
:[http://vega.github.io/vega/](http://vega.github.io/vega/)

It gives you a declarative means of specifying the visualization and comes
from the the same lab that created d3

~~~
smrtinsert
I think vega lite is where the action should be. [http://vega.github.io/vega-
lite/](http://vega.github.io/vega-lite/)

------
forrestthewoods
I swear many people would be better off just manually generating paths on
their own. It's not difficult.

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.

~~~
SonicSoul
Can you elaborate on "manually generating paths"?

~~~
forrestthewoods
The end result is an <svg> element with a bunch of with a bunch of <path>
<line> <rect> children. Sometimes you can wrangle D3 to generate the <path>s
you want. Sometimes it's easier to more directly make them yourself.

------
cogware
Plottable.js
([http://plottablejs.org/examples/](http://plottablejs.org/examples/)) is
another library that takes a similar approach: reusable components written in
D3, and a table-based composable layout system.

~~~
tomasien
I've been using Plottable recently and it's great. Hope it gets more widely
used so there's more material out there about it - it's SUPER powerful but the
documentation is hard to understand if you're really trying to extend it.

------
roadnottaken
How come error-bars are so unusual in these sorts of libraries? I'm a
scientist and NEVER make charts without error-bars on it, but they're rarely
included in charting libraries and when they are it feels like an
afterthought.

~~~
trjordan
Most of the data visualized by these types of libraries don't have any sort of
variance or confidence interval behind the data. You're looking at things like
sales forecasts, server latency, number of employee hours, or other precisely
measurable quantities. The whole context around those numbers never talks
about the notion of variability or reproducibility, so the idea of putting
error bars on there doesn't help communicate anything.

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.

------
spankalee
Hopefully HTML custom elements is the future here, where you can just define
new SVG tags like you can HTML tags, and then build up a graphics from
reusable components.

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.

~~~
Joeri
The key functionality of D3 is the ability to join a data series against a dom
tree, adding, transforming and removing content as needed. Even with polymer
and rich components there's still a place for D3.

------
k__
I was just looking after something like this the other day.

D3 is super for customization, but it's really really low-level.

~~~
softawre
There are many D3 wrappers for quick starting D3. dc.js is a good one.

~~~
awjr
dc.js is one of those libraries that completely blows client's minds. The hard
thing to do as a developer is not to try and filter the data too much. dc.js
lets the end-user filter the data interactively and create their own stories,
you just have to work out the questions each chart lets the user ask.
[http://dc-js.github.io/dc.js/](http://dc-js.github.io/dc.js/)

As it sits on top of crossfilter
([http://square.github.io/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/](http://www.bathhacked.org/projects/hacked21-food-standards/)

~~~
elsherbini
It looks like the link to the project on that article is down
([http://www.sure-sense.com/fhrs/](http://www.sure-sense.com/fhrs/)). Is it
hosted elsewhere? I'd love to take a look.

~~~
awjr
Yeah sadly, it was a hackathon hack I repurposed afterwards for a startup I
was working for. Will try and dig it out.

------
ohitsdom
D3 always looks really interesting to me, but I still just use Highcharts for
generating charts (easy to use, great documentation). Any reason to try out D3
for basic charting, or is it best suited for more custom scenarios?

~~~
untog
Definitely more suited for custom scenarios. That said, once you've got the
basics in D3 it's really easy to start adding pieces of knowledge and
customize. Highcharts is a lot more abstracted away.

