Declarative Data Visualization library | Hacker News Reader

Declarative Data Visualization library

akngs.tumblr.com

91 pointspajju9 comments

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>

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?

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

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

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

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!

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. :)

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

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

How do you label the axes?

Reply on news.ycombinator.com