AngularJS + D3.js = Radian

http://www.skybluetrades.net/blog/posts/2013/04/24/radian/index.html

by zzenon • 13 years ago

99 18 13 years ago

egeozcan• 13 years ago

This looks much more meaning fult than a div soup or even a proper table, I'd say. I'd definitely use it...

> There are some contractual encumbrances that prevent us from open-sourcing it right now, but that may change at some point in the future

...only if it were open source.

zzenon2• 13 years ago

You can always make your own d3 directives. Relevant "how-to" blog: http://briantford.com/blog/angular-d3.html

ian-ross• 13 years ago

I'm the author of Radian. We're working on making it open source. If it comes down to it, I may just buy the IP back from the company I developed it for. It's to their benefit to have the thing open (more eyes). The only people who might lose out are the company's current start-up funders, but it's pretty clear that Radian doesn't actually have that much value as a closed source product.

LAMike• 13 years ago

This will definitely make data visualization easier... I want to make a bitcoin graph with it!

jwr• 13 years ago

"Radian is currently proprietary. There are some contractual encumbrances that prevent us from open-sourcing it right now, but that may change at some point in the future."

So why would this be interesting for HN readers? The idea isn't that revolutionary, and there is no code and no way for people to do much.

tinco• 13 years ago

Agh, read this after upvoting the article :(

zzenon2• 13 years ago

"So why would this be interesting for HN readers?"

To show what you can do with AngularJS directives and that combining it with D3.js it can be quite powerful (even without source code). Anybody who worked with D3.js, should know how much boilerplate code needs to be written to have a visualisation. By abstracting that code in directives, it allows users to use out-of-the-box d3.js graphs. Someone could go ever further to implement an "interface" to customize these graphs through angularjs.

To anyone who's interested: I replied to another comment with a tutorial blog of how to create d3.js directives

lucisferre• 13 years ago

I've been building a lot of stuff with Angular and D3 lately, they make a good pair. The author has some good ideas here I'm looking forward to trying them out. The author may not be able to but I'll be perfectly happy to open source it.

tel• 13 years ago

Angular + d3 is beautiful. d3 is great but often far too low level and imperative (despite trying quite hard to be declarative). Wrapping d3 manipulations inside of Angular directives gives them a great deal of simplicity.

I find myself creating all kinds of different classes of graphs, parameterizing them on HTML attributes, and dropping them into Angular scopes. With a little bit of careful throttling and $applying you can even get highly interactive d3 graphs.

chevreuil• 13 years ago

Agreed, Angular and d3 are two of the most beautiful and useful pieces of JS out there. Radian's approach is very inspiring for the ones that use both of these awesome libraries.

But I find it too low level : I don't see the point of manipulating <dot> and <line> directives : is'nt it what SVG does already?

I'd rather use a <barchart> or a <piechart> directive.

roozbeh18• 13 years ago

I totally understand mean and standard deviation now. :D

smrtinsert• 13 years ago

An excellent example of why HTML5 should have included namespaces. How would this validate or do people not care about that anymore?

joshuacc• 13 years ago

If you're referring to the custom elements, Angular will also let you do things in a way that validates. Something like: <div data-plot="height=3, width=3"></div>

ganarajpr• 13 years ago

I think they dont.. ( atleast I dont!! )

Anyway see this article http://programming.oreilly.com/2013/04/stop-standardizing-ht...

warfangle• 13 years ago

Yeah, you use the A (is for attribute) filter on the directive instead of the E (is for element) filter.

doobius• 13 years ago

my word the font on that article is hard on my eyes

arafalov• 13 years ago

There is also Dangle (https://github.com/fullscale/dangle), which is D3+Angular backed by ElasticSearch. So, if Radian cannot be open sourced, perhaps Dangle can pick up the slack.

jcomis• 13 years ago

Thanks for sharing this, looks really interesting.

AngularJS + D3.js = Radian

Related Stories