D3 Examples - Animated B(e)ar Chart

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8"> 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <link href='https://fonts.googleapis.com/css?family=Roboto:400,700,500,300' rel='stylesheet' type='text/css'>
  <style>
    body { margin:20px;position:fixed;top:0;right:0;bottom:0;left:0;} 
    svg { width:100%; height: 100% }
    * {font-family: 'Roboto'}
    h1 {
      font-weight: 500;
    }
    p {
      font-style: italic;
      font-weight: 100;
    }
    .title-line {
      width: 70%;
      height: 2px;
      background: #1d1d1d;
    }
    .bar {height: 50px; margin-top: 20px; position: relative;}
    .percentage {color: #1d1d1d; font-size: 40px;}
    .bar-text {
      position: absolute;
    }
    .bar-text {
      opacity: 0;
    }
    .name {
      display: block;
      width: 130px;
      float: right;
      font-weight: bold;
      margin-top: 6px;
      text-transform: uppercase;
    }
    .bears {
      font-weight: 100;
      display: block;
    }
    .domain {
      fill: none;
      stroke-width: 1px;
      stroke: #1d1d1d;
    }
  </style>
</head>
​
<body>
  <h1>Bears Are Some of the Most Fearsome Beasts in the Forest</h1>
  <div class="title-line"></div>
  <p>Here men from the planet Earth first set foot upon the Moon. July 1969 AD. We came in peace for all mankind.
But why, some say, the moon? Why choose this as our goal? And they may as well ask why climb the highest mountain?
When I orbited the Earth in a spaceship, I saw for the first time how beautiful our planet is. Mankind, let us preserve and increase this beauty, and not destroy it!</p>
  <div id="chart"></div>
  <script>
    var data = [
      {
        name: "<span class='name'>Black Bears <span class='bears'>Were Bears</span></span>", 
        value: 51.08
      },
      {
        name: "<span class='name'>Panda Bears <span class='bears'>Were Bears</span><span>", 
        value: 26.38
      },
      {
        name: "<span class='name'>Brown Bears <span class='bears'>Were Bears</span></span>", 
        value: 22.54
      }
    ];
    
    var margin = {top: 20, right: 0, bottom: 70, left: 10},
        width = 900 - margin.left - margin.right,
        height = 300 - margin.top - margin.bottom;
    
    var colors = d3.scale.ordinal()
      .range(['#ed3232', '#86ceb6', '#e8be3a'])
    
    var max = d3.max(data, function(d) { return +d.value;} );
    
    var stagger_delay = function(d, i) { return 1000 * i};
    
    var xScale = d3.scale.linear()
      .domain([0, 100])
      .range([0, width]);
​
        var yScale = d3.scale.ordinal()
      .domain(d3.range(0,data.length))
      .rangeRoundBands([0, height], 0.1, 0);
    
    var chart = d3.select('#chart').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 + ')');
​
    var bar_group = chart
      .selectAll('g')
      .data(data)
      .enter().append('g');
    
    var bar_track = bar_group.append('rect')
            .attr('y', function(d,i) {return yScale(i);})
            .attr('class', 'track')
            .attr('width', width)
            .attr('height', 50)
            .attr('fill', '#f1f1f1');
    
    var bars = bar_group.append('rect')
            .style('fill', function(d,i) { return colors(i); })
            .attr('y', function(d,i) {return yScale(i);})
            .attr('class', 'bar')
            .attr('width', 0);
    
    var yAxis = d3.svg.axis()
        .tickValues(0)
      .scale(yScale)
      .orient('left');
    
    var xAxis = d3.svg.axis()
        .tickFormat(function(d) { return d + "%"; })
      .scale(xScale)
      .orient('bottom');
    
    var bar_text_wrap = chart.selectAll('g')
        .append('g')
        .attr('class', 'bar-text')
      .attr('x', function(d) {return xScale(d.value) + 8;})
    
    var bar_text = bar_text_wrap.append('svg:foreignObject')
        .attr('width', 270)
        .attr('height', 50)
      .attr('y', function(d, i) {return yScale(i) + (yScale.rangeBand() / 2) - 35;})
      .attr('x', function(d) {return xScale(d.value) + 8;})
        .html(function(d) { return '<span class="percentage">' + d.value + '%</span>' + d.name });
    
    bars.transition()
      .delay(stagger_delay).duration(1500)
      .attr('width', function(d) {return xScale(d.value);})
      .attr('x', 0)
        .each('end', function() {
        d3.selectAll('.bar-text')
          .transition()
                .delay(stagger_delay)
            .style('opacity', 1);
      });
    
    chart.append('g')
      .attr('class', 'axis x')
      .attr('transform', 'translate(0,' + height + ')')
      .call(xAxis);
    
    chart.append('g')
      .attr('class', 'axis y')
      .call(yAxis);
    
    d3.select('body').on('resize', resize); 
​
    function resize() {
        width = parseInt(d3.select('#chart').style('width'), 10);
        width = width - margin.left - margin.right;
      
        xScale.range([0, width]);
    }
    
  </script>
</body>
​
    