GDP_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; }
    svg {
      margin-top: 10px;
      margin-left: auto;
      margin-right: auto;
      display: block;
      background-color: lightgrey;
		}

.axis path,
		.axis line {
      fill: none;
      stroke: #000;
      shape-rendering: crispEdges;
		}

.axis text{
      font: Times;
      font-size: 12px;
      font-weight: bold;
		}
  </style>
</head>

<body>
  <script>
 		var margin = {top: 20, right: 10, bottom: 100, left: 40};
  	var width = 700 - margin.right - margin.left;
    var height = 500 - margin.top - margin.bottom;
    
    var svg = d3.select('body')
    		.append('svg')
    		.attr({
          'width' : width + margin.right + margin.left,
          'height': height + margin.top + margin.bottom         
        })
    		.append('g')
    			.attr('transform', `translate(${margin.left}, ${margin.right})`);

</script>
</body>

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