Angular related data tree chart using d3

Angular d3 chart

What is the value of information if it’s not represented in a proper way. D3 is one of the powerful frameworks these days to visualize the information. Its a bit complex and learning curve is quit long but the result you will get is worth it.

Was working on some data visualization recently and I got the idea of why not making it reusable and someone else might use it.

As I start to fall in love with open source community, decided to make the chart using angular framework as most of my recent work was front end projects. (project on GitHub)

Component functionalities

Chart is simple, declare the directive as following in your HTML

<bubbletree 
    id="testChart"                  //required 
    control="chart"                 //required
    link-distance='100'             //optional
    fill-style='solid'              //optional
    parent-color='steelblue'        //optional
    child-color='lightgray'         //optional
    collapsed-color='#ffdd99'       //optional
    link-color='#9ecae1'            //optional
    enable-tooltip="true"           //optional
    text-x="1.45em"                 //optional
    text-y="3.45em"                 //optional
    scale-score="10">               //optional
</bubbletree>

Then you need to map an object inside your controller to the directive which happen through the control object in your scope, do so will make you ready to go. The control object is your gateway to communicate with the directive, for instance you can call the bind function and pass the data you want to visualize it.

//this very important to communicate with the directive 
//and be able to call internal functionalities
 $scope.chart = {};
 //load you data in anyway you want 
 $http.get('data.json').then(function(result) {
    //once data is ready pass it to the bind function
    $scope.chart.bind( result.data);
 });

Styling

angular-bubbletree-chart2

The chart layout can be controlled through the available option for the component or through overriding the default css. Check the below available option of the components to change the layout

parameter       condition   default     description 
id              required    NA          defines the control id in the dom 
control         required    NA          refernece to scope object in order to communicate with the directive 
width           optional    1000        determine the svg container width 
height          optional    400         determine the svg container height 
link-distance   optional    100         determine the distanaation between each node 
fill-style      optional    gradient    changes the chart bubbles layout (solid - gradient)
parent-color    optional    #336699     color of any parent node (works only with solid style)
child-color     optional    #e0e0eb     color of any child node (works only with solid style)
collapsed-color optional    #19334d     color of any collapsed parent node (works only with solid style)
link-color      optional    #9ecae1     color of link between nodes 
enable-tooltip  optional    true        show small tooltip beside the node(very basic)
text-x          optional    1.45em      determine the x coordinates of the node text according to its node 
text-y          optional    3.45em      determine the y coordinates of the node text according to its node 
scale-score     optional    10          determine the scaling factor for node sizes(1 too small - 30 is big) 

Data structure

big data chart

Its important to understand the data structure it will be passed to the component, each node is waiting for name & size. The parent node will hold a children value which is array of name & values

{
    "name": "Root node",
    "children": [{
        "name": "analytics",
        "children": [{
            "name": "cluster",
            "children": [{
                "name": "Merge Edge",
                "size": 700
            }]
        }, {
            "name": "graph",
            "children": [{
                "name": "Betweenness Centrality",
                "size": 3534
            }, {
                "name": "Spanning Tree",
                "size": 5416
            }]
        }]
    }]
}

Improvement

Planning to improve the component step by step by giving more control to the developer to change either the layout or the functionalities. If you got an idea or suggestion please open an issue on GitHub from here

More charts!

idea suggestion help

I came ac cross a case which I needed to show the data as above, if you got an idea for more things can be done or even new chart ideas, let me know and we can work together on it. Who doesn’t love open source 🙂

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s