Quantcast

[ANN] dangle, AngularJS directives that provide common visualizations based on D3

classic Classic list List threaded Threaded
5 messages Options
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

[ANN] dangle, AngularJS directives that provide common visualizations based on D3

egaumer
Visualizing elasticsearch responses is becoming more and more common. We'd like to start a community based effort on bringing together, what we feel, are three very powerful technologies; AngularJS, D3, and elasticsearch.

Without starting a religious war, let me briefly explain why we chose AngularJS over other alternatives such as Backbone and Ember. 

D3 comes from a very prestigious lineage and is arguably one of the most powerful open source visualizations libraries available. This power comes at a cost of having a relatively steep learning curve. The goal of dangle is to minimize this curve as much as possible.

We chose AngularJS for one very specific reason... directives.

http://docs.angularjs.org/guide/directive

Angular directives allow us to create an HTML based DSL around D3, making it extremely easy to insert (i.e., dangle) graphs from the DOM in a concise, declarative manner.

<!-- Example of declaring an area chart -->
<fs-area bind="results.facets.date" on-click="filterByDate" />

Everything is based on SVG. You can set the initial aspect ratio and things should scale properly depending on the viewing device. Graphs can be styled with CSS and basic transitions are supported.

The docs contain more configuration and styling information - https://github.com/fullscale/dangle

We'd love any type of feedback.

-Eric

--
You received this message because you are subscribed to the Google Groups "elasticsearch" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
For more options, visit https://groups.google.com/groups/opt_out.
 
 
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: [ANN] dangle, AngularJS directives that provide common visualizations based on D3

joergprante@gmail.com
I had conversation about Angular JS just Saturday at Open Data Day
Cologne and I think it's sooo great Google stuff. D3 is even greater for
diagrams and chart for faceting. It will  getting easier and easier to
set up ES visualizations even for complete JS UI ignorants like me :)
Eric, keep up the good work!

Jörg

--
You received this message because you are subscribed to the Google Groups "elasticsearch" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
For more options, visit https://groups.google.com/groups/opt_out.


Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: [ANN] dangle, AngularJS directives that provide common visualizations based on D3

Zachary Tong
In reply to this post by egaumer
This looks really awesome, can't wait to play around with it this weekend!  

-Zach



On Monday, February 25, 2013 1:39:33 PM UTC-5, egaumer wrote:
Visualizing elasticsearch responses is becoming more and more common. We'd like to start a community based effort on bringing together, what we feel, are three very powerful technologies; AngularJS, D3, and elasticsearch.

Without starting a religious war, let me briefly explain why we chose AngularJS over other alternatives such as Backbone and Ember. 

D3 comes from a very prestigious lineage and is arguably one of the most powerful open source visualizations libraries available. This power comes at a cost of having a relatively steep learning curve. The goal of dangle is to minimize this curve as much as possible.

We chose AngularJS for one very specific reason... directives.


Angular directives allow us to create an HTML based DSL around D3, making it extremely easy to insert (i.e., dangle) graphs from the DOM in a concise, declarative manner.

<!-- Example of declaring an area chart -->
<fs-area bind="results.facets.date" on-click="filterByDate" />

Everything is based on SVG. You can set the initial aspect ratio and things should scale properly depending on the viewing device. Graphs can be styled with CSS and basic transitions are supported.

The docs contain more configuration and styling information - https://github.com/fullscale/dangle

We'd love any type of feedback.

-Eric

--
You received this message because you are subscribed to the Google Groups "elasticsearch" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
For more options, visit https://groups.google.com/groups/opt_out.
 
 
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: [ANN] dangle, AngularJS directives that provide common visualizations based on D3

Carl Sutherland
In reply to this post by egaumer
Hello Eric,

I'm interested in a general charts and graphs library for D3.  Templates, if you will, vs. hand-coding a bar chart when I need one.  There are a couple such solutions being worked on (http://nvd3.org/ is the one I'm most familiar with).

I love the idea of Angular directives for data visualization, but I think that data visualization isn't a need specific or unique to the Angular framework.  Why not combine efforts with a project such as the above, and adapt the existing API into Angular directives?

-Carl


On Monday, February 25, 2013 1:39:33 PM UTC-5, egaumer wrote:
Visualizing elasticsearch responses is becoming more and more common. We'd like to start a community based effort on bringing together, what we feel, are three very powerful technologies; AngularJS, D3, and elasticsearch.

Without starting a religious war, let me briefly explain why we chose AngularJS over other alternatives such as Backbone and Ember. 

D3 comes from a very prestigious lineage and is arguably one of the most powerful open source visualizations libraries available. This power comes at a cost of having a relatively steep learning curve. The goal of dangle is to minimize this curve as much as possible.

We chose AngularJS for one very specific reason... directives.


Angular directives allow us to create an HTML based DSL around D3, making it extremely easy to insert (i.e., dangle) graphs from the DOM in a concise, declarative manner.

<!-- Example of declaring an area chart -->
<fs-area bind="results.facets.date" on-click="filterByDate" />

Everything is based on SVG. You can set the initial aspect ratio and things should scale properly depending on the viewing device. Graphs can be styled with CSS and basic transitions are supported.

The docs contain more configuration and styling information - https://github.com/fullscale/dangle

We'd love any type of feedback.

-Eric

--
You received this message because you are subscribed to the Google Groups "elasticsearch" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
For more options, visit https://groups.google.com/groups/opt_out.
 
 
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: [ANN] dangle, AngularJS directives that provide common visualizations based on D3

egaumer
I considered that as I was struggling to understand D3. Ultimately it would have added an additional layer of abstraction, limiting the possibilities and making integration with Angular more difficult. D3 has some really insane capabilities and we wanted to have direct access to its APIs without having to go through some intermediary layer. This allows us to optimize specifically around Angular and elasticsearch.

There was that whole licensing thing that went down with NVD3 as well and that made us a bit nervous. Dangle (and elastic.js) are small pieces of a larger commercial effort we're working on to provide a full featured distributed application server on top of elasticsearch, adding fine grained ACLs, OAuth 2.0, HTTPS/SPDY, support for LDAP, Active Directory, OpenId, etc., distributed cache, WebSockets, and the ability to execute SSJS (via Rails style controllers that can be hot deployed).

-Eric



On Tuesday, February 26, 2013 7:55:30 AM UTC-5, Carl Sutherland wrote:
Hello Eric,

I'm interested in a general charts and graphs library for D3.  Templates, if you will, vs. hand-coding a bar chart when I need one.  There are a couple such solutions being worked on (http://nvd3.org/ is the one I'm most familiar with).

I love the idea of Angular directives for data visualization, but I think that data visualization isn't a need specific or unique to the Angular framework.  Why not combine efforts with a project such as the above, and adapt the existing API into Angular directives?

-Carl


On Monday, February 25, 2013 1:39:33 PM UTC-5, egaumer wrote:
Visualizing elasticsearch responses is becoming more and more common. We'd like to start a community based effort on bringing together, what we feel, are three very powerful technologies; AngularJS, D3, and elasticsearch.

Without starting a religious war, let me briefly explain why we chose AngularJS over other alternatives such as Backbone and Ember. 

D3 comes from a very prestigious lineage and is arguably one of the most powerful open source visualizations libraries available. This power comes at a cost of having a relatively steep learning curve. The goal of dangle is to minimize this curve as much as possible.

We chose AngularJS for one very specific reason... directives.


Angular directives allow us to create an HTML based DSL around D3, making it extremely easy to insert (i.e., dangle) graphs from the DOM in a concise, declarative manner.

<!-- Example of declaring an area chart -->
<fs-area bind="results.facets.date" on-click="filterByDate" />

Everything is based on SVG. You can set the initial aspect ratio and things should scale properly depending on the viewing device. Graphs can be styled with CSS and basic transitions are supported.

The docs contain more configuration and styling information - https://github.com/fullscale/dangle

We'd love any type of feedback.

-Eric

--
You received this message because you are subscribed to the Google Groups "elasticsearch" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
For more options, visit https://groups.google.com/groups/opt_out.
 
 

Loading...