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: #ff28b4;
    }
    
    text.label {
      text-anchor: middle;
      font-size: 0.8em;
      fill: #9954aa;
      font-family: "monospace";
    }
  
  
  </style>
</head>

<body>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
    var svg = d3.select("body").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 height = 300;
    var width = 400;
    
    // 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