simple d3 barchart with transition

forked from jpmarindiaz's block: simple d3 barchart

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { 		
     margin:0;
      position:fixed;
      top:0;right:0;bottom:0;left:0; 
    }
  
    .bars {
      fill: #89ffac;
    }
    
    text.label {
      text-anchor: middle;
      font-size: 0.8em;
      fill: #5e2f44;
      font-family: "monospace";
    }
    
    #chart {
      width: 100%;
      height: 500px;
    }
  
  
  </style>
</head>

<body>
  <div id="chart"></div>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
    var svg = d3.select("div").append("svg")
      .attr("width", 960)
      .attr("height", 500)
    	.attr('transform', 'translate(50,50)')

//     svg.append("text")
//       .text("Edit the code below to change me!")
//       .attr("y", 200)
//       .attr("x", 120)
//       .attr("font-size", 36)
//       .attr("font-family", "monospace");
    
    
    var margin = {top: 40, right: 20, bottom: 20, left: 40};
    var chartDimensions = d3.select("#chart").node().getBoundingClientRect();
    //var width = window.innerWidth - margin.left - margin.right;
    //var height = window.innerHeight - margin.top - margin.bottom;
    var width = chartDimensions.width - margin.left - margin.right;
    var height = chartDimensions.height - margin.top - margin.bottom;
    
    // data
    var data = [
      {key: "a", value: 20},
    	{key: "b", value: 30},
    	{key: "c", value: 550},
    	{key: "d", value: 200},
    	{key: "e", value: 50}
    	];
    
    var yMax = d3.max(data, function(d){return d.value});
    console.log(yMax)
    var y = d3.scaleLinear()
    	.domain([0, yMax *1.15])
    	.range([height, 0]);

https://d3js.org/d3.v4.min.js