Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<meta charset="utf-8">
<title>Pie Chart</title>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
​
var width = 960,
    height = 500,
    radius = Math.min(width, height) / 2 - 10;
​
​
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 color = d3.scale.category20();
​
var arc = d3.svg.arc()
    .outerRadius(radius);
  
  var arcOver = d3.svg.arc()
        .outerRadius(radius + 10);
​
var pie = d3.layout.pie()
    .sort(null)
    .value(function(d) { return d.population; });
​
  var labelArc = d3.svg.arc()
    .outerRadius(radius - 40)
    .innerRadius(radius - 40);
  
var svg = d3.select("body").append("svg")
    .datum(data)
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
​
var arcs = svg.selectAll("g.arc")
    .data(pie)
  .enter().append("g")
    .attr("class", "arc");
​
arcs.append("path")
    .attr("fill", function(d, i) { return color(i); }).on("click", function(d) {
            d3.select(this)
               .attr("class","test")
               .attr("stroke","white")
               .transition()
            .ease("bounce")
               .duration(1000)
               .attr("d", arcOver)             
               .attr("stroke-width",6);
        })
        .on("mouseleave", function(d) {
            d3.select(this).transition()
               .attr("d", arc)
               .attr("stroke","none");
        })
  .transition()
    .ease("bounce")
    .duration(2000)
    .attrTween("d", tweenPie);
  //.transition()
   // .ease("elastic")
   // .delay(function(d, i) { return 2000 + i * 50; })
   // .duration(750);
    //.attrTween("d", tweenDonut);
​
function tweenPie(b) {
  b.innerRadius = 0;
  var i = d3.interpolate({startAngle: 0, endAngle: 0}, b);
  return function(t) { return arc(i(t)); };
}
​
arcs.append("text")
      .attr("transform", function(d) { return "translate(" + labelArc.centroid(d) + ")"; })
      .attr("dy", ".35em")
      .text(function(d) { return d.data.age; });
​
function type(d) {
  d.population = +d.population;
  return d;
}
​
</script>
 
.arc {
  z-index:-1;
}
​
.arc text {
  font: 10px sans-serif;
  text-anchor: middle;
}
​
​
.test {
  z-index:1;
}
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
siddharthpolisitipro
0viewers