Donout/pie chart

ordinal scale

by Igor Cuckovic

CSS

svg text {
    fill: #fff; 
    font-family: "Arial";

}

svg .arc {
    stroke: #fff;
    stroke-width: 1px;
}

JavaScript

var w = 500,
    h = 500;
/*
var 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  }
    ];
*/

/*
var data = [[10, "first"], [80, "second"], [50, "third"], [60, "fourth"], [30, "fift"], [42, "sixth"]];
*/

var data = [[2704659, "<5"], [4499890, "5-13"], [2159981, "14-17"], [3853788, "18-24"], [14106543, "25-44"], [8819342, "45-64"], [8819342, "≥65"]];

/*
var color = d3.scale.ordinal()
            .range(["darkred", "steelblue"]);
*/

// min - max calculations
var max = d3.max(data, function(array) {
  return d3.max(array.filter(function(value) {
    return typeof value === "number";
  }));
});

var min = d3.min(data, function(array) {
  return d3.min(array.filter(function(value) {
    return typeof value === "number";
  }));
});

//console.log(min,max);


var color = d3.scale.linear()
    .domain([min, max])
    .range(["darkred", "steelblue"]);


var canvas = d3.select("body").append("svg")
                    .attr("width", w)
                    .attr("height", h);


var group = canvas.append("g")
                    .attr("transform", "translate(200, 200)");

var r = 150;
var p = Math.PI * 2;

var arc = d3.svg.arc()
            .innerRadius(0)
            .outerRadius(r);

var pie = d3.layout.pie()
            .value(function(d){return d[0];});

//console.log(pie(data));

var showText = function(d){
            removeLabel();
            canvas.append("text")
                  .text(d.data[1])
            .attr({
				"x": 190, 
				"y": 200

			})
                  .attr("transform", "translate(" + arc.centroid(d) + ")")
                  .attr({
                    "id": "textDesc"
			        });
            
    
            console.log(d.data[1]);
           ...