Bar Chart with Simple Tooltip Implementation

D3js is such an awesome framework that helps out in manipulating the DOM based on data. The data is bound to the nodes and is made available on every operators (.style(), .attr() , etc).

I just found damn easy to build basic charts with d3. In this post, i will just show you building an basic bar chart with simple tooltip implementation without using any external library for tooltips.

I make use of the DOM API  Element.getBoundingClient(). The above api seems very useful in many cases (atleast for me) and found it be compatible with all latest browsers.

Moz definition for getBoundingClientRect()

Returns a text rectangle object that encloses a group of text rectangles.

You might have a quick look on John Resig's post on getBoundingClientRect  .


I just skip on building of bar chart with d3 as there are tons of examples available out there.

I have build a bar chart with some sample data.


Now onto the next step of implementing tooltip that has to be shown on mouseover of the rect bars. I used the bootstrap (css alone) for the tooltips. All we need to do is to append the tooltip div to the body and position it on mouseover and clear them on mouseout.

We can register a mouseover and mouseout event listeners on the rect bars using .on operator.

The listener function gets called with the current datum bound with the bar , current index and this being the current DOM element. Reference

Using the getBoundingClientRect(), we can get the dimensions of the rect bar.  Thereby we can pass the left and top position to the tooltip function along with the data to be displayed.

     .on('mouseover', function(d) {
          var clientRect = this.getBoundingClientRect();                  
          toolTip.show( {top: clientRect.top, left: clientRect.left + clientRect.width/2 }, d );
      })
      .on('mouseout', function(d) {
        toolTip.cleanup();
      });

You could view the end result here.

A simple Blog Archive using Ember Component

In this post, we can see how to build a simple blog archive as a component using Em.Component. Before start coding, lets skim at the Ember.Components

• An Ember.Component is an isolated Ember.View whose context and controller properties are set to the view itself. (You can find this at https://github.com/emberjs/ember.js/blob/master/packages/ember-views/lib/views/component.js#LC89-93).  
• The property access and target action in the templates goes to the view by default. 
• However, the component inherits a controller from the context in which it is used. We can also send an action to the components' controller by calling 'sendAction()' method. You can view the implementation  here.

Lets go with building a simple blog-archive

When you register a component, the templates are looked into the 'components/' structure.

 {{! components/blog-archive.hbs}}

         

 {{blog-archive content=content}}

Now we can define our App.BlogArchiveComponent 

App.BlogArchiveComponent = Ember.Component.extend({

 months: ['January','Feburary','March','April','May','June','July','August','September','October','November','December'],

 archives: function(){
       //code logic to return an tree-like array as year --> months --> posts
  }.property('content.length')

});

Now to determine whether each year or month is expanded or not, we need to have a flag for each item. We can make use of itemController (may be an ObjectController) which wraps each item in an array.

{{#each archives itemController="yearItem"}}
    <a {{action toggleProperty 'isExpanded'}}>
        <i {{bindAttr class="isExpanded:icon-chevron-down:icon-chevron-right"}}></i>         {{key}}
     </a><span class="muted"> ({{totalYearPosts}}) </span>

  {{#if isExpanded}}
  {{#each value itemController="monthItem"}}
   <a {{action toggleProperty 'isExpanded'}}> 
     <i {{bindAttr class="isExpanded:icon-chevron-down:icon-chevron-right"}}></i>          {{key}}
   </a> <span class="muted"> ({{value.length}}) </span>

  {{#if isExpanded}}
    {{#each value}}
      {{#linkTo 'post' this}}{{name}}{{/linkTo}}
   {{/each}}
    {{/if}}
  
{{/each}}
  {{/if}}
{{/each}}

The itemControllers are defined as,

App.YearItemController = Ember.ObjectController.extend({

  isExpanded: false,

  totalYearPosts: function(){

    var totalPosts = 0;    

    this.get('content.value').forEach(function(post,idx){

      totalPosts += post.get('value.length');

    })

    return totalPosts;

  }.property()

});

App.MonthItemController = Ember.ObjectController.extend({

  isExpanded: false

});

You can view it in action in the below fiddle.

Intro

Hi to all. This is my first blog post and i'm really excited. Chill a brief intro about me. Myself, Selvaganesh (aka @selvagsz @twitter, g+ and SO), a young front-end developer.  My area of interest involves Javascript, HTML, CSS, Ruby (posses a passion for the web community). I have been using Emberjs (a MVC framework for web-apps) for the past few months and i really love the way the framework makes my work simple. The Emberjs community is growing at a good pace and i'm looking forward to go up with some posts on it.

Catch you soon