javascriptnosqlbook

Basic Charts

Area Chart
Line Chart
Bivariate Area Chart
Multi-Series Line Chart
Stacked Area Chart
Bar Chart
Stacked Bar Chart
Normalized Stacked Bar Chart
Grouped Bar Chart
Scatterplot
Donut Chart
Pie Chart
Donut Multiples
Bar Chart with Negative Values
 
1> Added the angular.js,prototype.js, d3.js in the HTML Page and the reference of the d3 related javascript class.
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="js/areachartProto.js"></script>
<script src="js/angulard3areachart.js"></script>
2> Put the the d3.js related Angular Directive in HTML.
<div id="d3area" angulard3-area-chart datajson="'sample.json'"
                    xaxis-name = ""
                    xaxis-pos = ""
                    yaxis-name = "'Price($)'"
                    yaxis-pos = "12"
                    d3-format= "'%d-%b-%y'">
<!-- angular directive is angulard3-area-chart -->
<!-- directive variables are xaxis-name,yaxis-name,xaxis-pos,yaxis-pos,y axis data format(d3-format)
and finally the datajson variable which is holding the external data source -->
</div>
                
3> The Code in Angular Directive.
angular.module('AngularD3AreaChart', []) // Angular Module Name
     .directive('angulard3AreaChart', function () { // Angular Directive
          return {
             restrict: 'A',
          scope: {
             datajson: '=',
             xaxisName: '=',
             xaxisPos: '=',
             yaxisName: '=',
             yaxisPos: '=',
             d3Format: '='
             // All the Angular Directive Vaiables used as d3.js parameters
                              },
          link: function (scope, elem, attrs) {
                var ourGraph = new AreaChart(scope.datajson,scope.yaxisName,scope.yaxisPos,scope.d3Format);
                //d3 related Variable initialisation
                ourGraph.workOnElement('#'+elem[0].id); // Work on particular element
                ourGraph.generateGraph(); // generate the actual bar graph
         } 
     }
});
                
4> The d3 related bar graph code.
// properties are directly passed to `create` method
var AreaChart = Class.create({
      initialize: function(datajson,yaxisName,yaxisPos,d3Format) {
		this.datajson = datajson;
		this.yaxisName = yaxisName;
		this.yaxisPos = yaxisPos;
		this.d3Format = d3Format;
	  },
	  workOnElement: function(element) {
		this.element = element;
	  },
	  generateGraph: function() {
		//d3 specific coding
            var margin = {
                          top: 20, right: 20, bottom: 30, left: 40},
                          width = 960 - margin.left - margin.right,
                          height = 500 - margin.top - margin.bottom;
                          
            var parseDate = d3.time.format(this.d3Format).parse;
            
            var x = d3.time.scale()
                  .range([0, width]);
                  
            var y = d3.scale.linear()
                .range([height, 0]);
                
            var xAxis = d3.svg.axis()
                .scale(x)
                .orient("bottom");
                
            var yAxis = d3.svg.axis()
                .scale(y)
                .orient("left");
                
            var area = d3.svg.area()
                .x(function(d) { return x(d.date); })
                .y0(height)
                .y1(function(d) { return y(d.close); });
                
            var svg = d3.select(this.element).append("svg")
                .attr("width", width + margin.left + margin.right)
                .attr("height", height + margin.top + margin.bottom)
                .append("g")
                .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
                
            d3.json(this.datajson, function(error, data) {
                data.forEach(function(d) {
                 d.date = parseDate(d.date);
                 d.close = +d.close;
           });	
                if (error) return console.warn(error);
                //console.log(this.xaxisName);
                
                x.domain(d3.extent(data, function(d) { return d.date; }));
                y.domain([0, d3.max(data, function(d) { return d.close; })]);
           
            svg.append("path")
                  .datum(data)
                  .attr("class", "area")
                  .attr("d", area);
                  
            svg.append("g")
                  .attr("class", "x axis")
                  .attr("transform", "translate(0," + height + ")")
                  .call(xAxis);
                  
            svg.append("g")
                  .attr("class", "y axis")
                  .call(yAxis)
                  .append("text")
                  .attr("transform", "rotate(-90)")
                  .attr("y", this.yaxisPos)
                  .attr("dy", ".71em")
                  .style("text-anchor", "end")
                  .text(this.yaxisName);
            }.bind(this));
	 }
});

                
1> Added the angular.js,prototype.js, d3.js in the HTML Page and the reference of the d3 related javascript class.
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="js/areachartProto.js"></script>
<script src="js/angulard3areachart.js"></script>
2> Put the the d3.js related Angular Directive in HTML.
<areachart id="d3area" datajson="sample.json"
                    xaxis-name = ""
                    xaxis-pos = ""
                    yaxis-name = "'Price($)'"
                    yaxis-pos = "12"
                    d3-format= "%d-%b-%y">
<!-- angular directive is areachart -->
<!-- directive variables are xaxis-name,yaxis-name,xaxis-pos,yaxis-pos,y axis data format(d3-format)
and finally the datajson variable which is holding the external data source -->
</div>
                
3> The Code in Angular Directive.
angular.module('AngularD3AreaChart', []) // Angular Module Name
     .directive('areachart', function () { // Angular Directive
        return {
            restrict: 'E', // Directive Scope is Element
            replace: true, // replace original markup with template 
            transclude: false, // not to copy original HTML DOM
            compile: function (elem, attrs) {// the compilation of DOM is done here.
                // It is responsible for produce HTML DOM or it returns a combined link function
                // Further Docuumentation on this - http://docs.angularjs.org/guide/directive
			console.log(attrs.id);
			console.log(attrs.datajson);
                var html = "<div id='" + attrs.id + "' ></div>"; // the HTML to be produced
                var newElem = $(html);
                elem.replaceWith(newElem); // Replacement of the element.
                var ourGraph = new AreaChart(attrs.datajson,attrs.yaxisName,attrs.yaxisPos,attrs.d3Format);
                    ourGraph.workOnElement('#'+attrs.id);
                // Work on particular element
                ourGraph.generateGraph();  // generate the actual bar graph
         } 
     }
});
                
4> The d3 related bar graph code.
// properties are directly passed to `create` method
var AreaChart = Class.create({
      initialize: function(datajson,yaxisName,yaxisPos,d3Format) {
		this.datajson = datajson;
		this.yaxisName = yaxisName;
		this.yaxisPos = yaxisPos;
		this.d3Format = d3Format;
	  },
	  workOnElement: function(element) {
		this.element = element;
	  },
	  generateGraph: function() {
		//d3 specific coding
            var margin = {
                          top: 20, right: 20, bottom: 30, left: 40},
                          width = 960 - margin.left - margin.right,
                          height = 500 - margin.top - margin.bottom;
                          
            var parseDate = d3.time.format(this.d3Format).parse;
            
            var x = d3.time.scale()
                  .range([0, width]);
                  
            var y = d3.scale.linear()
                .range([height, 0]);
                
            var xAxis = d3.svg.axis()
                .scale(x)
                .orient("bottom");
                
            var yAxis = d3.svg.axis()
                .scale(y)
                .orient("left");
                
            var area = d3.svg.area()
                .x(function(d) { return x(d.date); })
                .y0(height)
                .y1(function(d) { return y(d.close); });
                
            var svg = d3.select(this.element).append("svg")
                .attr("width", width + margin.left + margin.right)
                .attr("height", height + margin.top + margin.bottom)
                .append("g")
                .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
                
            d3.json(this.datajson, function(error, data) {
                data.forEach(function(d) {
                 d.date = parseDate(d.date);
                 d.close = +d.close;
           });	
                if (error) return console.warn(error);
                //console.log(this.xaxisName);
                
                x.domain(d3.extent(data, function(d) { return d.date; }));
                y.domain([0, d3.max(data, function(d) { return d.close; })]);
           
            svg.append("path")
                  .datum(data)
                  .attr("class", "area")
                  .attr("d", area);
                  
            svg.append("g")
                  .attr("class", "x axis")
                  .attr("transform", "translate(0," + height + ")")
                  .call(xAxis);
                  
            svg.append("g")
                  .attr("class", "y axis")
                  .call(yAxis)
                  .append("text")
                  .attr("transform", "rotate(-90)")
                  .attr("y", this.yaxisPos)
                  .attr("dy", ".71em")
                  .style("text-anchor", "end")
                  .text(this.yaxisName);
            }.bind(this));
	 }
});

                
Json Data
[
    {"date":"1-May-12","close":"612.33"},
    {"date":"30-Apr-12","close":"513.93"},
    {"date":"27-Apr-12","close":"693.00"},
    {"date":"26-Apr-12","close":"680.50"},
    {"date":"25-Apr-12","close":"630.33"},
    {"date":"24-Apr-12","close":"615.33"},
    {"date":"23-Apr-12","close":"600.33"},
    {"date":"22-Apr-12","close":"585.33"},
    {"date":"21-Apr-12","close":"570.33"},
    {"date":"20-Apr-12","close":"555.00"},
    {"date":"19-Apr-12","close":"540.00"},
    {"date":"18-Apr-12","close":"525.00"},
    {"date":"17-Apr-12","close":"510.00"},
    {"date":"16-Apr-12","close":"495.00"},
    {"date":"15-Apr-12","close":"480.00"}
]
                
 
1> Added the angular.js,prototype.js, d3.js in the HTML Page and the reference of the d3 related javascript class.
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="js/linechartProto.js"></script>
<script src="js/angulard3linechart.js"></script>
2> Put the the d3.js related Angular Directive in HTML.
<div id="d3line" angulard3-line-chart datajson="'sample.json'"
                    xaxis-name = ""
                    xaxis-pos = ""
                    yaxis-name = "'Price($)'"
                    yaxis-pos = "12"
                    d3-format= "'%d-%b-%y'">
<!-- angular directive is angulard3-line-chart -->
<!-- directive variables are xaxis-name,yaxis-name,xaxis-pos,yaxis-pos,y axis data format(d3-format)
and finally the datajson variable which is holding the external data source -->
</div>
                
3> The Code in Angular Directive.
angular.module('AngularD3LineChart', []) // Angular Module Name
     .directive('angulard3LineChart', function () { // Angular Directive
          return {
             restrict: 'A',
          scope: {
             datajson: '=',
             xaxisName: '=',
             xaxisPos: '=',
             yaxisName: '=',
             yaxisPos: '=',
             d3Format: '='
             // All the Angular Directive Vaiables used as d3.js parameters
                              },
          link: function (scope, elem, attrs) {
                var ourGraph = new LineChart(scope.datajson,scope.yaxisName,scope.yaxisPos,scope.d3Format);
                //d3 related Variable initialisation
                ourGraph.workOnElement('#'+elem[0].id); // Work on particular element
                ourGraph.generateGraph(); // generate the actual bar graph
         } 
     }
});
                
4> The d3 related bar graph code.
// properties are directly passed to `create` method
var LineChart = Class.create({
      initialize: function(datajson,yaxisName,yaxisPos,d3Format) {
		this.datajson = datajson;
		this.yaxisName = yaxisName;
		this.yaxisPos = yaxisPos;
		this.d3Format = d3Format;
	  },
	  workOnElement: function(element) {
		this.element = element;
	  },
	  generateGraph: function() {
		//d3 specific coding
            var margin = {
                          top: 20, right: 20, bottom: 30, left: 40},
                          width = 960 - margin.left - margin.right,
                          height = 500 - margin.top - margin.bottom;
                          
            var parseDate = d3.time.format(this.d3Format).parse;
            
            var x = d3.time.scale()
                  .range([0, width]);
                  
            var y = d3.scale.linear()
                .range([height, 0]);
                
            var xAxis = d3.svg.axis()
                .scale(x)
                .orient("bottom");
                
            var yAxis = d3.svg.axis()
                .scale(y)
                .orient("left");
                
            var line = d3.svg.line()
                .x(function(d) { return x(d.date); })
                .y(function(d) { return y(d.close); });
                
            var svg = d3.select(this.element).append("svg")
                .attr("width", width + margin.left + margin.right)
                .attr("height", height + margin.top + margin.bottom)
                .append("g")
                .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
                
            d3.json(this.datajson, function(error, data) {
                data.forEach(function(d) {
                 d.date = parseDate(d.date);
                 d.close = +d.close;
           });	
                if (error) return console.warn(error);
                //console.log(this.xaxisName);
                
                x.domain(d3.extent(data, function(d) { return d.date; }));
                y.domain(d3.extent(data, function(d) { return d.close; }));
           
            svg.append("g")
                .attr("class", "x axis")
                .attr("transform", "translate(0," + height + ")")
                .call(xAxis);
                
            svg.append("g")
                .attr("class", "y axis")
                .call(yAxis)
                .append("text")
                .attr("transform", "rotate(-90)")
                .attr("y", this.yaxisPos)
                .attr("dy", ".71em")
                .style("text-anchor", "end")
                .text(this.yaxisName);
                
            svg.append("path")
                .datum(data)
                .attr("class", "line")
                .attr("d", line);		    
            }.bind(this));
	 }
});

          
1> Added the angular.js,prototype.js, d3.js in the HTML Page and the reference of the d3 related javascript class.
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="js/linechartProto.js"></script>
<script src="js/angulard3linechart.js"></script>
2> Put the the d3.js related Angular Directive in HTML.
<linechart id="d3line" datajson="sample.json"
                    xaxis-name = ""
                    xaxis-pos = ""
                    yaxis-name = "'Price($)'"
                    yaxis-pos = "12"
                    d3-format= "%d-%b-%y">
<!-- angular directive is linechart -->
<!-- directive variables are xaxis-name,yaxis-name,xaxis-pos,yaxis-pos,y axis data format(d3-format)
and finally the datajson variable which is holding the external data source -->
</div>
                
3> The Code in Angular Directive.
angular.module('AngularD3LineChart', []) // Angular Module Name
     .directive('linechart', function () { // Angular Directive
        return {
            restrict: 'E', // Directive Scope is Element
            replace: true, // replace original markup with template 
            transclude: false, // not to copy original HTML DOM
            compile: function (elem, attrs) {// the compilation of DOM is done here.
                // It is responsible for produce HTML DOM or it returns a combined link function
                // Further Docuumentation on this - http://docs.angularjs.org/guide/directive
			console.log(attrs.id);
			console.log(attrs.datajson);
                var html = "<div id='" + attrs.id + "' ></div>"; // the HTML to be produced
                var newElem = $(html);
                elem.replaceWith(newElem); // Replacement of the element.
                var ourGraph = new LineChart(attrs.datajson,attrs.yaxisName,attrs.yaxisPos,attrs.d3Format);
                    ourGraph.workOnElement('#'+attrs.id);
                // Work on particular element
                ourGraph.generateGraph();  // generate the actual bar graph
         } 
     }
});
                
4> The d3 related bar graph code.
// properties are directly passed to `create` method
var LineChart = Class.create({
      initialize: function(datajson,yaxisName,yaxisPos,d3Format) {
		this.datajson = datajson;
		this.yaxisName = yaxisName;
		this.yaxisPos = yaxisPos;
		this.d3Format = d3Format;
	  },
	  workOnElement: function(element) {
		this.element = element;
	  },
	  generateGraph: function() {
		//d3 specific coding
            var margin = {
                          top: 20, right: 20, bottom: 30, left: 40},
                          width = 960 - margin.left - margin.right,
                          height = 500 - margin.top - margin.bottom;
                          
            var parseDate = d3.time.format(this.d3Format).parse;
            
            var x = d3.time.scale()
                  .range([0, width]);
                  
            var y = d3.scale.linear()
                .range([height, 0]);
                
            var xAxis = d3.svg.axis()
                .scale(x)
                .orient("bottom");
                
            var yAxis = d3.svg.axis()
                .scale(y)
                .orient("left");
                
            var line = d3.svg.line()
                .x(function(d) { return x(d.date); })
                .y(function(d) { return y(d.close); });
                
            var svg = d3.select(this.element).append("svg")
                .attr("width", width + margin.left + margin.right)
                .attr("height", height + margin.top + margin.bottom)
                .append("g")
                .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
                
            d3.json(this.datajson, function(error, data) {
                data.forEach(function(d) {
                 d.date = parseDate(d.date);
                 d.close = +d.close;
           });	
                if (error) return console.warn(error);
                //console.log(this.xaxisName);
                
                x.domain(d3.extent(data, function(d) { return d.date; }));
                y.domain(d3.extent(data, function(d) { return d.close; }));
           
            svg.append("g")
                .attr("class", "x axis")
                .attr("transform", "translate(0," + height + ")")
                .call(xAxis);
                
            svg.append("g")
                .attr("class", "y axis")
                .call(yAxis)
                .append("text")
                .attr("transform", "rotate(-90)")
                .attr("y", this.yaxisPos)
                .attr("dy", ".71em")
                .style("text-anchor", "end")
                .text(this.yaxisName);
                
            svg.append("path")
                .datum(data)
                .attr("class", "line")
                .attr("d", line);		    
            }.bind(this));
	 }
});

          
Json Data
[
    {"date":"1-May-12","close":"612.33"},
    {"date":"30-Apr-12","close":"513.93"},
    {"date":"27-Apr-12","close":"693.00"},
    {"date":"26-Apr-12","close":"680.50"},
    {"date":"25-Apr-12","close":"630.33"},
    {"date":"24-Apr-12","close":"615.33"},
    {"date":"23-Apr-12","close":"600.33"},
    {"date":"22-Apr-12","close":"585.33"},
    {"date":"21-Apr-12","close":"570.33"},
    {"date":"20-Apr-12","close":"555.00"},
    {"date":"19-Apr-12","close":"540.00"},
    {"date":"18-Apr-12","close":"525.00"},
    {"date":"17-Apr-12","close":"510.00"},
    {"date":"16-Apr-12","close":"495.00"},
    {"date":"15-Apr-12","close":"480.00"}
]
                
 
1> Added the angular.js,prototype.js, d3.js in the HTML Page and the reference of the d3 related javascript class.
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="js/bivariatechartProto.js"></script>
<script src="js/angulard3bivariatechart.js"></script>
2> Put the the d3.js related Angular Directive in HTML.
<div id="d3bivariate" angulard3-bivariate-chart datajson="'sample.json'"
                    xaxis-name = ""
                    xaxis-pos = ""
                    yaxis-name = "'Temperature (ºF)'"
                    yaxis-pos = "12"
                    d3-format= "'%Y%m%d'">
<!-- angular directive is angulard3-bivariate-chart -->
<!-- directive variables are xaxis-name,yaxis-name,xaxis-pos,yaxis-pos,y axis data format(d3-format)
and finally the datajson variable which is holding the external data source -->
</div>
                
3> The Code in Angular Directive.
angular.module('AngularD3BivariateChart', []) // Angular Module Name
     .directive('angulard3BivariateChart', function () { // Angular Directive
          return {
             restrict: 'A',
          scope: {
             datajson: '=',
             xaxisName: '=',
             xaxisPos: '=',
             yaxisName: '=',
             yaxisPos: '=',
             d3Format: '='
             // All the Angular Directive Vaiables used as d3.js parameters
                              },
          link: function (scope, elem, attrs) {
                var ourGraph = new BivariateChart(scope.datajson,scope.yaxisName,scope.yaxisPos,scope.d3Format);
                //d3 related Variable initialisation
                ourGraph.workOnElement('#'+elem[0].id); // Work on particular element
                ourGraph.generateGraph(); // generate the actual bar graph
         } 
     }
});
                
4> The d3 related bar graph code.
// properties are directly passed to `create` method
var BivariateChart = Class.create({
      initialize: function(datajson,yaxisName,yaxisPos,d3Format) {
		this.datajson = datajson;
		this.yaxisName = yaxisName;
		this.yaxisPos = yaxisPos;
		this.d3Format = d3Format;
	  },
	  workOnElement: function(element) {
		this.element = element;
	  },
	  generateGraph: function() {
		//d3 specific coding
            		var margin = {
                          top: 20, right: 20, bottom: 30, left: 40},
                          width = 960 - margin.left - margin.right,
                          height = 500 - margin.top - margin.bottom;
                          
              		 var parseDate = d3.time.format(this.d3Format).parse;
                     
					 var x = d3.time.scale()
                        .range([0, width]);
                        
                      var y = d3.scale.linear()
                            .range([height, 0]);
                            
                      var xAxis = d3.svg.axis()
                            .scale(x)
                            .orient("bottom");
                            
                     var yAxis = d3.svg.axis()
                            .scale(y)
                            .orient("left");
                            
                      var area = d3.svg.area()
                            .x(function(d) { return x(d.date); })
                            .y0(function(d) { return y(d.low); })
                            .y1(function(d) { return y(d.high); });
                            
                     var svg = d3.select(this.element).append("svg")
                            .attr("width", width + margin.left + margin.right)
                            .attr("height", height + margin.top + margin.bottom)
                            .append("g")
                            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
                            
                    d3.json(this.datajson, function(error, data) {
                          data.forEach(function(d) {
                            d.date = parseDate(d.date);
                            d.low = +d.low;
                            d.high = +d.high;
                          });
                          
                           if (error) return console.warn(error);
                            //console.log(this.xaxisName);    
                                             
                          x.domain(d3.extent(data, function(d) { return d.date; }));
                          y.domain([d3.min(data, function(d) { return d.low; }), d3.max(data, function(d) { return d.high; })]);
                          
                    svg.append("path")
                              .datum(data)
                              .attr("class", "area")
                              .attr("d", area);
                              
                    svg.append("g")
                              .attr("class", "x axis")
                              .attr("transform", "translate(0," + height + ")")
                              .call(xAxis);
                              
                    svg.append("g")
                              .attr("class", "y axis")
                              .call(yAxis)
                              .append("text")
                              .attr("transform", "rotate(-90)")
                              .attr("y", this.yaxisPos)
                              .attr("dy", ".71em")
                              .style("text-anchor", "end")
                              .text(this.yaxisName);            		    
            }.bind(this));
	 }
});

          
1> Added the angular.js,prototype.js, d3.js in the HTML Page and the reference of the d3 related javascript class.
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="js/bivariatechartProto.js"></script>
<script src="js/angulard3bivariatechart.js"></script>
2> Put the the d3.js related Angular Directive in HTML.
<bivariatechart id="d3bivariate" datajson="sample.json"
                    xaxis-name = ""
                    xaxis-pos = ""
                    yaxis-name = "'Temperature (ºF)'"
                    yaxis-pos = "12"
                    d3-format= "%Y%m%d">
<!-- angular directive is bivariatechart -->
<!-- directive variables are xaxis-name,yaxis-name,xaxis-pos,yaxis-pos,y axis data format(d3-format)
and finally the datajson variable which is holding the external data source -->
</div>
                
3> The Code in Angular Directive.
angular.module('AngularD3BivariateChart', []) // Angular Module Name
     .directive('bivariatechart', function () { // Angular Directive
        return {
            restrict: 'E', // Directive Scope is Element
            replace: true, // replace original markup with template 
            transclude: false, // not to copy original HTML DOM
            compile: function (elem, attrs) {// the compilation of DOM is done here.
                // It is responsible for produce HTML DOM or it returns a combined link function
                // Further Docuumentation on this - http://docs.angularjs.org/guide/directive
			console.log(attrs.id);
			console.log(attrs.datajson);
                var html = "<div id='" + attrs.id + "' ></div>"; // the HTML to be produced
                var newElem = $(html);
                elem.replaceWith(newElem); // Replacement of the element.
                var ourGraph = new BivariateChart(attrs.datajson,attrs.yaxisName,attrs.yaxisPos,attrs.d3Format);
                    ourGraph.workOnElement('#'+attrs.id);
                // Work on particular element
                ourGraph.generateGraph();  // generate the actual bar graph
         } 
     }
});
                
4> The d3 related bar graph code.
// properties are directly passed to `create` method
var BivariateChart = Class.create({
      initialize: function(datajson,yaxisName,yaxisPos,d3Format) {
		this.datajson = datajson;
		this.yaxisName = yaxisName;
		this.yaxisPos = yaxisPos;
		this.d3Format = d3Format;
	  },
	  workOnElement: function(element) {
		this.element = element;
	  },
	  generateGraph: function() {
		//d3 specific coding
            		var margin = {
                          top: 20, right: 20, bottom: 30, left: 40},
                          width = 960 - margin.left - margin.right,
                          height = 500 - margin.top - margin.bottom;
                          
              		 var parseDate = d3.time.format(this.d3Format).parse;
                     
					 var x = d3.time.scale()
                        .range([0, width]);
                        
                      var y = d3.scale.linear()
                            .range([height, 0]);
                            
                      var xAxis = d3.svg.axis()
                            .scale(x)
                            .orient("bottom");
                            
                     var yAxis = d3.svg.axis()
                            .scale(y)
                            .orient("left");
                            
                      var area = d3.svg.area()
                            .x(function(d) { return x(d.date); })
                            .y0(function(d) { return y(d.low); })
                            .y1(function(d) { return y(d.high); });
                            
                     var svg = d3.select(this.element).append("svg")
                            .attr("width", width + margin.left + margin.right)
                            .attr("height", height + margin.top + margin.bottom)
                            .append("g")
                            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
                            
                    d3.json(this.datajson, function(error, data) {
                          data.forEach(function(d) {
                            d.date = parseDate(d.date);
                            d.low = +d.low;
                            d.high = +d.high;
                          });
                          
                           if (error) return console.warn(error);
                            //console.log(this.xaxisName);    
                                             
                          x.domain(d3.extent(data, function(d) { return d.date; }));
                          y.domain([d3.min(data, function(d) { return d.low; }), d3.max(data, function(d) { return d.high; })]);
                          
                    svg.append("path")
                              .datum(data)
                              .attr("class", "area")
                              .attr("d", area);
                              
                    svg.append("g")
                              .attr("class", "x axis")
                              .attr("transform", "translate(0," + height + ")")
                              .call(xAxis);
                              
                    svg.append("g")
                              .attr("class", "y axis")
                              .call(yAxis)
                              .append("text")
                              .attr("transform", "rotate(-90)")
                              .attr("y", this.yaxisPos)
                              .attr("dy", ".71em")
                              .style("text-anchor", "end")
                              .text(this.yaxisName);            		    
            }.bind(this));
	 }
});

          
Json Data
[
     {"date":"20101001","high":"59.5","low":"57.0"},
     {"date":"20101002","high":"59.5","low":"53.4"},
     {"date":"20101003","high":"59.0","low":"53.4"},
     {"date":"20101004","high":"59.4","low":"57.4"},
     {"date":"20101005","high":"58.5","low":"52.7"},
     {"date":"20101006","high":"62.5","low":"54.7"},
     {"date":"20101007","high":"60.8","low":"53.5"},
     {"date":"20101008","high":"61.0","low":"52.5"},
     {"date":"20101009","high":"62.5","low":"52.9"},
     {"date":"20101010","high":"65.5","low":"54.0"},
     {"date":"20101011","high":"70.3","low":"55.0"},
     {"date":"20101012","high":"82.2","low":"58.6"},
     {"date":"20101014","high":"75.7","low":"57.7"},
     {"date":"20101016","high":"56.3","low":"52.7"},
     {"date":"20101017","high":"54.3","low":"51.8"},
     {"date":"20101018","high":"54.9","low":"51.4"},
     {"date":"20101019","high":"54.7","low":"50.2"}
]

                
 
1> Added the angular.js,prototype.js, d3.js in the HTML Page and the reference of the d3 related javascript class.
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="js/multilinechartProto.js"></script>
<script src="js/angulard3multilinechart.js"></script>
2> Put the the d3.js related Angular Directive in HTML.
<div id="d3multiline" angulard3-multiline-chart datajson="'sample.json'"
                    xaxis-name = ""
                    xaxis-pos = ""
                    yaxis-name = "'Temperature (ºF)'"
                    yaxis-pos = "12"
                    d3-format= "'%Y%m%d'">
<!-- angular directive is angulard3-multiline-chart -->
<!-- directive variables are xaxis-name,yaxis-name,xaxis-pos,yaxis-pos,y axis data format(d3-format)
and finally the datajson variable which is holding the external data source -->
</div>
                
3> The Code in Angular Directive.
angular.module('AngularD3MultilineChart', []) // Angular Module Name
     .directive('angulard3MultilineChart', function () { // Angular Directive
          return {
             restrict: 'A',
          scope: {
             datajson: '=',
             xaxisName: '=',
             xaxisPos: '=',
             yaxisName: '=',
             yaxisPos: '=',
             d3Format: '='
             // All the Angular Directive Vaiables used as d3.js parameters
                              },
          link: function (scope, elem, attrs) {
                var ourGraph = new MultilineChart(scope.datajson,scope.yaxisName,scope.yaxisPos,scope.d3Format);
                //d3 related Variable initialisation
                ourGraph.workOnElement('#'+elem[0].id); // Work on particular element
                ourGraph.generateGraph(); // generate the actual bar graph
         } 
     }
});
                
4> The d3 related bar graph code.
// properties are directly passed to `create` method
var MultilineChart = Class.create({
      initialize: function(datajson,yaxisName,yaxisPos,d3Format) {
		this.datajson = datajson;
		this.yaxisName = yaxisName;
		this.yaxisPos = yaxisPos;
		this.d3Format = d3Format;
	  },
	  workOnElement: function(element) {
		this.element = element;
	  },
	  generateGraph: function() {
		//d3 specific coding
                var margin = {
                            top: 20, right: 80, bottom: 30, left: 50},
                            width = 960 - margin.left - margin.right,
                            height = 500 - margin.top - margin.bottom;
                            
                var parseDate = d3.time.format(this.d3Format).parse;
                
                var x = d3.time.scale()
                    	.range([0, width]);
                        
                var y = d3.scale.linear()
                        .range([height, 0]);
                        
                var color = d3.scale.category10();
                
                var xAxis = d3.svg.axis()
                            .scale(x)
                            .orient("bottom");
                            
                var yAxis = d3.svg.axis()
                            .scale(y)
                            .orient("left");
                            
                var line = d3.svg.line()
                    .interpolate("basis")
                    .x(function(d) { return x(d.date); })
                    .y(function(d) { return y(d.temperature); });
                    
                var svg = d3.select(this.element).append("svg")
                            .attr("width", width + margin.left + margin.right)
                            .attr("height", height + margin.top + margin.bottom)
                            .append("g")
                    		.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
                            
                d3.json(this.datajson, function(error, data) { 
                        color.domain(d3.keys(data[0]).filter(function(key) { return key !== "date"; }));
                        data.forEach(function(d) {
                        d.date = parseDate(d.date);
                        });
                        
                var cities = color.domain().map(function(name) {
                                return {
                                name: name,
                                values: data.map(function(d) {
                                return {date: d.date, temperature: +d[name]};
                            })
                        };
                    });
                    
                if (error) return console.warn(error);
                //console.log(this.xaxisName); 
                
                x.domain(d3.extent(data, function(d) { return d.date; }));
                
                y.domain([
                        d3.min(cities, function(c) { return d3.min(c.values, function(v) { return v.temperature; }); }),
                        d3.max(cities, function(c) { return d3.max(c.values, function(v) { return v.temperature; }); })
                        ]);
                        
        		 svg.append("g")
                          .attr("class", "x axis")
                          .attr("transform", "translate(0," + height + ")")
                          .call(xAxis);
                          
    			svg.append("g")
                             .attr("class", "y axis")
                             .call(yAxis)
                            .append("text")
                            .attr("transform", "rotate(-90)")
                            .attr("y", this.yaxisPos)
                            .attr("dy", ".71em")
                            .style("text-anchor", "end")
                            .text(this.yaxisName);
                            
                var city = svg.selectAll(".city")
                              .data(cities)
                              .enter().append("g")
                              .attr("class", "city");
                              .city.append("path")
                              .attr("class", "line")
                              .attr("d", function(d) { return line(d.values); })
                              .style("stroke", function(d) { return color(d.name); });
                              
                city.append("text")
                     .datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; })
                     .attr("transform", function(d) { return "translate(" + x(d.value.date) + "," + y(d.value.temperature) + ")"; })
                     .attr("x", 3)
                     .attr("dy", ".35em")
                     .text(function(d) { return d.name; });   		    
            }.bind(this));
	 }
});

          
1> Added the angular.js,prototype.js, d3.js in the HTML Page and the reference of the d3 related javascript class.
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="js/multilinechartProto.js"></script>
<script src="js/angulard3multilinechart.js"></script>
2> Put the the d3.js related Angular Directive in HTML.
<multilinechart id="d3multiline" datajson="sample.json"
                    xaxis-name = ""
                    xaxis-pos = ""
                    yaxis-name = "'Temperature (ºF)'"
                    yaxis-pos = "12"
                    d3-format= "%Y%m%d">
<!-- angular directive is multilinechart -->
<!-- directive variables are xaxis-name,yaxis-name,xaxis-pos,yaxis-pos,y axis data format(d3-format)
and finally the datajson variable which is holding the external data source -->
</div>
                
3> The Code in Angular Directive.
angular.module('AngularD3MultilineChart', []) // Angular Module Name
     .directive('multilinechart', function () { // Angular Directive
        return {
            restrict: 'E', // Directive Scope is Element
            replace: true, // replace original markup with template 
            transclude: false, // not to copy original HTML DOM
            compile: function (elem, attrs) {// the compilation of DOM is done here.
                // It is responsible for produce HTML DOM or it returns a combined link function
                // Further Docuumentation on this - http://docs.angularjs.org/guide/directive
			console.log(attrs.id);
			console.log(attrs.datajson);
                var html = "<div id='" + attrs.id + "' ></div>"; // the HTML to be produced
                var newElem = $(html);
                elem.replaceWith(newElem); // Replacement of the element.
                var ourGraph = new MultilineChart(attrs.datajson,attrs.yaxisName,attrs.yaxisPos,attrs.d3Format);
                    ourGraph.workOnElement('#'+attrs.id);
                // Work on particular element
                ourGraph.generateGraph();  // generate the actual bar graph
         } 
     }
});
                
4> The d3 related bar graph code.
// properties are directly passed to `create` method
var MultilineChart = Class.create({
      initialize: function(datajson,yaxisName,yaxisPos,d3Format) {
		this.datajson = datajson;
		this.yaxisName = yaxisName;
		this.yaxisPos = yaxisPos;
		this.d3Format = d3Format;
	  },
	  workOnElement: function(element) {
		this.element = element;
	  },
	  generateGraph: function() {
		//d3 specific coding
                var margin = {
                            top: 20, right: 80, bottom: 30, left: 50},
                            width = 960 - margin.left - margin.right,
                            height = 500 - margin.top - margin.bottom;
                            
                var parseDate = d3.time.format(this.d3Format).parse;
                
                var x = d3.time.scale()
                    	.range([0, width]);
                        
                var y = d3.scale.linear()
                        .range([height, 0]);
                        
                var color = d3.scale.category10();
                
                var xAxis = d3.svg.axis()
                            .scale(x)
                            .orient("bottom");
                            
                var yAxis = d3.svg.axis()
                            .scale(y)
                            .orient("left");
                            
                var line = d3.svg.line()
                    .interpolate("basis")
                    .x(function(d) { return x(d.date); })
                    .y(function(d) { return y(d.temperature); });
                    
                var svg = d3.select(this.element).append("svg")
                            .attr("width", width + margin.left + margin.right)
                            .attr("height", height + margin.top + margin.bottom)
                            .append("g")
                    		.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
                            
                d3.json(this.datajson, function(error, data) { 
                        color.domain(d3.keys(data[0]).filter(function(key) { return key !== "date"; }));
                        data.forEach(function(d) {
                        d.date = parseDate(d.date);
                        });
                        
                var cities = color.domain().map(function(name) {
                                return {
                                name: name,
                                values: data.map(function(d) {
                                return {date: d.date, temperature: +d[name]};
                            })
                        };
                    });
                    
                if (error) return console.warn(error);
                //console.log(this.xaxisName); 
                
                x.domain(d3.extent(data, function(d) { return d.date; }));
                
                y.domain([
                        d3.min(cities, function(c) { return d3.min(c.values, function(v) { return v.temperature; }); }),
                        d3.max(cities, function(c) { return d3.max(c.values, function(v) { return v.temperature; }); })
                        ]);
                        
        		 svg.append("g")
                          .attr("class", "x axis")
                          .attr("transform", "translate(0," + height + ")")
                          .call(xAxis);
                          
    			svg.append("g")
                             .attr("class", "y axis")
                             .call(yAxis)
                            .append("text")
                            .attr("transform", "rotate(-90)")
                            .attr("y", this.yaxisPos)
                            .attr("dy", ".71em")
                            .style("text-anchor", "end")
                            .text(this.yaxisName);
                            
                var city = svg.selectAll(".city")
                              .data(cities)
                              .enter().append("g")
                              .attr("class", "city");
                              .city.append("path")
                              .attr("class", "line")
                              .attr("d", function(d) { return line(d.values); })
                              .style("stroke", function(d) { return color(d.name); });
                              
                city.append("text")
                     .datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; })
                     .attr("transform", function(d) { return "translate(" + x(d.value.date) + "," + y(d.value.temperature) + ")"; })
                     .attr("x", 3)
                     .attr("dy", ".35em")
                     .text(function(d) { return d.name; });   		    
            }.bind(this));
	 }
});

          
Json Data
[
     {"date":"20101001","New York":"59.5","San Francisco":"57.0","Austin":"72.2"},
     {"date":"20101002","New York":"59.5","San Francisco":"53.4","Austin":"67.7"},
     {"date":"20101003","New York":"59.0","San Francisco":"53.4","Austin":"69.4"},
     {"date":"20101004","New York":"59.4","San Francisco":"57.4","Austin":"68.0"},
     {"date":"20101005","New York":"58.5","San Francisco":"42.7","Austin":"72.4"},
     {"date":"20101006","New York":"62.5","San Francisco":"54.7","Austin":"77.0"},
     {"date":"20101007","New York":"60.8","San Francisco":"53.5","Austin":"82.3"},
     {"date":"20101008","New York":"61.0","San Francisco":"52.5","Austin":"78.9"},
     {"date":"20101009","New York":"62.5","San Francisco":"52.9","Austin":"75.3"},
     {"date":"20101010","New York":"65.5","San Francisco":"54.0","Austin":"66.6"},
     {"date":"20111011","New York":"68.7","San Francisco":"61.1","Austin":"70.3"},
     {"date":"20111012","New York":"61.8","San Francisco":"61.5","Austin":"75.3"},
     {"date":"20111013","New York":"63.0","San Francisco":"64.3","Austin":"76.6"},
     {"date":"20111014","New York":"66.9","San Francisco":"87.1","Austin":"66.6"},
     {"date":"20111015","New York":"61.7","San Francisco":"64.6","Austin":"68.0"},
     {"date":"20111016","New York":"61.8","San Francisco":"61.6","Austin":"70.6"},
     {"date":"20111017","New York":"62.8","San Francisco":"61.1","Austin":"71.1"},
     {"date":"20111018","New York":"60.8","San Francisco":"59.2","Austin":"70.0"},
     {"date":"20111019","New York":"62.1","San Francisco":"58.9","Austin":"61.6"},
     {"date":"20111020","New York":"65.1","San Francisco":"57.2","Austin":"37.4"}
]

                
 
1> Added the angular.js,prototype.js, d3.js in the HTML Page and the reference of the d3 related javascript class.
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="js/stackedareaProto.js"></script>
<script src="js/angulard3stackedarea.js"></script>
2> Put the the d3.js related Angular Directive in HTML.
<div id="d3stackarea" angulard3-stackarea-chart datajson="'sample.json'"
                    xaxis-name = ""
                    xaxis-pos = ""
                    yaxis-name = ""
                    yaxis-pos = "12"
                    d3-format= "'%y-%b-%d'">
<!-- angular directive is angulard3-stackarea-chart -->
<!-- directive variables are xaxis-name,yaxis-name,xaxis-pos,yaxis-pos,y axis data format(d3-format)
and finally the datajson variable which is holding the external data source -->
</div>
                
3> The Code in Angular Directive.
angular.module('AngularD3StackareaChart', []) // Angular Module Name
     .directive('angulard3StackareaChart', function () { // Angular Directive
          return {
             restrict: 'A',
          scope: {
             datajson: '=',
             xaxisName: '=',
             xaxisPos: '=',
             yaxisName: '=',
             yaxisPos: '=',
             d3Format: '='
             // All the Angular Directive Vaiables used as d3.js parameters
                              },
          link: function (scope, elem, attrs) {
                var ourGraph = new StackareaChart(scope.datajson,scope.d3Format);
                //d3 related Variable initialisation
                ourGraph.workOnElement('#'+elem[0].id); // Work on particular element
                ourGraph.generateGraph(); // generate the actual bar graph
         } 
     }
});
                
4> The d3 related bar graph code.
// properties are directly passed to `create` method
var StackareaChart = Class.create({
      initialize: function(datajson,d3Format) {
		this.datajson = datajson;
		this.d3Format = d3Format;
	  },
	  workOnElement: function(element) {
		this.element = element;
	  },
	  generateGraph: function() {
		//d3 specific coding
                var margin = {
                            top: 20, right: 20, bottom: 30, left: 50},
                            width = 960 - margin.left - margin.right,
                            height = 500 - margin.top - margin.bottom;
                            
                var parseDate = d3.time.format(this.d3Format).parse,
                formatPercent = d3.format(".0%");
                
                var x = d3.time.scale()
                		.range([0, width]);
                        
                var y = d3.scale.linear()
                		.range([height, 0]);
                        
                var color = d3.scale.category20();
                
                var xAxis = d3.svg.axis()
                            .scale(x)
                            .orient("bottom");
                            
                var yAxis = d3.svg.axis()
                            .scale(y)
                            .orient("left")
                            .tickFormat(formatPercent);
                            
                var area = d3.svg.area()
                            .x(function(d) { return x(d.date); })
                            .y0(function(d) { return y(d.y0); })
                            .y1(function(d) { return y(d.y0 + d.y); });
                            
                var stack = d3.layout.stack()
                            .values(function(d) { return d.values; });
                            
                var svg = d3.select(this.element).append("svg")
                            .attr("width", width + margin.left + margin.right)
                            .attr("height", height + margin.top + margin.bottom)
                            .append("g")
                            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
                            
                d3.json(this.datajson, function(error, data) {
                        color.domain(d3.keys(data[0]).filter(function(key) { return key !== "date"; }));
                        data.forEach(function(d) {
                        d.date = parseDate(d.date);
                	});
                    
                var browsers = stack(color.domain().map(function(name) {
                			return {
                                name: name,
                                values: data.map(function(d) {
                                return {date: d.date, y: d[name] / 100};
                            })
                        };
                }));
                        
                x.domain(d3.extent(data, function(d) { return d.date; }));
                
                var browser = svg.selectAll(".browser")
                            .data(browsers)
                            .enter().append("g")
                            .attr("class", "browser");
                            
                browser.append("path")
                        .attr("class", "area")
                        .attr("d", function(d) { return area(d.values); })
                        .style("fill", function(d) { return color(d.name); });
                        
                browser.append("text")
                        .datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; })
                        .attr("transform", function(d) { return "translate(" + x(d.value.date) + "," + y(d.value.y0 + d.value.y / 2) + ")"; })
                        .attr("x", -6)
                        .attr("dy", ".35em")
                        .text(function(d) { return d.name; });
                        
                svg.append("g")
                    .attr("class", "x axis")
                    .attr("transform", "translate(0," + height + ")")
                    .call(xAxis);
                    
                svg.append("g")
                    .attr("class", "y axis")
                    .call(yAxis); 		    
            }.bind(this));
	 }
});

          
1> Added the angular.js,prototype.js, d3.js in the HTML Page and the reference of the d3 related javascript class.
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="js/stackedareaProto.js"></script>
<script src="js/angulard3stackedarea.js"></script>
2> Put the the d3.js related Angular Directive in HTML.
<stackareachart id="d3stackarea" datajson="sample.json"
                    xaxis-name = ""
                    xaxis-pos = ""
                    yaxis-name = ""
                    yaxis-pos = "12"
                    d3-format= "%y-%b-%d">
<!-- angular directive is stackareachart -->
<!-- directive variables are xaxis-name,yaxis-name,xaxis-pos,yaxis-pos,y axis data format(d3-format)
and finally the datajson variable which is holding the external data source -->
</div>
                
3> The Code in Angular Directive.
angular.module('AngularD3StackareaChart', []) // Angular Module Name
     .directive('stackareachart', function () { // Angular Directive
        return {
            restrict: 'E', // Directive Scope is Element
            replace: true, // replace original markup with template 
            transclude: false, // not to copy original HTML DOM
            compile: function (elem, attrs) {// the compilation of DOM is done here.
                // It is responsible for produce HTML DOM or it returns a combined link function
                // Further Docuumentation on this - http://docs.angularjs.org/guide/directive
			console.log(attrs.id);
			console.log(attrs.datajson);
                var html = "<div id='" + attrs.id + "' ></div>"; // the HTML to be produced
                var newElem = $(html);
                elem.replaceWith(newElem); // Replacement of the element.
                var ourGraph = new StackareaChart(attrs.datajson,attrs.d3Format);
                    ourGraph.workOnElement('#'+attrs.id);
                // Work on particular element
                ourGraph.generateGraph();  // generate the actual bar graph
         } 
     }
});
                
4> The d3 related bar graph code.
// properties are directly passed to `create` method
var StackareaChart = Class.create({
      initialize: function(datajson,d3Format) {
		this.datajson = datajson;
		this.d3Format = d3Format;
	  },
	  workOnElement: function(element) {
		this.element = element;
	  },
	  generateGraph: function() {
		//d3 specific coding
                var margin = {
                            top: 20, right: 20, bottom: 30, left: 50},
                            width = 960 - margin.left - margin.right,
                            height = 500 - margin.top - margin.bottom;
                            
                var parseDate = d3.time.format(this.d3Format).parse,
                formatPercent = d3.format(".0%");
                
                var x = d3.time.scale()
                		.range([0, width]);
                        
                var y = d3.scale.linear()
                		.range([height, 0]);
                        
                var color = d3.scale.category20();
                
                var xAxis = d3.svg.axis()
                            .scale(x)
                            .orient("bottom");
                            
                var yAxis = d3.svg.axis()
                            .scale(y)
                            .orient("left")
                            .tickFormat(formatPercent);
                            
                var area = d3.svg.area()
                            .x(function(d) { return x(d.date); })
                            .y0(function(d) { return y(d.y0); })
                            .y1(function(d) { return y(d.y0 + d.y); });
                            
                var stack = d3.layout.stack()
                            .values(function(d) { return d.values; });
                            
                var svg = d3.select(this.element).append("svg")
                            .attr("width", width + margin.left + margin.right)
                            .attr("height", height + margin.top + margin.bottom)
                            .append("g")
                            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
                            
                d3.json(this.datajson, function(error, data) {
                        color.domain(d3.keys(data[0]).filter(function(key) { return key !== "date"; }));
                        data.forEach(function(d) {
                        d.date = parseDate(d.date);
                	});
                    
                var browsers = stack(color.domain().map(function(name) {
                			return {
                                name: name,
                                values: data.map(function(d) {
                                return {date: d.date, y: d[name] / 100};
                            })
                        };
                }));
                        
                x.domain(d3.extent(data, function(d) { return d.date; }));
                
                var browser = svg.selectAll(".browser")
                            .data(browsers)
                            .enter().append("g")
                            .attr("class", "browser");
                            
                browser.append("path")
                        .attr("class", "area")
                        .attr("d", function(d) { return area(d.values); })
                        .style("fill", function(d) { return color(d.name); });
                        
                browser.append("text")
                        .datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; })
                        .attr("transform", function(d) { return "translate(" + x(d.value.date) + "," + y(d.value.y0 + d.value.y / 2) + ")"; })
                        .attr("x", -6)
                        .attr("dy", ".35em")
                        .text(function(d) { return d.name; });
                        
                svg.append("g")
                    .attr("class", "x axis")
                    .attr("transform", "translate(0," + height + ")")
                    .call(xAxis);
                    
                svg.append("g")
                    .attr("class", "y axis")
                    .call(yAxis); 		    
            }.bind(this));
	 }
});

          
Json Data
[
     {"date":"11-Oct-13","IE":"41.62","Chrome":"22.36","Firefox":"25.58","Safari":"9.13","Opera":"1.22"},
     {"date":"11-Oct-14","IE":"41.95","Chrome":"22.15","Firefox":"25.78","Safari":"8.79","Opera":"1.25"},
     {"date":"11-Oct-15","IE":"37.64","Chrome":"24.77","Firefox":"25.96","Safari":"10.16","Opera":"1.39"},
     {"date":"11-Oct-16","IE":"37.27","Chrome":"24.65","Firefox":"25.98","Safari":"10.59","Opera":"1.44"},
     {"date":"11-Oct-17","IE":"42.74","Chrome":"21.87","Firefox":"25.01","Safari":"9.12","Opera":"1.17"},
     {"date":"11-Oct-18","IE":"42.14","Chrome":"22.22","Firefox":"25.26","Safari":"9.1","Opera":"1.19"},
     {"date":"11-Oct-19","IE":"41.92","Chrome":"22.42","Firefox":"25.3","Safari":"9.07","Opera":"1.21"},
     {"date":"11-Oct-20","IE":"42.41","Chrome":"22.08","Firefox":"25.28","Safari":"8.94","Opera":"1.18"},
     {"date":"11-Oct-21","IE":"42.74","Chrome":"22.23","Firefox":"25.19","Safari":"8.5","Opera":"1.25"},
     {"date":"11-Oct-22","IE":"36.95","Chrome":"25.45","Firefox":"26.03","Safari":"10.06","Opera":"1.42"},
     {"date":"11-Oct-23","IE":"37.52","Chrome":"24.73","Firefox":"25.79","Safari":"10.46","Opera":"1.43"},
     {"date":"11-Oct-24","IE":"42.69","Chrome":"22.14","Firefox":"24.95","Safari":"8.98","Opera":"1.15"},
     {"date":"11-Oct-25","IE":"42.31","Chrome":"22.26","Firefox":"25.1","Safari":"9.04","Opera":"1.2"},
     {"date":"11-Oct-26","IE":"42.22","Chrome":"22.28","Firefox":"25.17","Safari":"9.08","Opera":"1.16"}, 
     {"date":"11-Oct-27","IE":"42.62","Chrome":"22.36","Firefox":"24.98","Safari":"8.8","Opera":"1.15"},
     {"date":"11-Oct-28","IE":"42.76","Chrome":"22.36","Firefox":"25.05","Safari":"8.55","Opera":"1.19"},
     {"date":"11-Oct-29","IE":"38.92","Chrome":"24.36","Firefox":"25.34","Safari":"9.99","Opera":"1.3"},
     {"date":"11-Oct-30","IE":"38.06","Chrome":"24.58","Firefox":"25.63","Safari":"10.26","Opera":"1.39"},
     {"date":"11-Oct-31","IE":"42.1","Chrome":"22.45","Firefox":"25.18","Safari":"8.97","Opera":"1.2"}
]

                
 
1> Added the angular.js,prototype.js, d3.js in the HTML Page and the reference of the d3 related javascript class.
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="js/barGraphProto.js"></script>
<script src="js/angulard3bargraph.js"></script>
2> Put the the d3.js related Angular Directive in HTML.
<div id="d3bar" angulard3-bar-graph datajson="'sample.json'"
                    xaxis-name = "'Year'"
                    xaxis-pos = "'905'"
                    yaxis-name = "'Frequency'"
                    yaxis-pos = "12"
                    d3-format= "'.0%'">
<!-- angular directive is angulard3-bar-graph -->
<!-- directive variables are xaxis-name,yaxis-name,xaxis-pos,yaxis-pos,y axis data format(d3-format)
and finally the datajson variable which is holding the external data source -->
</div>
                
3> The Code in Angular Directive.
angular.module('AngularD3BarGraph', []) // Angular Module Name
     .directive('angulard3BarGraph', function () { // Angular Directive
          return {
             restrict: 'A',
          scope: {
             datajson: '=',
             xaxisName: '=',
             xaxisPos: '=',
             yaxisName: '=',
             yaxisPos: '=',
             d3Format: '='
             // All the Angular Directive Vaiables used as d3.js parameters
                              },
          link: function (scope, elem, attrs) {
                var ourGraph = new BarGraph(scope.datajson,scope.xaxisName,scope.xaxisPos,scope.yaxisName,scope.yaxisPos,scope.d3Format);
                //d3 related Variable initialisation
                ourGraph.workOnElement('#'+elem[0].id); // Work on particular element
                ourGraph.generateGraph(); // generate the actual bar graph
         } 
     }
});
                
4> The d3 related bar graph code.
// properties are directly passed to `create` method
  var BarGraph = Class.create({
                    initialize: function(datajson,xaxisName,xaxisPos,yaxisName,yaxisPos,d3Format) {
                        this.datajson = datajson;
                        this.xaxisName = xaxisName;
                        this.xaxisPos = xaxisPos;
                        this.yaxisName = yaxisName;
                        this.yaxisPos = yaxisPos;
                        this.d3Format = d3Format;
                    },
                workOnElement: function(element) {
                		this.element = element;
                },
                generateGraph: function() {
                //d3 specific coding
                var margin = {
                            top: 20, right: 20, bottom: 30, left: 40},
                            width = 960 - margin.left - margin.right,
                            height = 500 - margin.top - margin.bottom;
                            
                var formatPercent = d3.format(this.d3Format);
                
                var x = d3.scale.ordinal()
                		.rangeRoundBands([0, width], .1);
                        
                var y = d3.scale.linear()
                		.range([height, 0]);
                        
                var xAxis = d3.svg.axis()
                        .scale(x)
                        .orient("bottom");
                        
                var yAxis = d3.svg.axis()
                        .scale(y)
                        .orient("left")
                        .tickFormat(formatPercent);
                        
                var svg = d3.select(this.element).append("svg")
                            .attr("width", width + margin.left + margin.right)
                            .attr("height", height + margin.top + margin.bottom)
                            .append("g")
                            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
                            
                d3.json(this.datajson, function(error, data) {
                        if (error) return console.warn(error);
                        //console.log(this.xaxisName);
                        x.domain(data.map(function(d) { return d.letter; }));
                        y.domain([0, d3.max(data, function(d) { return d.frequency; })]);
                        
                svg.append("g")
                    .attr("class", "x axis")
                    .attr("transform", "translate(0," + height + ")")
                    .call(xAxis)
                    .append("text")
                    .attr("x", this.xaxisPos)
                    .attr("dx", ".71em")
                    .style("text-anchor", "end")
                    .text(this.xaxisName);
                    
                svg.append("g")
                    .attr("class", "y axis")
                    .call(yAxis)
                    .append("text")
                    .attr("transform", "rotate(-90)")
                    .attr("y", this.yaxisPos)
                    .attr("dy", ".71em")
                    .style("text-anchor", "end")
                    .text(this.yaxisName);
                    
                svg.selectAll(".bar")
                    .data(data)
                    .enter().append("rect")
                    .attr("class", "bar")
                    .attr("x", function(d) { return x(d.letter); })
                    .attr("width", x.rangeBand())
                    .attr("y", function(d) { return y(d.frequency); })
                    .attr("height", function(d) { return height - y(d.frequency); });	 		    
            }.bind(this));
	 }
});

          
1> Added the angular.js,prototype.js, d3.js in the HTML Page and the reference of the d3 related javascript class.
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="js/barGraphProto.js"></script>
<script src="js/angulard3bargraph.js"></script>
2> Put the the d3.js related Angular Directive in HTML.
<bargraph id="d3bar" datajson="sample.json"
                    xaxis-name = "Year"
                    xaxis-pos = "905"
                    yaxis-name = "Frequency"
                    yaxis-pos = "12"
                    d3-format= ".0%">
<!-- angular directive is bargraph -->
<!-- directive variables are xaxis-name,yaxis-name,xaxis-pos,yaxis-pos,y axis data format(d3-format)
and finally the datajson variable which is holding the external data source -->
</div>
                
3> The Code in Angular Directive.
angular.module('AngularD3BarGraph', []) // Angular Module Name
     .directive('bargraph', function () { // Angular Directive
        return {
            restrict: 'E', // Directive Scope is Element
            replace: true, // replace original markup with template 
            transclude: false, // not to copy original HTML DOM
            compile: function (elem, attrs) {// the compilation of DOM is done here.
                // It is responsible for produce HTML DOM or it returns a combined link function
                // Further Docuumentation on this - http://docs.angularjs.org/guide/directive
			console.log(attrs.id);
			console.log(attrs.datajson);
                var html = "<div id='" + attrs.id + "' ></div>"; // the HTML to be produced
                var newElem = $(html);
                elem.replaceWith(newElem); // Replacement of the element.
                var ourGraph = new BarGraph(attrs.datajson,attrs.xaxisName,attrs.xaxisPos,attrs.yaxisName,attrs.yaxisPos,attrs.d3Format);
                    ourGraph.workOnElement('#'+attrs.id);
                // Work on particular element
                ourGraph.generateGraph();  // generate the actual bar graph
         } 
     }
});
                
4> The d3 related bar graph code.
// properties are directly passed to `create` method
  var BarGraph = Class.create({
                    initialize: function(datajson,xaxisName,xaxisPos,yaxisName,yaxisPos,d3Format) {
                        this.datajson = datajson;
                        this.xaxisName = xaxisName;
                        this.xaxisPos = xaxisPos;
                        this.yaxisName = yaxisName;
                        this.yaxisPos = yaxisPos;
                        this.d3Format = d3Format;
                    },
                workOnElement: function(element) {
                		this.element = element;
                },
                generateGraph: function() {
                //d3 specific coding
                var margin = {
                            top: 20, right: 20, bottom: 30, left: 40},
                            width = 960 - margin.left - margin.right,
                            height = 500 - margin.top - margin.bottom;
                            
                var formatPercent = d3.format(this.d3Format);
                
                var x = d3.scale.ordinal()
                		.rangeRoundBands([0, width], .1);
                        
                var y = d3.scale.linear()
                		.range([height, 0]);
                        
                var xAxis = d3.svg.axis()
                        .scale(x)
                        .orient("bottom");
                        
                var yAxis = d3.svg.axis()
                        .scale(y)
                        .orient("left")
                        .tickFormat(formatPercent);
                        
                var svg = d3.select(this.element).append("svg")
                            .attr("width", width + margin.left + margin.right)
                            .attr("height", height + margin.top + margin.bottom)
                            .append("g")
                            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
                            
                d3.json(this.datajson, function(error, data) {
                        if (error) return console.warn(error);
                        //console.log(this.xaxisName);
                        x.domain(data.map(function(d) { return d.letter; }));
                        y.domain([0, d3.max(data, function(d) { return d.frequency; })]);
                        
                svg.append("g")
                    .attr("class", "x axis")
                    .attr("transform", "translate(0," + height + ")")
                    .call(xAxis)
                    .append("text")
                    .attr("x", this.xaxisPos)
                    .attr("dx", ".71em")
                    .style("text-anchor", "end")
                    .text(this.xaxisName);
                    
                svg.append("g")
                    .attr("class", "y axis")
                    .call(yAxis)
                    .append("text")
                    .attr("transform", "rotate(-90)")
                    .attr("y", this.yaxisPos)
                    .attr("dy", ".71em")
                    .style("text-anchor", "end")
                    .text(this.yaxisName);
                    
                svg.selectAll(".bar")
                    .data(data)
                    .enter().append("rect")
                    .attr("class", "bar")
                    .attr("x", function(d) { return x(d.letter); })
                    .attr("width", x.rangeBand())
                    .attr("y", function(d) { return y(d.frequency); })
                    .attr("height", function(d) { return height - y(d.frequency); });	 		    
            }.bind(this));
	 }
});

          
Json Data
[
    {"letter":"2000","frequency":".08167"},
    {"letter":"2001","frequency":".01492"},
    {"letter":"2002","frequency":".02780"},
    {"letter":"2003","frequency":".04253"},
    {"letter":"2004","frequency":".12702"},
    {"letter":"2005","frequency":".02288"},
    {"letter":"2006","frequency":".02022"},
    {"letter":"2007","frequency":".06094"},
    {"letter":"2008","frequency":".06973"},
    {"letter":"2009","frequency":".00153"}
]

                
 
1> Added the angular.js,prototype.js, d3.js in the HTML Page and the reference of the d3 related javascript class.
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="js/stackedbarProto.js"></script>
<script src="js/angulard3stackedbar.js"></script>
2> Put the the d3.js related Angular Directive in HTML.
<div id="d3stackbar" angulard3-stackbar-chart datajson="'sample.json'"
                    xaxis-name = ""
                    xaxis-pos = ""
                    yaxis-name = "'Population'"
                    yaxis-pos = "8"
                    d3-format= "">
<!-- angular directive is angulard3-stackbar-chart -->
<!-- directive variables are xaxis-name,yaxis-name,xaxis-pos,yaxis-pos,y axis data format(d3-format)
and finally the datajson variable which is holding the external data source -->
</div>
                
3> The Code in Angular Directive.
angular.module('AngularD3StackbarChart', []) // Angular Module Name
     .directive('angulard3StackbarChart', function () { // Angular Directive
          return {
             restrict: 'A',
          scope: {
             datajson: '=',
             xaxisName: '=',
             xaxisPos: '=',
             yaxisName: '=',
             yaxisPos: '=',
             d3Format: '='
             // All the Angular Directive Vaiables used as d3.js parameters
                              },
          link: function (scope, elem, attrs) {
                var ourGraph = new StackbarChart(scope.datajson,scope.yaxisName,scope.yaxisPos);
                //d3 related Variable initialisation
                ourGraph.workOnElement('#'+elem[0].id); // Work on particular element
                ourGraph.generateGraph(); // generate the actual bar graph
         } 
     }
});
                
4> The d3 related bar graph code.
// properties are directly passed to `create` method
  var StackbarChart = Class.create({
                    initialize: function(datajson,yaxisName,yaxisPos) {
                        this.datajson = datajson;
                        this.yaxisName = yaxisName;
                        this.yaxisPos = yaxisPos;
                      
                    },
                workOnElement: function(element) {
                		this.element = element;
                },
                generateGraph: function() {
                //d3 specific coding
               var margin = {top: 20, right: 20, bottom: 30, left: 40},
                            width = 960 - margin.left - margin.right,
                            height = 500 - margin.top - margin.bottom;

            var x = d3.scale.ordinal()
                .rangeRoundBands([0, width], .1);
            
            var y = d3.scale.linear()
                .rangeRound([height, 0]);
            
            var color = d3.scale.ordinal()
                .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
            
            var xAxis = d3.svg.axis()
                .scale(x)
                .orient("bottom");
            
            var yAxis = d3.svg.axis()
                .scale(y)
                .orient("left")
                .tickFormat(d3.format(".2s"));
            
            var svg = d3.select(this.element).append("svg")
                .attr("width", width + margin.left + margin.right)
                .attr("height", height + margin.top + margin.bottom)
              .append("g")
                .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
            
            d3.json(this.datajson, function(error, data) {
              color.domain(d3.keys(data[0]).filter(function(key) { return key !== "State"; }));
            
              data.forEach(function(d) {
                var y0 = 0;
                d.ages = color.domain().map(function(name) { return {name: name, y0: y0, y1: y0 += +d[name]}; });
                d.total = d.ages[d.ages.length - 1].y1;
              });
            
              data.sort(function(a, b) { return b.total - a.total; });
            
              x.domain(data.map(function(d) { return d.State; }));
              y.domain([0, d3.max(data, function(d) { return d.total; })]);
            
              svg.append("g")
                  .attr("class", "x axis")
                  .attr("transform", "translate(0," + height + ")")
                  .call(xAxis);
            
              svg.append("g")
                  .attr("class", "y axis")
                  .call(yAxis)
                .append("text")
                  .attr("transform", "rotate(-90)")
                  .attr("y", this.yaxisPos)
                  .attr("dy", ".71em")
                  .style("text-anchor", "end")
                  .text(this.yaxisName);
            
              var state = svg.selectAll(".state")
                  .data(data)
                .enter().append("g")
                  .attr("class", "g")
                  .attr("transform", function(d) { return "translate(" + x(d.State) + ",0)"; });
            
              state.selectAll("rect")
                  .data(function(d) { return d.ages; })
                .enter().append("rect")
                  .attr("width", x.rangeBand())
                  .attr("y", function(d) { return y(d.y1); })
                  .attr("height", function(d) { return y(d.y0) - y(d.y1); })
                  .style("fill", function(d) { return color(d.name); });
            
              var legend = svg.selectAll(".legend")
                  .data(color.domain().slice().reverse())
                .enter().append("g")
                  .attr("class", "legend")
                  .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
            
              legend.append("rect")
                  .attr("x", width - 18)
                  .attr("width", 18)
                  .attr("height", 18)
                  .style("fill", color);
            
              legend.append("text")
                  .attr("x", width - 24)
                  .attr("y", 9)
                  .attr("dy", ".35em")
                  .style("text-anchor", "end")
                  .text(function(d) { return d; }); 		    
            }.bind(this));
	 }
});

          
1> Added the angular.js,prototype.js, d3.js in the HTML Page and the reference of the d3 related javascript class.
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="js/stackedbarProto.js"></script>
<script src="js/angulard3stackedbar.js"></script>
2> Put the the d3.js related Angular Directive in HTML.
<stackbarchart id="d3stackbar" datajson="sample.json"
                    xaxis-name = ""
                    xaxis-pos = ""
                    yaxis-name = "Population"
                    yaxis-pos = "8"
                    d3-format= "">
<!-- angular directive is stackbarchart -->
<!-- directive variables are xaxis-name,yaxis-name,xaxis-pos,yaxis-pos,y axis data format(d3-format)
and finally the datajson variable which is holding the external data source -->
</div>
                
3> The Code in Angular Directive.
angular.module('AngularD3StackbarChart', []) // Angular Module Name
     .directive('stackbarchart', function () { // Angular Directive
        return {
            restrict: 'E', // Directive Scope is Element
            replace: true, // replace original markup with template 
            transclude: false, // not to copy original HTML DOM
            compile: function (elem, attrs) {// the compilation of DOM is done here.
                // It is responsible for produce HTML DOM or it returns a combined link function
                // Further Docuumentation on this - http://docs.angularjs.org/guide/directive
			console.log(attrs.id);
			console.log(attrs.datajson);
                var html = "<div id='" + attrs.id + "' ></div>"; // the HTML to be produced
                var newElem = $(html);
                elem.replaceWith(newElem); // Replacement of the element.
                var ourGraph = new StackbarChart(attrs.datajson,attrs.yaxisName,attrs.yaxisPos);
                    ourGraph.workOnElement('#'+attrs.id);
                // Work on particular element
                ourGraph.generateGraph();  // generate the actual bar graph
         } 
     }
});
                
4> The d3 related bar graph code.
// properties are directly passed to `create` method
  var StackbarChart = Class.create({
                    initialize: function(datajson,yaxisName,yaxisPos) {
                        this.datajson = datajson;
                        this.yaxisName = yaxisName;
                        this.yaxisPos = yaxisPos;
                      
                    },
                workOnElement: function(element) {
                		this.element = element;
                },
                generateGraph: function() {
                //d3 specific coding
               var margin = {top: 20, right: 20, bottom: 30, left: 40},
                            width = 960 - margin.left - margin.right,
                            height = 500 - margin.top - margin.bottom;

            var x = d3.scale.ordinal()
                .rangeRoundBands([0, width], .1);
            
            var y = d3.scale.linear()
                .rangeRound([height, 0]);
            
            var color = d3.scale.ordinal()
                .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
            
            var xAxis = d3.svg.axis()
                .scale(x)
                .orient("bottom");
            
            var yAxis = d3.svg.axis()
                .scale(y)
                .orient("left")
                .tickFormat(d3.format(".2s"));
            
            var svg = d3.select(this.element).append("svg")
                .attr("width", width + margin.left + margin.right)
                .attr("height", height + margin.top + margin.bottom)
              .append("g")
                .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
            
            d3.json(this.datajson, function(error, data) {
              color.domain(d3.keys(data[0]).filter(function(key) { return key !== "State"; }));
            
              data.forEach(function(d) {
                var y0 = 0;
                d.ages = color.domain().map(function(name) { return {name: name, y0: y0, y1: y0 += +d[name]}; });
                d.total = d.ages[d.ages.length - 1].y1;
              });
            
              data.sort(function(a, b) { return b.total - a.total; });
            
              x.domain(data.map(function(d) { return d.State; }));
              y.domain([0, d3.max(data, function(d) { return d.total; })]);
            
              svg.append("g")
                  .attr("class", "x axis")
                  .attr("transform", "translate(0," + height + ")")
                  .call(xAxis);
            
              svg.append("g")
                  .attr("class", "y axis")
                  .call(yAxis)
                .append("text")
                  .attr("transform", "rotate(-90)")
                  .attr("y", this.yaxisPos)
                  .attr("dy", ".71em")
                  .style("text-anchor", "end")
                  .text(this.yaxisName);
            
              var state = svg.selectAll(".state")
                  .data(data)
                .enter().append("g")
                  .attr("class", "g")
                  .attr("transform", function(d) { return "translate(" + x(d.State) + ",0)"; });
            
              state.selectAll("rect")
                  .data(function(d) { return d.ages; })
                .enter().append("rect")
                  .attr("width", x.rangeBand())
                  .attr("y", function(d) { return y(d.y1); })
                  .attr("height", function(d) { return y(d.y0) - y(d.y1); })
                  .style("fill", function(d) { return color(d.name); });
            
              var legend = svg.selectAll(".legend")
                  .data(color.domain().slice().reverse())
                .enter().append("g")
                  .attr("class", "legend")
                  .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
            
              legend.append("rect")
                  .attr("x", width - 18)
                  .attr("width", 18)
                  .attr("height", 18)
                  .style("fill", color);
            
              legend.append("text")
                  .attr("x", width - 24)
                  .attr("y", 9)
                  .attr("dy", ".35em")
                  .style("text-anchor", "end")
                  .text(function(d) { return d; }); 		    
            }.bind(this));
	 }
});

          
Json Data
[
 {"State":"AL","Under 5 Years":"310504","5 to 13 Years":"552339","14 to 17 Years":"259034","18 to 24 Years":"450818","25 to 44 Years":"1215966","45 to 64 Years":"641667"},
 {"State":"AK","Under 5 Years":"52083","5 to 13 Years":"85640","14 to 17 Years":"42153","18 to 24 Years":"74257","25 to 44 Years":"183159","45 to 64 Years":"50277"},
 {"State":"AZ","Under 5 Years":"515910","5 to 13 Years":"828669","14 to 17 Years":"362642","18 to 24 Years":"601943","25 to 44 Years":"1804762","45 to 64 Years":"1523681"},
 {"State":"AR","Under 5 Years":"202070","5 to 13 Years":"343207","14 to 17 Years":"157204","18 to 24 Years":"264160","25 to 44 Years":"754420","45 to 64 Years":"727124"},
 {"State":"CA","Under 5 Years":"2704659","5 to 13 Years":"4499890","14 to 17 Years":"2159981","18 to 24 Years":"3853788","25 to 44 Years":"10604510","45 to 64 Years":"8819342"},
 {"State":"CO","Under 5 Years":"358280","5 to 13 Years":"587154","14 to 17 Years":"261701","18 to 24 Years":"466194","25 to 44 Years":"1464939","45 to 64 Years":"1290094"},
 {"State":"CT","Under 5 Years":"211637","5 to 13 Years":"403658","14 to 17 Years":"196918","18 to 24 Years":"325110","25 to 44 Years":"916955","45 to 64 Years":"968967"},
 {"State":"DE","Under 5 Years":"59319","5 to 13 Years":"99496","14 to 17 Years":"47414","18 to 24 Years":"84464","25 to 44 Years":"230183","45 to 64 Years":"230528"}
 
]

                
 
1> Added the angular.js,prototype.js, d3.js in the HTML Page and the reference of the d3 related javascript class.
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="js/norstackedbarProto.js"></script>
<script src="js/angulard3norstackedbar.js"></script>
2> Put the the d3.js related Angular Directive in HTML.
<div id="d3stackbar" angulard3-norstackbar-chart datajson="'sample.json'"
                    xaxis-name = ""
                    xaxis-pos = ""
                    yaxis-name = ""
                    yaxis-pos = ""
                    d3-format= "">
<!-- angular directive is angulard3-norstackbar-chart -->
<!-- directive variables are xaxis-name,yaxis-name,xaxis-pos,yaxis-pos,y axis data format(d3-format)
and finally the datajson variable which is holding the external data source -->
</div>
                
3> The Code in Angular Directive.
angular.module('AngularD3NorStackbarChart', []) // Angular Module Name
     .directive('angulard3NorstackbarChart', function () { // Angular Directive
          return {
             restrict: 'A',
          scope: {
             datajson: '=',
             xaxisName: '=',
             xaxisPos: '=',
             yaxisName: '=',
             yaxisPos: '=',
             d3Format: '='
             // All the Angular Directive Vaiables used as d3.js parameters
                              },
          link: function (scope, elem, attrs) {
                var ourGraph = new new NorStackbarChart(scope.datajson);
                //d3 related Variable initialisation
                ourGraph.workOnElement('#'+elem[0].id); // Work on particular element
                ourGraph.generateGraph(); // generate the actual bar graph
         } 
     }
});
                
4> The d3 related bar graph code.
// properties are directly passed to `create` method
  var NorStackbarChart = Class.create({
                    initialize: function(datajson,yaxisName,yaxisPos) {
                        this.datajson = datajson;
                       
                    },
                workOnElement: function(element) {
                		this.element = element;
                },
                generateGraph: function() {
                //d3 specific coding
               var margin = {top: 20, right: 20, bottom: 30, left: 40},
                            width = 960 - margin.left - margin.right,
                            height = 500 - margin.top - margin.bottom;

                var x = d3.scale.ordinal()
                    .rangeRoundBands([0, width], .1);
                
                var y = d3.scale.linear()
                    .rangeRound([height, 0]);
                
                var color = d3.scale.ordinal()
                    .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
                
                var xAxis = d3.svg.axis()
                    .scale(x)
                    .orient("bottom");
                
                var yAxis = d3.svg.axis()
                    .scale(y)
                    .orient("left")
                    .tickFormat(d3.format(".0%"));
                
                var svg = d3.select(this.element).append("svg")
                    .attr("width", width + margin.left + margin.right)
                    .attr("height", height + margin.top + margin.bottom)
                  .append("g")
                    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
                
                d3.json(this.datajson, function(error, data) {
                  color.domain(d3.keys(data[0]).filter(function(key) { return key !== "State"; }));
                
                  data.forEach(function(d) {
                    var y0 = 0;
                    d.ages = color.domain().map(function(name) { return {name: name, y0: y0, y1: y0 += +d[name]}; });
                    d.ages.forEach(function(d) { d.y0 /= y0; d.y1 /= y0; });
                  });
                
                  data.sort(function(a, b) { return b.ages[0].y1 - a.ages[0].y1; });
                
                  x.domain(data.map(function(d) { return d.State; }));
                
                  svg.append("g")
                      .attr("class", "x axis")
                      .attr("transform", "translate(0," + height + ")")
                      .call(xAxis);
                
                  svg.append("g")
                      .attr("class", "y axis")
                      .call(yAxis);
                
                  var state = svg.selectAll(".state")
                      .data(data)
                    .enter().append("g")
                      .attr("class", "state")
                      .attr("transform", function(d) { return "translate(" + x(d.State) + ",0)"; });
                
                  state.selectAll("rect")
                      .data(function(d) { return d.ages; })
                    .enter().append("rect")
                      .attr("width", x.rangeBand())
                      .attr("y", function(d) { return y(d.y1); })
                      .attr("height", function(d) { return y(d.y0) - y(d.y1); })
                      .style("fill", function(d) { return color(d.name); });
                
                  var legend = svg.select(".state:last-child").selectAll(".legend")
                      .data(function(d) { return d.ages; })
                    .enter().append("g")
                      .attr("class", "legend")
                      .attr("transform", function(d) { return "translate(" + x.rangeBand() / 2 + "," + y((d.y0 + d.y1) / 2) + ")"; });
                
                  legend.append("line")
                      .attr("x2", 10);
                
                  legend.append("text")
                      .attr("x", 13)
                      .attr("dy", ".35em")
                      .text(function(d) { return d.name; });	    
            }.bind(this));
	 }
});

          
1> Added the angular.js,prototype.js, d3.js in the HTML Page and the reference of the d3 related javascript class.
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="js/norstackedbarProto.js"></script>
<script src="js/angulard3norstackedbar.js"></script>
2> Put the the d3.js related Angular Directive in HTML.
<norstackbarchart id="d3stackbar" datajson="sample.json"
                    xaxis-name = ""
                    xaxis-pos = ""
                    yaxis-name = ""
                    yaxis-pos = ""
                    d3-format= "">
<!-- angular directive is norstackbarchart -->
<!-- directive variables are xaxis-name,yaxis-name,xaxis-pos,yaxis-pos,y axis data format(d3-format)
and finally the datajson variable which is holding the external data source -->
</div>
                
3> The Code in Angular Directive.
angular.module('AngularD3NorStackbarChart', []) // Angular Module Name
     .directive('norstackbarchart', function () { // Angular Directive
        return {
            restrict: 'E', // Directive Scope is Element
            replace: true, // replace original markup with template 
            transclude: false, // not to copy original HTML DOM
            compile: function (elem, attrs) {// the compilation of DOM is done here.
                // It is responsible for produce HTML DOM or it returns a combined link function
                // Further Docuumentation on this - http://docs.angularjs.org/guide/directive
			console.log(attrs.id);
			console.log(attrs.datajson);
                var html = "<div id='" + attrs.id + "' ></div>"; // the HTML to be produced
                var newElem = $(html);
                elem.replaceWith(newElem); // Replacement of the element.
                var ourGraph = new NorStackbarChart(attrs.datajson);
                    ourGraph.workOnElement('#'+attrs.id);
                // Work on particular element
                ourGraph.generateGraph();  // generate the actual bar graph
         } 
     }
});
                
4> The d3 related bar graph code.
// properties are directly passed to `create` method
  var NorStackbarChart = Class.create({
                    initialize: function(datajson,yaxisName,yaxisPos) {
                        this.datajson = datajson;
                       
                    },
                workOnElement: function(element) {
                		this.element = element;
                },
                generateGraph: function() {
                //d3 specific coding
               var margin = {top: 20, right: 20, bottom: 30, left: 40},
                            width = 960 - margin.left - margin.right,
                            height = 500 - margin.top - margin.bottom;

                var x = d3.scale.ordinal()
                    .rangeRoundBands([0, width], .1);
                
                var y = d3.scale.linear()
                    .rangeRound([height, 0]);
                
                var color = d3.scale.ordinal()
                    .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
                
                var xAxis = d3.svg.axis()
                    .scale(x)
                    .orient("bottom");
                
                var yAxis = d3.svg.axis()
                    .scale(y)
                    .orient("left")
                    .tickFormat(d3.format(".0%"));
                
                var svg = d3.select(this.element).append("svg")
                    .attr("width", width + margin.left + margin.right)
                    .attr("height", height + margin.top + margin.bottom)
                  .append("g")
                    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
                
                d3.json(this.datajson, function(error, data) {
                  color.domain(d3.keys(data[0]).filter(function(key) { return key !== "State"; }));
                
                  data.forEach(function(d) {
                    var y0 = 0;
                    d.ages = color.domain().map(function(name) { return {name: name, y0: y0, y1: y0 += +d[name]}; });
                    d.ages.forEach(function(d) { d.y0 /= y0; d.y1 /= y0; });
                  });
                
                  data.sort(function(a, b) { return b.ages[0].y1 - a.ages[0].y1; });
                
                  x.domain(data.map(function(d) { return d.State; }));
                
                  svg.append("g")
                      .attr("class", "x axis")
                      .attr("transform", "translate(0," + height + ")")
                      .call(xAxis);
                
                  svg.append("g")
                      .attr("class", "y axis")
                      .call(yAxis);
                
                  var state = svg.selectAll(".state")
                      .data(data)
                    .enter().append("g")
                      .attr("class", "state")
                      .attr("transform", function(d) { return "translate(" + x(d.State) + ",0)"; });
                
                  state.selectAll("rect")
                      .data(function(d) { return d.ages; })
                    .enter().append("rect")
                      .attr("width", x.rangeBand())
                      .attr("y", function(d) { return y(d.y1); })
                      .attr("height", function(d) { return y(d.y0) - y(d.y1); })
                      .style("fill", function(d) { return color(d.name); });
                
                  var legend = svg.select(".state:last-child").selectAll(".legend")
                      .data(function(d) { return d.ages; })
                    .enter().append("g")
                      .attr("class", "legend")
                      .attr("transform", function(d) { return "translate(" + x.rangeBand() / 2 + "," + y((d.y0 + d.y1) / 2) + ")"; });
                
                  legend.append("line")
                      .attr("x2", 10);
                
                  legend.append("text")
                      .attr("x", 13)
                      .attr("dy", ".35em")
                      .text(function(d) { return d.name; });	    
            }.bind(this));
	 }
});

          
Json Data
[
 {"State":"AL","Under 5 Years":"310504","5 to 13 Years":"552339","14 to 17 Years":"259034","18 to 24 Years":"450818","25 to 44 Years":"1215966","45 to 64 Years":"641667"},
 {"State":"AK","Under 5 Years":"52083","5 to 13 Years":"85640","14 to 17 Years":"42153","18 to 24 Years":"74257","25 to 44 Years":"183159","45 to 64 Years":"50277"},
 {"State":"AZ","Under 5 Years":"515910","5 to 13 Years":"828669","14 to 17 Years":"362642","18 to 24 Years":"601943","25 to 44 Years":"1804762","45 to 64 Years":"1523681"},
 {"State":"AR","Under 5 Years":"202070","5 to 13 Years":"343207","14 to 17 Years":"157204","18 to 24 Years":"264160","25 to 44 Years":"754420","45 to 64 Years":"727124"},
 {"State":"CA","Under 5 Years":"2704659","5 to 13 Years":"4499890","14 to 17 Years":"2159981","18 to 24 Years":"3853788","25 to 44 Years":"10604510","45 to 64 Years":"8819342"},
 {"State":"CO","Under 5 Years":"358280","5 to 13 Years":"587154","14 to 17 Years":"261701","18 to 24 Years":"466194","25 to 44 Years":"1464939","45 to 64 Years":"1290094"},
 {"State":"CT","Under 5 Years":"211637","5 to 13 Years":"403658","14 to 17 Years":"196918","18 to 24 Years":"325110","25 to 44 Years":"916955","45 to 64 Years":"968967"},
 {"State":"DE","Under 5 Years":"59319","5 to 13 Years":"99496","14 to 17 Years":"47414","18 to 24 Years":"84464","25 to 44 Years":"230183","45 to 64 Years":"230528"}
 
]

                
 
1> Added the angular.js,prototype.js, d3.js in the HTML Page and the reference of the d3 related javascript class.
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="js/groupedbarProto.js"></script>
<script src="js/angulard3groupedbar.js"></script>
2> Put the the d3.js related Angular Directive in HTML.
<div id="d3groupbar" angulard3-groupbar-chart datajson="'sample.json'"
                    xaxis-name = ""
                    xaxis-pos = ""
                    yaxis-name = "'Population'"
                    yaxis-pos = "8"
                    d3-format= "">
<!-- angular directive is angulard3-groupbar-chart -->
<!-- directive variables are xaxis-name,yaxis-name,xaxis-pos,yaxis-pos,y axis data format(d3-format)
and finally the datajson variable which is holding the external data source -->
</div>
                
3> The Code in Angular Directive.
angular.module('AngularD3GroupbarChart', []) // Angular Module Name
     .directive('angulard3GroupbarChart', function () { // Angular Directive
          return {
             restrict: 'A',
          scope: {
             datajson: '=',
             xaxisName: '=',
             xaxisPos: '=',
             yaxisName: '=',
             yaxisPos: '=',
             d3Format: '='
             // All the Angular Directive Vaiables used as d3.js parameters
                              },
          link: function (scope, elem, attrs) {
                var ourGraph = new GroupbarChart(scope.datajson,scope.yaxisName,scope.yaxisPos);
                //d3 related Variable initialisation
                ourGraph.workOnElement('#'+elem[0].id); // Work on particular element
                ourGraph.generateGraph(); // generate the actual bar graph
         } 
     }
});
                
4> The d3 related bar graph code.
// properties are directly passed to `create` method
  var GroupbarChart = Class.create({
                    initialize: function(datajson,yaxisName,yaxisPos) {
                        this.datajson = datajson;
                        this.yaxisName = yaxisName;
                        this.yaxisPos = yaxisPos;
                      
                    },
                workOnElement: function(element) {
                		this.element = element;
                },
                generateGraph: function() {
                //d3 specific coding
               var margin = {top: 20, right: 20, bottom: 30, left: 40},
                            width = 960 - margin.left - margin.right,
                            height = 500 - margin.top - margin.bottom;

                var x0 = d3.scale.ordinal()
                    .rangeRoundBands([0, width], .1);
                
                var x1 = d3.scale.ordinal();
                
                var y = d3.scale.linear()
                    .range([height, 0]);
                
                var color = d3.scale.ordinal()
                    .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
                
                var xAxis = d3.svg.axis()
                    .scale(x0)
                    .orient("bottom");
                
                var yAxis = d3.svg.axis()
                    .scale(y)
                    .orient("left")
                    .tickFormat(d3.format(".2s"));
                
                var svg = d3.select(this.element).append("svg")
                    .attr("width", width + margin.left + margin.right)
                    .attr("height", height + margin.top + margin.bottom)
                  .append("g")
                    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
                
                d3.json(this.datajson, function(error, data) {
                  var ageNames = d3.keys(data[0]).filter(function(key) { return key !== "State"; });
                
                  data.forEach(function(d) {
                    d.ages = ageNames.map(function(name) { return {name: name, value: +d[name]}; });
                  });
                
                  x0.domain(data.map(function(d) { return d.State; }));
                  x1.domain(ageNames).rangeRoundBands([0, x0.rangeBand()]);
                  y.domain([0, d3.max(data, function(d) { return d3.max(d.ages, function(d) { return d.value; }); })]);
                
                  svg.append("g")
                      .attr("class", "x axis")
                      .attr("transform", "translate(0," + height + ")")
                      .call(xAxis);
                
                  svg.append("g")
                      .attr("class", "y axis")
                      .call(yAxis)
                    .append("text")
                      .attr("transform", "rotate(-90)")
                      .attr("y", this.yaxisPos)
                      .attr("dy", ".71em")
                      .style("text-anchor", "end")
                      .text(this.yaxisName);
                
                  var state = svg.selectAll(".state")
                      .data(data)
                    .enter().append("g")
                      .attr("class", "g")
                      .attr("transform", function(d) { return "translate(" + x0(d.State) + ",0)"; });
                
                  state.selectAll("rect")
                      .data(function(d) { return d.ages; })
                    .enter().append("rect")
                      .attr("width", x1.rangeBand())
                      .attr("x", function(d) { return x1(d.name); })
                      .attr("y", function(d) { return y(d.value); })
                      .attr("height", function(d) { return height - y(d.value); })
                      .style("fill", function(d) { return color(d.name); });
                
                  var legend = svg.selectAll(".legend")
                      .data(ageNames.slice().reverse())
                    .enter().append("g")
                      .attr("class", "legend")
                      .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
                
                  legend.append("rect")
                      .attr("x", width - 18)
                      .attr("width", 18)
                      .attr("height", 18)
                      .style("fill", color);
                
                  legend.append("text")
                      .attr("x", width - 24)
                      .attr("y", 9)
                      .attr("dy", ".35em")
                      .style("text-anchor", "end")
                      .text(function(d) { return d; });	    
            }.bind(this));
	 }
});

          
1> Added the angular.js,prototype.js, d3.js in the HTML Page and the reference of the d3 related javascript class.
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="js/groupedbarProto.js"></script>
<script src="js/angulard3groupedbar.js"></script>
2> Put the the d3.js related Angular Directive in HTML.
<groupbarchart id="d3groupbar" datajson="sample.json"
                    xaxis-name = ""
                    xaxis-pos = ""
                    yaxis-name = "Population"
                    yaxis-pos = "8"
                    d3-format= "">
<!-- angular directive is groupbarchart -->
<!-- directive variables are xaxis-name,yaxis-name,xaxis-pos,yaxis-pos,y axis data format(d3-format)
and finally the datajson variable which is holding the external data source -->
</div>
                
3> The Code in Angular Directive.
angular.module('AngularD3GroupbarChart', []) // Angular Module Name
     .directive('groupbarchart', function () { // Angular Directive
        return {
            restrict: 'E', // Directive Scope is Element
            replace: true, // replace original markup with template 
            transclude: false, // not to copy original HTML DOM
            compile: function (elem, attrs) {// the compilation of DOM is done here.
                // It is responsible for produce HTML DOM or it returns a combined link function
                // Further Docuumentation on this - http://docs.angularjs.org/guide/directive
			console.log(attrs.id);
			console.log(attrs.datajson);
                var html = "<div id='" + attrs.id + "' ></div>"; // the HTML to be produced
                var newElem = $(html);
                elem.replaceWith(newElem); // Replacement of the element.
                var ourGraph = new GroupbarChart(attrs.datajson,attrs.yaxisName,attrs.yaxisPos);
                    ourGraph.workOnElement('#'+attrs.id);
                // Work on particular element
                ourGraph.generateGraph();  // generate the actual bar graph
         } 
     }
});
                
4> The d3 related bar graph code.
// properties are directly passed to `create` method
  var GroupbarChart = Class.create({
                    initialize: function(datajson,yaxisName,yaxisPos) {
                        this.datajson = datajson;
                        this.yaxisName = yaxisName;
                        this.yaxisPos = yaxisPos;
                      
                    },
                workOnElement: function(element) {
                		this.element = element;
                },
                generateGraph: function() {
                //d3 specific coding
               var margin = {top: 20, right: 20, bottom: 30, left: 40},
                            width = 960 - margin.left - margin.right,
                            height = 500 - margin.top - margin.bottom;

                var x0 = d3.scale.ordinal()
                    .rangeRoundBands([0, width], .1);
                
                var x1 = d3.scale.ordinal();
                
                var y = d3.scale.linear()
                    .range([height, 0]);
                
                var color = d3.scale.ordinal()
                    .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
                
                var xAxis = d3.svg.axis()
                    .scale(x0)
                    .orient("bottom");
                
                var yAxis = d3.svg.axis()
                    .scale(y)
                    .orient("left")
                    .tickFormat(d3.format(".2s"));
                
                var svg = d3.select(this.element).append("svg")
                    .attr("width", width + margin.left + margin.right)
                    .attr("height", height + margin.top + margin.bottom)
                  .append("g")
                    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
                
                d3.json(this.datajson, function(error, data) {
                  var ageNames = d3.keys(data[0]).filter(function(key) { return key !== "State"; });
                
                  data.forEach(function(d) {
                    d.ages = ageNames.map(function(name) { return {name: name, value: +d[name]}; });
                  });
                
                  x0.domain(data.map(function(d) { return d.State; }));
                  x1.domain(ageNames).rangeRoundBands([0, x0.rangeBand()]);
                  y.domain([0, d3.max(data, function(d) { return d3.max(d.ages, function(d) { return d.value; }); })]);
                
                  svg.append("g")
                      .attr("class", "x axis")
                      .attr("transform", "translate(0," + height + ")")
                      .call(xAxis);
                
                  svg.append("g")
                      .attr("class", "y axis")
                      .call(yAxis)
                    .append("text")
                      .attr("transform", "rotate(-90)")
                      .attr("y", this.yaxisPos)
                      .attr("dy", ".71em")
                      .style("text-anchor", "end")
                      .text(this.yaxisName);
                
                  var state = svg.selectAll(".state")
                      .data(data)
                    .enter().append("g")
                      .attr("class", "g")
                      .attr("transform", function(d) { return "translate(" + x0(d.State) + ",0)"; });
                
                  state.selectAll("rect")
                      .data(function(d) { return d.ages; })
                    .enter().append("rect")
                      .attr("width", x1.rangeBand())
                      .attr("x", function(d) { return x1(d.name); })
                      .attr("y", function(d) { return y(d.value); })
                      .attr("height", function(d) { return height - y(d.value); })
                      .style("fill", function(d) { return color(d.name); });
                
                  var legend = svg.selectAll(".legend")
                      .data(ageNames.slice().reverse())
                    .enter().append("g")
                      .attr("class", "legend")
                      .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
                
                  legend.append("rect")
                      .attr("x", width - 18)
                      .attr("width", 18)
                      .attr("height", 18)
                      .style("fill", color);
                
                  legend.append("text")
                      .attr("x", width - 24)
                      .attr("y", 9)
                      .attr("dy", ".35em")
                      .style("text-anchor", "end")
                      .text(function(d) { return d; });	    
            }.bind(this));
	 }
});

          
Json Data
[
 {"State":"AL","Under 5 Years":"310504","5 to 13 Years":"552339","14 to 17 Years":"259034","18 to 24 Years":"450818","25 to 44 Years":"1215966","45 to 64 Years":"641667"},
 {"State":"AK","Under 5 Years":"52083","5 to 13 Years":"85640","14 to 17 Years":"42153","18 to 24 Years":"74257","25 to 44 Years":"183159","45 to 64 Years":"50277"},
 {"State":"AZ","Under 5 Years":"515910","5 to 13 Years":"828669","14 to 17 Years":"362642","18 to 24 Years":"601943","25 to 44 Years":"1804762","45 to 64 Years":"1523681"},
 {"State":"AR","Under 5 Years":"202070","5 to 13 Years":"343207","14 to 17 Years":"157204","18 to 24 Years":"264160","25 to 44 Years":"754420","45 to 64 Years":"727124"},
 {"State":"CA","Under 5 Years":"2704659","5 to 13 Years":"4499890","14 to 17 Years":"2159981","18 to 24 Years":"3853788","25 to 44 Years":"10604510","45 to 64 Years":"8819342"},
 {"State":"CO","Under 5 Years":"358280","5 to 13 Years":"587154","14 to 17 Years":"261701","18 to 24 Years":"466194","25 to 44 Years":"1464939","45 to 64 Years":"1290094"},
 {"State":"CT","Under 5 Years":"211637","5 to 13 Years":"403658","14 to 17 Years":"196918","18 to 24 Years":"325110","25 to 44 Years":"916955","45 to 64 Years":"968967"},
 {"State":"DE","Under 5 Years":"59319","5 to 13 Years":"99496","14 to 17 Years":"47414","18 to 24 Years":"84464","25 to 44 Years":"230183","45 to 64 Years":"230528"}
 
]

                
 
1> Added the angular.js,prototype.js, d3.js in the HTML Page and the reference of the d3 related javascript class.
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="js/scatterplotProto.js"></script>
<script src="js/angulard3scatterplotbar.js"></script>
2> Put the the d3.js related Angular Directive in HTML.
<div id="d3scatterplot" angulard3-scatterplot-chart datajson="'sample.json'"
                    xaxis-name = "'Sepal Width (cm)'"
                    xaxis-pos = ""
                    yaxis-name = "'Sepal Length (cm)'"
                    yaxis-pos = "8"
                    d3-format= "">
<!-- angular directive is angulard3-scatterplot-chart -->
<!-- directive variables are xaxis-name,yaxis-name,xaxis-pos,yaxis-pos,y axis data format(d3-format)
and finally the datajson variable which is holding the external data source -->
</div>
                
3> The Code in Angular Directive.
angular.module('AngularD3SctterplotChart', []) // Angular Module Name
     .directive('angulard3ScatterplotChart', function () { // Angular Directive
          return {
             restrict: 'A',
          scope: {
             datajson: '=',
             xaxisName: '=',
             xaxisPos: '=',
             yaxisName: '=',
             yaxisPos: '=',
             d3Format: '='
             // All the Angular Directive Vaiables used as d3.js parameters
                              },
          link: function (scope, elem, attrs) {
                var ourGraph = new Sctterplot(scope.datajson,scope.xaxisName,scope.yaxisName,scope.yaxisPos);
                //d3 related Variable initialisation
                ourGraph.workOnElement('#'+elem[0].id); // Work on particular element
                ourGraph.generateGraph(); // generate the actual bar graph
         } 
     }
});
                
4> The d3 related bar graph code.
// properties are directly passed to `create` method
  var Sctterplot = Class.create({
                    initialize: function(datajson,xaxisName,yaxisName,yaxisPos) {
                        this.datajson = datajson;
                        this.xaxisName = xaxisName;
                        this.yaxisName = yaxisName;
                        this.yaxisPos = yaxisPos;
                      
                    },
                workOnElement: function(element) {
                		this.element = element;
                },
                generateGraph: function() {
                //d3 specific coding
               var margin = {top: 20, right: 20, bottom: 30, left: 40},
                            width = 960 - margin.left - margin.right,
                            height = 500 - margin.top - margin.bottom;

                var x = d3.scale.linear()
                    .range([0, width]);
                
                var y = d3.scale.linear()
                    .range([height, 0]);
                
                var color = d3.scale.category10();
                
                var xAxis = d3.svg.axis()
                    .scale(x)
                    .orient("bottom");
                
                var yAxis = d3.svg.axis()
                    .scale(y)
                    .orient("left");
                
                var svg = d3.select(this.element).append("svg")
                    .attr("width", width + margin.left + margin.right)
                    .attr("height", height + margin.top + margin.bottom)
                  .append("g")
                    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
                
                d3.json(this.datajson,function(error, data) {
                                                 
                  data.forEach(function(d) {
                                    
                    d.sepalLength = +d.sepalLength;
                    d.sepalWidth = +d.sepalWidth;
                  });
                
                  x.domain(d3.extent(data, function(d) { return d.sepalWidth; })).nice();
                  y.domain(d3.extent(data, function(d) { return d.sepalLength; })).nice();
                
                  svg.append("g")
                      .attr("class", "x axis")
                      .attr("transform", "translate(0," + height + ")")
                      .call(xAxis)
                    .append("text")
                      .attr("class", "label")
                      .attr("x", width)
                      .attr("y", -6)
                      .style("text-anchor", "end")
                      .text(this.xaxisName);
                
                  svg.append("g")
                      .attr("class", "y axis")
                      .call(yAxis)
                    .append("text")
                      .attr("class", "label")
                      .attr("transform", "rotate(-90)")
                      .attr("y", this.yaxisPos)
                      .attr("dy", ".71em")
                      .style("text-anchor", "end")
                      .text(this.yaxisName)
                
                  svg.selectAll(".dot")
                      .data(data)
                    .enter().append("circle")
                      .attr("class", "dot")
                      .attr("r", 3.5)
                      .attr("cx", function(d) { return x(d.sepalWidth); })
                      .attr("cy", function(d) { return y(d.sepalLength); })
                      .style("fill", function(d) { return color(d.species); });
                
                  var legend = svg.selectAll(".legend")
                      .data(color.domain())
                    .enter().append("g")
                      .attr("class", "legend")
                      .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
                
                  legend.append("rect")
                      .attr("x", width - 18)
                      .attr("width", 18)
                      .attr("height", 18)
                      .style("fill", color);
                
                  legend.append("text")
                      .attr("x", width - 24)
                      .attr("y", 9)
                      .attr("dy", ".35em")
                      .style("text-anchor", "end")
                      .text(function(d) { return d; });    
            }.bind(this));
	 }
});

          
1> Added the angular.js,prototype.js, d3.js in the HTML Page and the reference of the d3 related javascript class.
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="js/scatterplotProto.js"></script>
<script src="js/angulard3scatterplotbar.js"></script>
2> Put the the d3.js related Angular Directive in HTML.
<scatterplotchart id="d3scatterplot" datajson="sample.json"
                    xaxis-name = "Sepal Width (cm)"
                    xaxis-pos = ""
                    yaxis-name = "Sepal Length (cm)"
                    yaxis-pos = "8"
                    d3-format= "">
<!-- angular directive is scatterplotchart -->
<!-- directive variables are xaxis-name,yaxis-name,xaxis-pos,yaxis-pos,y axis data format(d3-format)
and finally the datajson variable which is holding the external data source -->
</div>
                
3> The Code in Angular Directive.
angular.module('AngularD3SctterplotChart', []) // Angular Module Name
     .directive('scatterplotchart', function () { // Angular Directive
        return {
            restrict: 'E', // Directive Scope is Element
            replace: true, // replace original markup with template 
            transclude: false, // not to copy original HTML DOM
            compile: function (elem, attrs) {// the compilation of DOM is done here.
                // It is responsible for produce HTML DOM or it returns a combined link function
                // Further Docuumentation on this - http://docs.angularjs.org/guide/directive
			console.log(attrs.id);
			console.log(attrs.datajson);
                var html = "<div id='" + attrs.id + "' ></div>"; // the HTML to be produced
                var newElem = $(html);
                elem.replaceWith(newElem); // Replacement of the element.
                var ourGraph = new Sctterplot(attrs.datajson,attrs.xaxisName,attrs.yaxisName,attrs.yaxisPos);
                    ourGraph.workOnElement('#'+attrs.id);
                // Work on particular element
                ourGraph.generateGraph();  // generate the actual bar graph
         } 
     }
});
                
4> The d3 related bar graph code.
// properties are directly passed to `create` method
  var Sctterplot = Class.create({
                    initialize: function(datajson,xaxisName,yaxisName,yaxisPos) {
                        this.datajson = datajson;
                        this.xaxisName = xaxisName;
                        this.yaxisName = yaxisName;
                        this.yaxisPos = yaxisPos;
                      
                    },
                workOnElement: function(element) {
                		this.element = element;
                },
                generateGraph: function() {
                //d3 specific coding
               var margin = {top: 20, right: 20, bottom: 30, left: 40},
                            width = 960 - margin.left - margin.right,
                            height = 500 - margin.top - margin.bottom;

                var x = d3.scale.linear()
                    .range([0, width]);
                
                var y = d3.scale.linear()
                    .range([height, 0]);
                
                var color = d3.scale.category10();
                
                var xAxis = d3.svg.axis()
                    .scale(x)
                    .orient("bottom");
                
                var yAxis = d3.svg.axis()
                    .scale(y)
                    .orient("left");
                
                var svg = d3.select(this.element).append("svg")
                    .attr("width", width + margin.left + margin.right)
                    .attr("height", height + margin.top + margin.bottom)
                  .append("g")
                    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
                
                d3.json(this.datajson,function(error, data) {
                                                 
                  data.forEach(function(d) {
                                    
                    d.sepalLength = +d.sepalLength;
                    d.sepalWidth = +d.sepalWidth;
                  });
                
                  x.domain(d3.extent(data, function(d) { return d.sepalWidth; })).nice();
                  y.domain(d3.extent(data, function(d) { return d.sepalLength; })).nice();
                
                  svg.append("g")
                      .attr("class", "x axis")
                      .attr("transform", "translate(0," + height + ")")
                      .call(xAxis)
                    .append("text")
                      .attr("class", "label")
                      .attr("x", width)
                      .attr("y", -6)
                      .style("text-anchor", "end")
                      .text(this.xaxisName);
                
                  svg.append("g")
                      .attr("class", "y axis")
                      .call(yAxis)
                    .append("text")
                      .attr("class", "label")
                      .attr("transform", "rotate(-90)")
                      .attr("y", this.yaxisPos)
                      .attr("dy", ".71em")
                      .style("text-anchor", "end")
                      .text(this.yaxisName)
                
                  svg.selectAll(".dot")
                      .data(data)
                    .enter().append("circle")
                      .attr("class", "dot")
                      .attr("r", 3.5)
                      .attr("cx", function(d) { return x(d.sepalWidth); })
                      .attr("cy", function(d) { return y(d.sepalLength); })
                      .style("fill", function(d) { return color(d.species); });
                
                  var legend = svg.selectAll(".legend")
                      .data(color.domain())
                    .enter().append("g")
                      .attr("class", "legend")
                      .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
                
                  legend.append("rect")
                      .attr("x", width - 18)
                      .attr("width", 18)
                      .attr("height", 18)
                      .style("fill", color);
                
                  legend.append("text")
                      .attr("x", width - 24)
                      .attr("y", 9)
                      .attr("dy", ".35em")
                      .style("text-anchor", "end")
                      .text(function(d) { return d; });    
            }.bind(this));
	 }
});

          
Json Data
[
     {"sepalLength":"5.0","sepalWidth":"3.2","petalLength":"1.4","petalWidth":"0.2","species":"setosa"},
     {"sepalLength":"4.9","sepalWidth":"3.0","petalLength":"1.4","petalWidth":"0.2","species":"setosa"},
     {"sepalLength":"4.7","sepalWidth":"4.4","petalLength":"1.3","petalWidth":"0.2","species":"setosa"},
     {"sepalLength":"4.6","sepalWidth":"3.4","petalLength":"1.4","petalWidth":"0.3","species":"setosa"},
     {"sepalLength":"5.0","sepalWidth":"3.4","petalLength":"1.5","petalWidth":"0.2","species":"setosa"},
     {"sepalLength":"4.4","sepalWidth":"2.9","petalLength":"1.4","petalWidth":"0.2","species":"setosa"},
     {"sepalLength":"7.0","sepalWidth":"3.2","petalLength":"4.7","petalWidth":"1.4","species":"versicolor"},
     {"sepalLength":"6.4","sepalWidth":"3.2","petalLength":"4.5","petalWidth":"1.5","species":"versicolor"},
     {"sepalLength":"6.9","sepalWidth":"3.1","petalLength":"4.9","petalWidth":"1.5","species":"versicolor"},
     {"sepalLength":"5.5","sepalWidth":"2.3","petalLength":"4.0","petalWidth":"1.3","species":"versicolor"},
     {"sepalLength":"6.5","sepalWidth":"2.8","petalLength":"4.6","petalWidth":"1.5","species":"versicolor"},
     {"sepalLength":"5.7","sepalWidth":"2.8","petalLength":"4.6","petalWidth":"1.3","species":"versicolor"},
     {"sepalLength":"6.3","sepalWidth":"3.3","petalLength":"6.0","petalWidth":"2.5","species":"virginica"},
     {"sepalLength":"5.8","sepalWidth":"2.7","petalLength":"5.1","petalWidth":"1.9","species":"virginica"},
     {"sepalLength":"7.1","sepalWidth":"3.0","petalLength":"5.9","petalWidth":"2.1","species":"virginica"},
     {"sepalLength":"6.3","sepalWidth":"2.9","petalLength":"5.6","petalWidth":"1.8","species":"virginica"},
     {"sepalLength":"6.5","sepalWidth":"3.0","petalLength":"5.8","petalWidth":"2.2","species":"virginica"},
     {"sepalLength":"7.6","sepalWidth":"3.0","petalLength":"6.6","petalWidth":"2.1","species":"virginica"}
 
]

                
 
1> Added the angular.js,prototype.js, d3.js in the HTML Page and the reference of the d3 related javascript class.
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="js/donutplotProto.js"></script>
<script src="js/angulard3donutplotbar.js"></script>
2> Put the the d3.js related Angular Directive in HTML.
<div id="d3donut" angulard3-donut-chart datajson="'sample.json'"
                    xaxis-name = ""
                    xaxis-pos = ""
                    yaxis-name = ""
                    yaxis-pos = ""
                    d3-format= "">
<!-- angular directive is angulard3-donut-chart -->
<!-- directive variables are xaxis-name,yaxis-name,xaxis-pos,yaxis-pos,y axis data format(d3-format)
and finally the datajson variable which is holding the external data source -->
</div>
                
3> The Code in Angular Directive.
angular.module('AngularD3DonutChart', []) // Angular Module Name
     .directive('angulard3DonutChart', function () { // Angular Directive
          return {
             restrict: 'A',
          scope: {
             datajson: '=',
             xaxisName: '=',
             xaxisPos: '=',
             yaxisName: '=',
             yaxisPos: '=',
             d3Format: '='
             // All the Angular Directive Vaiables used as d3.js parameters
                              },
          link: function (scope, elem, attrs) {
                var ourGraph = new DonutChart(scope.datajson);
                //d3 related Variable initialisation
                ourGraph.workOnElement('#'+elem[0].id); // Work on particular element
                ourGraph.generateGraph(); // generate the actual bar graph
         } 
     }
});
                
4> The d3 related bar graph code.
// properties are directly passed to `create` method
  var DonutChart = Class.create({
                    initialize: function(datajson) {
                        this.datajson = datajson;
                                           
                    },
                workOnElement: function(element) {
                		this.element = element;
                },
                generateGraph: function() {
                //d3 specific coding
                var width = 960,
                    height = 500,
                    radius = Math.min(width, height) / 2;
                
                var color = d3.scale.ordinal()
                    .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
                
                var arc = d3.svg.arc()
                    .outerRadius(radius - 10)
                    .innerRadius(radius - 70);
                
                var pie = d3.layout.pie()
                    .sort(null)
                    .value(function(d) { return d.population; });
                
                var svg = d3.select(this.element).append("svg")
                    .attr("width", width)
                    .attr("height", height)
                  .append("g")
                    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
                
                d3.json(this.datajson, function(error, data) {
                
                  data.forEach(function(d) {
                    d.population = +d.population;
                  });
                
                  var g = svg.selectAll(".arc")
                      .data(pie(data))
                    .enter().append("g")
                      .attr("class", "arc");
                
                  g.append("path")
                      .attr("d", arc)
                      .style("fill", function(d) { return color(d.data.age); });
                
                  g.append("text")
                      .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; })
                      .attr("dy", ".35em")
                      .style("text-anchor", "middle")
                      .text(function(d) { return d.data.age; });  
            }.bind(this));
	 }
});

          
1> Added the angular.js,prototype.js, d3.js in the HTML Page and the reference of the d3 related javascript class.
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="js/donutplotProto.js"></script>
<script src="js/angulard3donutplotbar.js"></script>
2> Put the the d3.js related Angular Directive in HTML.
<donutchart id="d3donut" datajson="sample.json"
                    xaxis-name = ""
                    xaxis-pos = ""
                    yaxis-name = ""
                    yaxis-pos = ""
                    d3-format= "">
<!-- angular directive is donutchart -->
<!-- directive variables are xaxis-name,yaxis-name,xaxis-pos,yaxis-pos,y axis data format(d3-format)
and finally the datajson variable which is holding the external data source -->
</div>
                
3> The Code in Angular Directive.
angular.module('AngularD3DonutChart', []) // Angular Module Name
     .directive('donutchart', function () { // Angular Directive
        return {
            restrict: 'E', // Directive Scope is Element
            replace: true, // replace original markup with template 
            transclude: false, // not to copy original HTML DOM
            compile: function (elem, attrs) {// the compilation of DOM is done here.
                // It is responsible for produce HTML DOM or it returns a combined link function
                // Further Docuumentation on this - http://docs.angularjs.org/guide/directive
			console.log(attrs.id);
			console.log(attrs.datajson);
                var html = "<div id='" + attrs.id + "' ></div>"; // the HTML to be produced
                var newElem = $(html);
                elem.replaceWith(newElem); // Replacement of the element.
                var ourGraph = new DonutChart(attrs.datajson);
                    ourGraph.workOnElement('#'+attrs.id);
                // Work on particular element
                ourGraph.generateGraph();  // generate the actual bar graph
         } 
     }
});
                
4> The d3 related bar graph code.
// properties are directly passed to `create` method
  var DonutChart = Class.create({
                    initialize: function(datajson) {
                        this.datajson = datajson;
                                           
                    },
                workOnElement: function(element) {
                		this.element = element;
                },
                generateGraph: function() {
                //d3 specific coding
                var width = 960,
                    height = 500,
                    radius = Math.min(width, height) / 2;
                
                var color = d3.scale.ordinal()
                    .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
                
                var arc = d3.svg.arc()
                    .outerRadius(radius - 10)
                    .innerRadius(radius - 70);
                
                var pie = d3.layout.pie()
                    .sort(null)
                    .value(function(d) { return d.population; });
                
                var svg = d3.select(this.element).append("svg")
                    .attr("width", width)
                    .attr("height", height)
                  .append("g")
                    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
                
                d3.json(this.datajson, function(error, data) {
                
                  data.forEach(function(d) {
                    d.population = +d.population;
                  });
                
                  var g = svg.selectAll(".arc")
                      .data(pie(data))
                    .enter().append("g")
                      .attr("class", "arc");
                
                  g.append("path")
                      .attr("d", arc)
                      .style("fill", function(d) { return color(d.data.age); });
                
                  g.append("text")
                      .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; })
                      .attr("dy", ".35em")
                      .style("text-anchor", "middle")
                      .text(function(d) { return d.data.age; });  
            }.bind(this));
	 }
});

          
Json Data
[
     {"age":"<5","population":"2704659"},
     {"age":"5-13","population":"4499890"},
     {"age":"14-17","population":"2159981"},
     {"age":"18-24","population":"3853788"},
     {"age":"25-44","population":"14106543"},
     {"age":"45-64","population":"8819342"},
     {"age":"=65","population":"612463"}
]


                
 
1> Added the angular.js,prototype.js, d3.js in the HTML Page and the reference of the d3 related javascript class.
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="js/pieplotProto.js"></script>
<script src="js/angulard3pieplotbar.js"></script>
2> Put the the d3.js related Angular Directive in HTML.
<div id="d3pie" angulard3-pie-chart datajson="'sample.json'"
                    xaxis-name = ""
                    xaxis-pos = ""
                    yaxis-name = ""
                    yaxis-pos = ""
                    d3-format= "">
<!-- angular directive is angulard3-pie-chart -->
<!-- directive variables are xaxis-name,yaxis-name,xaxis-pos,yaxis-pos,y axis data format(d3-format)
and finally the datajson variable which is holding the external data source -->
</div>
                
3> The Code in Angular Directive.
angular.module('AngularD3PieChart', []) // Angular Module Name
     .directive('angulard3PieChart', function () { // Angular Directive
          return {
             restrict: 'A',
          scope: {
             datajson: '=',
             xaxisName: '=',
             xaxisPos: '=',
             yaxisName: '=',
             yaxisPos: '=',
             d3Format: '='
             // All the Angular Directive Vaiables used as d3.js parameters
                              },
          link: function (scope, elem, attrs) {
                var ourGraph = new PieChart(scope.datajson);
                //d3 related Variable initialisation
                ourGraph.workOnElement('#'+elem[0].id); // Work on particular element
                ourGraph.generateGraph(); // generate the actual bar graph
         } 
     }
});
                
4> The d3 related bar graph code.
// properties are directly passed to `create` method
  var PieChart = Class.create({
                    initialize: function(datajson) {
                        this.datajson = datajson;
                                           
                    },
                workOnElement: function(element) {
                		this.element = element;
                },
                generateGraph: function() {
                //d3 specific coding
                var width = 960,
                    height = 500,
                    radius = Math.min(width, height) / 2;
                
                var color = d3.scale.ordinal()
                    .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
                
                var arc = d3.svg.arc()
                    .outerRadius(radius - 10)
                    .innerRadius(0);
                
                var pie = d3.layout.pie()
                    .sort(null)
                    .value(function(d) { return d.population; });
                
                var svg = d3.select(this.element).append("svg")
                    .attr("width", width)
                    .attr("height", height)
                  .append("g")
                    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
                
                d3.json(this.datajson, function(error, data) {
                
                  data.forEach(function(d) {
                    d.population = +d.population;
                  });
                
                  var g = svg.selectAll(".arc")
                      .data(pie(data))
                    .enter().append("g")
                      .attr("class", "arc");
                
                  g.append("path")
                      .attr("d", arc)
                      .style("fill", function(d) { return color(d.data.age); });
                
                  g.append("text")
                      .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; })
                      .attr("dy", ".35em")
                      .style("text-anchor", "middle")
                      .text(function(d) { return d.data.age; }); 
            }.bind(this));
	 }
});

          
1> Added the angular.js,prototype.js, d3.js in the HTML Page and the reference of the d3 related javascript class.
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="js/pieplotProto.js"></script>
<script src="js/angulard3pieplotbar.js"></script>
2> Put the the d3.js related Angular Directive in HTML.
<piechart id="d3pie" datajson="sample.json"
                    xaxis-name = ""
                    xaxis-pos = ""
                    yaxis-name = ""
                    yaxis-pos = ""
                    d3-format= "">
<!-- angular directive is piechart -->
<!-- directive variables are xaxis-name,yaxis-name,xaxis-pos,yaxis-pos,y axis data format(d3-format)
and finally the datajson variable which is holding the external data source -->
</div>
                
3> The Code in Angular Directive.
angular.module('AngularD3PieChart', []) // Angular Module Name
     .directive('piechart', function () { // Angular Directive
        return {
            restrict: 'E', // Directive Scope is Element
            replace: true, // replace original markup with template 
            transclude: false, // not to copy original HTML DOM
            compile: function (elem, attrs) {// the compilation of DOM is done here.
                // It is responsible for produce HTML DOM or it returns a combined link function
                // Further Docuumentation on this - http://docs.angularjs.org/guide/directive
			console.log(attrs.id);
			console.log(attrs.datajson);
                var html = "<div id='" + attrs.id + "' ></div>"; // the HTML to be produced
                var newElem = $(html);
                elem.replaceWith(newElem); // Replacement of the element.
                var ourGraph = new PieChart(attrs.datajson);
                    ourGraph.workOnElement('#'+attrs.id);
                // Work on particular element
                ourGraph.generateGraph();  // generate the actual bar graph
         } 
     }
});
                
4> The d3 related bar graph code.
// properties are directly passed to `create` method
  var PieChart = Class.create({
                    initialize: function(datajson) {
                        this.datajson = datajson;
                                           
                    },
                workOnElement: function(element) {
                		this.element = element;
                },
                generateGraph: function() {
                //d3 specific coding
                var width = 960,
                    height = 500,
                    radius = Math.min(width, height) / 2;
                
                var color = d3.scale.ordinal()
                    .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
                
                var arc = d3.svg.arc()
                    .outerRadius(radius - 10)
                    .innerRadius(0);
                
                var pie = d3.layout.pie()
                    .sort(null)
                    .value(function(d) { return d.population; });
                
                var svg = d3.select(this.element).append("svg")
                    .attr("width", width)
                    .attr("height", height)
                  .append("g")
                    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
                
                d3.json(this.datajson, function(error, data) {
                
                  data.forEach(function(d) {
                    d.population = +d.population;
                  });
                
                  var g = svg.selectAll(".arc")
                      .data(pie(data))
                    .enter().append("g")
                      .attr("class", "arc");
                
                  g.append("path")
                      .attr("d", arc)
                      .style("fill", function(d) { return color(d.data.age); });
                
                  g.append("text")
                      .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; })
                      .attr("dy", ".35em")
                      .style("text-anchor", "middle")
                      .text(function(d) { return d.data.age; }); 
            }.bind(this));
	 }
});

          
Json Data
[
     {"age":"<5","population":"2704659"},
     {"age":"5-13","population":"4499890"},
     {"age":"14-17","population":"2159981"},
     {"age":"18-24","population":"3853788"},
     {"age":"25-44","population":"14106543"},
     {"age":"45-64","population":"8819342"},
     {"age":"=65","population":"612463"}
]


                
 
1> Added the angular.js,prototype.js, d3.js in the HTML Page and the reference of the d3 related javascript class.
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="js/donutmultiplotProto.js"></script>
<script src="js/angulard3donutmultiplotbar.js"></script>
2> Put the the d3.js related Angular Directive in HTML.
<div id="d3donutmulti" angulard3-donutmulti-chart datajson="'sample.json'"
                    xaxis-name = ""
                    xaxis-pos = ""
                    yaxis-name = ""
                    yaxis-pos = ""
                    d3-format= "">
<!-- angular directive is angulard3-donutmulti-chart -->
<!-- directive variables are xaxis-name,yaxis-name,xaxis-pos,yaxis-pos,y axis data format(d3-format)
and finally the datajson variable which is holding the external data source -->
</div>
                
3> The Code in Angular Directive.
angular.module('AngularD3DonutMultiChart', []) // Angular Module Name
     .directive('angulard3DonutmultiChart', function () { // Angular Directive
          return {
             restrict: 'A',
          scope: {
             datajson: '=',
             xaxisName: '=',
             xaxisPos: '=',
             yaxisName: '=',
             yaxisPos: '=',
             d3Format: '='
             // All the Angular Directive Vaiables used as d3.js parameters
                              },
          link: function (scope, elem, attrs) {
                var ourGraph = new DonutMultiChart(scope.datajson);
                //d3 related Variable initialisation
                ourGraph.workOnElement('#'+elem[0].id); // Work on particular element
                ourGraph.generateGraph(); // generate the actual bar graph
         } 
     }
});
                
4> The d3 related bar graph code.
// properties are directly passed to `create` method
  var DonutChart = Class.create({
                    initialize: function(datajson) {
                        this.datajson = datajson;
                                           
                    },
                workOnElement: function(element) {
                		this.element = element;
                },
                generateGraph: function() {
                //d3 specific coding
                var radius = 74,
                    padding = 10;
                
                var color = d3.scale.ordinal()
                    .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
                
                var arc = d3.svg.arc()
                    .outerRadius(radius)
                    .innerRadius(radius - 30);
                
                var pie = d3.layout.pie()
                    .sort(null)
                    .value(function(d) { return d.population; });
                
                d3.json(this.datajson, function(error, data) {
                  color.domain(d3.keys(data[0]).filter(function(key) { return key !== "State"; }));
                
                  data.forEach(function(d) {
                    d.ages = color.domain().map(function(name) {
                      return {name: name, population: +d[name]};
                    });
                  });
                
                  var legend = d3.select(this.element).append("svg")
                      .attr("class", "legend")
                      .attr("width", radius * 2)
                      .attr("height", radius * 2)
                    .selectAll("g")
                      .data(color.domain().slice().reverse())
                    .enter().append("g")
                      .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
                
                  legend.append("rect")
                      .attr("width", 18)
                      .attr("height", 18)
                      .style("fill", color);
                
                  legend.append("text")
                      .attr("x", 24)
                      .attr("y", 9)
                      .attr("dy", ".35em")
                      .text(function(d) { return d; });
                
                  var svg = d3.select("body").selectAll(".pie")
                      .data(data)
                    .enter().append("svg")
                      .attr("class", "pie")
                      .attr("width", radius * 2)
                      .attr("height", radius * 2)
                    .append("g")
                      .attr("transform", "translate(" + radius + "," + radius + ")");
                
                  svg.selectAll(".arc")
                      .data(function(d) { return pie(d.ages); })
                    .enter().append("path")
                      .attr("class", "arc")
                      .attr("d", arc)
                      .style("fill", function(d) { return color(d.data.name); });
                
                  svg.append("text")
                      .attr("dy", ".35em")
                      .style("text-anchor", "middle")
                      .text(function(d) { return d.State; }); 
            }.bind(this));
	 }
});

          
1> Added the angular.js,prototype.js, d3.js in the HTML Page and the reference of the d3 related javascript class.
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="js/donutmultiplotProto.js"></script>
<script src="js/angulard3donutmultiplotbar.js"></script>
2> Put the the d3.js related Angular Directive in HTML.
<donutmultichart id="d3donutmulti" datajson="sample.json"
                    xaxis-name = ""
                    xaxis-pos = ""
                    yaxis-name = ""
                    yaxis-pos = ""
                    d3-format= "">
<!-- angular directive is donutmultichart -->
<!-- directive variables are xaxis-name,yaxis-name,xaxis-pos,yaxis-pos,y axis data format(d3-format)
and finally the datajson variable which is holding the external data source -->
</div>
                
3> The Code in Angular Directive.
angular.module('AngularD3DonutMultiChart', []) // Angular Module Name
     .directive('donutmultichart', function () { // Angular Directive
        return {
            restrict: 'E', // Directive Scope is Element
            replace: true, // replace original markup with template 
            transclude: false, // not to copy original HTML DOM
            compile: function (elem, attrs) {// the compilation of DOM is done here.
                // It is responsible for produce HTML DOM or it returns a combined link function
                // Further Docuumentation on this - http://docs.angularjs.org/guide/directive
			console.log(attrs.id);
			console.log(attrs.datajson);
                var html = "<div id='" + attrs.id + "' ></div>"; // the HTML to be produced
                var newElem = $(html);
                elem.replaceWith(newElem); // Replacement of the element.
                var ourGraph = new DonutMultiChart(attrs.datajson);
                    ourGraph.workOnElement('#'+attrs.id);
                // Work on particular element
                ourGraph.generateGraph();  // generate the actual bar graph
         } 
     }
});
                
4> The d3 related bar graph code.
// properties are directly passed to `create` method
  var DonutChart = Class.create({
                    initialize: function(datajson) {
                        this.datajson = datajson;
                                           
                    },
                workOnElement: function(element) {
                		this.element = element;
                },
                generateGraph: function() {
                //d3 specific coding
                var radius = 74,
                    padding = 10;
                
                var color = d3.scale.ordinal()
                    .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
                
                var arc = d3.svg.arc()
                    .outerRadius(radius)
                    .innerRadius(radius - 30);
                
                var pie = d3.layout.pie()
                    .sort(null)
                    .value(function(d) { return d.population; });
                
                d3.json(this.datajson, function(error, data) {
                  color.domain(d3.keys(data[0]).filter(function(key) { return key !== "State"; }));
                
                  data.forEach(function(d) {
                    d.ages = color.domain().map(function(name) {
                      return {name: name, population: +d[name]};
                    });
                  });
                
                  var legend = d3.select(this.element).append("svg")
                      .attr("class", "legend")
                      .attr("width", radius * 2)
                      .attr("height", radius * 2)
                    .selectAll("g")
                      .data(color.domain().slice().reverse())
                    .enter().append("g")
                      .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
                
                  legend.append("rect")
                      .attr("width", 18)
                      .attr("height", 18)
                      .style("fill", color);
                
                  legend.append("text")
                      .attr("x", 24)
                      .attr("y", 9)
                      .attr("dy", ".35em")
                      .text(function(d) { return d; });
                
                  var svg = d3.select("body").selectAll(".pie")
                      .data(data)
                    .enter().append("svg")
                      .attr("class", "pie")
                      .attr("width", radius * 2)
                      .attr("height", radius * 2)
                    .append("g")
                      .attr("transform", "translate(" + radius + "," + radius + ")");
                
                  svg.selectAll(".arc")
                      .data(function(d) { return pie(d.ages); })
                    .enter().append("path")
                      .attr("class", "arc")
                      .attr("d", arc)
                      .style("fill", function(d) { return color(d.data.name); });
                
                  svg.append("text")
                      .attr("dy", ".35em")
                      .style("text-anchor", "middle")
                      .text(function(d) { return d.State; }); 
            }.bind(this));
	 }
});

          
Json Data
[
 {"State":"AL","Under 5 Years":"310504","5 to 13 Years":"552339","14 to 17 Years":"259034","18 to 24 Years":"450818","25 to 44 Years":"1215966","45 to 64 Years":"641667"},
 {"State":"AK","Under 5 Years":"52083","5 to 13 Years":"85640","14 to 17 Years":"42153","18 to 24 Years":"74257","25 to 44 Years":"183159","45 to 64 Years":"50277"},
 {"State":"AZ","Under 5 Years":"515910","5 to 13 Years":"828669","14 to 17 Years":"362642","18 to 24 Years":"601943","25 to 44 Years":"1804762","45 to 64 Years":"1523681"},
 {"State":"AR","Under 5 Years":"202070","5 to 13 Years":"343207","14 to 17 Years":"157204","18 to 24 Years":"264160","25 to 44 Years":"754420","45 to 64 Years":"727124"},
 {"State":"CA","Under 5 Years":"2704659","5 to 13 Years":"4499890","14 to 17 Years":"2159981","18 to 24 Years":"3853788","25 to 44 Years":"10604510","45 to 64 Years":"8819342"},
 {"State":"CO","Under 5 Years":"358280","5 to 13 Years":"587154","14 to 17 Years":"261701","18 to 24 Years":"466194","25 to 44 Years":"1464939","45 to 64 Years":"1290094"},
 {"State":"CT","Under 5 Years":"211637","5 to 13 Years":"403658","14 to 17 Years":"196918","18 to 24 Years":"325110","25 to 44 Years":"916955","45 to 64 Years":"968967"},
 {"State":"DE","Under 5 Years":"59319","5 to 13 Years":"99496","14 to 17 Years":"47414","18 to 24 Years":"84464","25 to 44 Years":"230183","45 to 64 Years":"230528"}
 
]

                
 
1> Added the angular.js,prototype.js, d3.js in the HTML Page and the reference of the d3 related javascript class.
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="js/negativeplotProto.js"></script>
<script src="js/angulard3negativeplotbar.js"></script>
2> Put the the d3.js related Angular Directive in HTML.
<div id="d3negative" angulard3-negative-chart datajson="'sample.json'"
                    xaxis-name = ""
                    xaxis-pos = ""
                    yaxis-name = ""
                    yaxis-pos = ""
                    d3-format= "">
<!-- angular directive is angulard3-negative-chart -->
<!-- directive variables are xaxis-name,yaxis-name,xaxis-pos,yaxis-pos,y axis data format(d3-format)
and finally the datajson variable which is holding the external data source -->
</div>
                
3> The Code in Angular Directive.
angular.module('AngularD3NegativeChart', []) // Angular Module Name
     .directive('angulard3NegativeChart', function () { // Angular Directive
          return {
             restrict: 'A',
          scope: {
             datajson: '=',
             xaxisName: '=',
             xaxisPos: '=',
             yaxisName: '=',
             yaxisPos: '=',
             d3Format: '='
             // All the Angular Directive Vaiables used as d3.js parameters
                              },
          link: function (scope, elem, attrs) {
                var ourGraph = new NegativeChart(scope.datajson);
                //d3 related Variable initialisation
                ourGraph.workOnElement('#'+elem[0].id); // Work on particular element
                ourGraph.generateGraph(); // generate the actual bar graph
         } 
     }
});
                
4> The d3 related bar graph code.
// properties are directly passed to `create` method
  var NegativeChart = Class.create({
                    initialize: function(datajson) {
                        this.datajson = datajson;
                                           
                    },
                workOnElement: function(element) {
                		this.element = element;
                },
                generateGraph: function() {
                //d3 specific coding
                var margin = {top: 30, right: 10, bottom: 10, left: 10},
                    width = 960 - margin.left - margin.right,
                    height = 500 - margin.top - margin.bottom;
                
                var x = d3.scale.linear()
                    .range([0, width])
                
                var y = d3.scale.ordinal()
                    .rangeRoundBands([0, height], .2);
                
                var xAxis = d3.svg.axis()
                    .scale(x)
                    .orient("top");
                
                var svg = d3.select(this.element).append("svg")
                    .attr("width", width + margin.left + margin.right)
                    .attr("height", height + margin.top + margin.bottom)
                  .append("g")
                    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
                
                d3.json(this.datajson, function(error, data) {
                  x.domain(d3.extent(data, function(d) { return d.value; })).nice();
                  y.domain(data.map(function(d) { return d.name; }));
                
                svg.selectAll(".bar")
                      .data(data)
                    .enter().append("rect")
                      .attr("class", function(d) { return d.value < 0 ? "bar negative" : "bar positive"; })
                      .attr("x", function(d) { return x(Math.min(0, d.value)); })
                      .attr("y", function(d) { return y(d.name); })
                      .attr("width", function(d) { return Math.abs(x(d.value) - x(0)); })
                      .attr("height", y.rangeBand());
                
                svg.append("g")
                      .attr("class", "x axis")
                      .call(xAxis);
                
                svg.append("g")
                      .attr("class", "y axis")
                    .append("line")
                      .attr("x1", x(0))
                      .attr("x2", x(0))
                      .attr("y2", height);
            }.bind(this));
	 }
});

          
1> Added the angular.js,prototype.js, d3.js in the HTML Page and the reference of the d3 related javascript class.
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="js/negativeplotProto.js"></script>
<script src="js/angulard3negativeplotbar.js"></script>
2> Put the the d3.js related Angular Directive in HTML.
<negativechart id="d3negative" datajson="sample.json"
                    xaxis-name = ""
                    xaxis-pos = ""
                    yaxis-name = ""
                    yaxis-pos = ""
                    d3-format= "">
<!-- angular directive is negativechart -->
<!-- directive variables are xaxis-name,yaxis-name,xaxis-pos,yaxis-pos,y axis data format(d3-format)
and finally the datajson variable which is holding the external data source -->
</div>
                
3> The Code in Angular Directive.
angular.module('AngularD3NegativeChart', []) // Angular Module Name
     .directive('negativechart', function () { // Angular Directive
        return {
            restrict: 'E', // Directive Scope is Element
            replace: true, // replace original markup with template 
            transclude: false, // not to copy original HTML DOM
            compile: function (elem, attrs) {// the compilation of DOM is done here.
                // It is responsible for produce HTML DOM or it returns a combined link function
                // Further Docuumentation on this - http://docs.angularjs.org/guide/directive
			console.log(attrs.id);
			console.log(attrs.datajson);
                var html = "<div id='" + attrs.id + "' ></div>"; // the HTML to be produced
                var newElem = $(html);
                elem.replaceWith(newElem); // Replacement of the element.
                var ourGraph = new NegativeChart(attrs.datajson);
                    ourGraph.workOnElement('#'+attrs.id);
                // Work on particular element
                ourGraph.generateGraph();  // generate the actual bar graph
         } 
     }
});
                
4> The d3 related bar graph code.
// properties are directly passed to `create` method
  var NegativeChart = Class.create({
                    initialize: function(datajson) {
                        this.datajson = datajson;
                                           
                    },
                workOnElement: function(element) {
                		this.element = element;
                },
                generateGraph: function() {
                //d3 specific coding
                var margin = {top: 30, right: 10, bottom: 10, left: 10},
                    width = 960 - margin.left - margin.right,
                    height = 500 - margin.top - margin.bottom;
                
                var x = d3.scale.linear()
                    .range([0, width])
                
                var y = d3.scale.ordinal()
                    .rangeRoundBands([0, height], .2);
                
                var xAxis = d3.svg.axis()
                    .scale(x)
                    .orient("top");
                
                var svg = d3.select(this.element).append("svg")
                    .attr("width", width + margin.left + margin.right)
                    .attr("height", height + margin.top + margin.bottom)
                  .append("g")
                    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
                
                d3.json(this.datajson, function(error, data) {
                  x.domain(d3.extent(data, function(d) { return d.value; })).nice();
                  y.domain(data.map(function(d) { return d.name; }));
                
                svg.selectAll(".bar")
                      .data(data)
                    .enter().append("rect")
                      .attr("class", function(d) { return d.value < 0 ? "bar negative" : "bar positive"; })
                      .attr("x", function(d) { return x(Math.min(0, d.value)); })
                      .attr("y", function(d) { return y(d.name); })
                      .attr("width", function(d) { return Math.abs(x(d.value) - x(0)); })
                      .attr("height", y.rangeBand());
                
                svg.append("g")
                      .attr("class", "x axis")
                      .call(xAxis);
                
                svg.append("g")
                      .attr("class", "y axis")
                    .append("line")
                      .attr("x1", x(0))
                      .attr("x2", x(0))
                      .attr("y2", height);
            }.bind(this));
	 }
});

          
Json Data
[
     {"name":"A","value":"-15"},
     {"name":"B","value":"-20"},
     {"name":"C","value":"-22"},
     {"name":"D","value":"-18"},
     {"name":"E","value":"2"},
     {"name":"F","value":"6"},
     {"name":"G","value":"-26"},
     {"name":"H","value":"-18"}
 
]