
Declarative Data Visualization library - pajju
http://akngs.tumblr.com/post/30393301015/declarative-data-visualization
======
csmatt
I've been creating a bunch of angularjs directives for d3 for a project at
work and was thinking about seeing if they would let me put them up on github.
I've seen FullScale's danglejs, but it's not as configurable as we'd like and
only has a handful of visualizations.

If you're interested in us open-sourcing them, please let me know and I'll
convince them to let me put the code up.

ex: to produce this <http://mbostock.github.io/d3/talk/20111018/tree.html>

<collapsible-tree orient="horizontal" bind="treeData" click-
node="handleNodeClick" dbl-click-node="handleNodeDblClick"></collapsible-tree>

~~~
arpineh
I am very interested about seeing D3 with Angular. DangleJS is a new one. I
have to look through it at a better time.

I'm currently in the process of moving our hand coded D3 visualizations to
Angular and trying to decide how to handle graph's parameters (axis, colors,
scale etc.), data bindings and interactivity. One option I see is to adopt the
Vega D3 library and create directives for its components.

If open sourcing your work wont be possible, perhaps you could tell more about
the implementation?

~~~
csmatt
I looked at Vega, but couldn't see much benefit in it. My implementation isn't
too crazy.

\- The data must be on the scope containing the directive. \- There's a
scope.$watch('bind', function(newVal){}) in the directive's link function
which will call an update() function that contains the d3 calls. \- The
directive template is something like <div class="visualization
directiveName"><svg></svg></div> (when starting, I do scope.vis =
d3.select(element.find('svg')[0]) . Since there's a class on the template, I
use that to define styles via css. You can also put a class in the directive
tag itself to target css style more specifically.) \- Handling interactions
(ex: specifying what happens when double clicking a node) is done by
specifying an attribute and setting it to a function on the parent
controller's scope (ex: dbl-click-node="handleDblClickFunction"). In the
directive's d3 code, I add a listener for double clicks on a node and have the
attached function call scope.handleDblClickFunction with the event arguments.

Hope that helps, Matt

~~~
arpineh
Yes, thank you. I think I got the gist.

Vega comes with "free" PNG and Canvas support, which is useful to me.

------
ansgri
Exactly the thing I'd like to use in our company's dashboard, missing the
webdev fluency to apply things like d3.js.

Moreover, generating JS from templates feels like a hack, and delivering
separate JS docs via Ajax is somewhat more complex.

Thanks a lot!

------
tekacs
Inline transformation of data would seem like the natural fit for SGML
derivatives - it seems a shame that we've so often found the need to go with
explicit graphs, decorations and indeed the just-gone situation of seemingly
redundant HTML to help fight the CSS box model. :/

(cue responding comment(s) about XSLT, WPF, etc.)

Also nice call on the simple-as-possible colouring, there. :)

------
zacharyvoase
Very nice, but I'd appreciate it if graph types/options were declared through
HTML attributes rather than in text or in adjacent elements.

------
kanakiyajay
I have featured this awesome jQuery plugin by @alanking in <http://jquer.in>

------
AndreasFrom
How do you label the axes?

