Animated Bar Chart

<!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:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { width:100%; height: 100% }
    * {font-family: 'Roboto'}
    #chart { border-left: 3px solid #1d1d1d; margin: 60px; width: 600px;}
    .bar {height: 50px; margin-top: 20px; position: relative;}
    .more {background: #e8be3a;}
    .less {background: #86ceb6;}
    .average {background: #ed3232;}
    .percentage {color: #1d1d1d; font-size: 40px;}
    p {
      width: 210px;
      left: 100%;
      padding-left: 10px;
      position: absolute;
      top: -20px;
    }
    .name {
      opacity: 0; 
      float: right;
      font-weight: bold;
      text-transform: uppercase;
      margin-top: 6px;
      width: 130px;
    }
    .bears {
      font-weight: 100;
    }
  </style>
</head>

<body>
  <div id="chart"></div>
  <script>
    var data = [
      {name: "Average Bears <span class='bears'>Were Bears</span>", value: 65, class: 'bar average'},
      {name: "Less Bears <span class='bears'>Were Bears</span>", value: 20, class: 'bar less'},
      {name: "More Bears <span class='bears'>Were Bears</span>", value: 15, class: 'bar more'}
    ];
    
    var width = 600,
      	height = 350;
    
    var max = d3.max(data, function(d) { return +d.value;} );
    
    var x = d3.scale.linear()
      .domain([0, max])
      .range([0, width]);

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js