AngularJS + D3.js = Radian(skybluetrades.net)
skybluetrades.net
AngularJS + D3.js = Radian
http://www.skybluetrades.net/blog/posts/2013/04/24/radian/index.html
11 comments
"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
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
Agh, read this after upvoting the article :(
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.
> 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.
You can always make your own d3 directives. Relevant "how-to" blog: http://briantford.com/blog/angular-d3.html
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.
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.
Thanks for sharing this, looks really interesting.
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.
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.
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.
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.
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.
An excellent example of why HTML5 should have included namespaces. How would this validate or do people not care about that anymore?
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>
I think they dont.. ( atleast I dont!! )
Anyway see this article http://programming.oreilly.com/2013/04/stop-standardizing-ht...
Anyway see this article http://programming.oreilly.com/2013/04/stop-standardizing-ht...
Yeah, you use the A (is for attribute) filter on the directive instead of the E (is for element) filter.
This will definitely make data visualization easier... I want to make a bitcoin graph with it!
I totally understand mean and standard deviation now. :D
my word the font on that article is hard on my eyes
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.