bar chart with legend

<!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; }
  </style>
</head>

<body>
  <script>
    
    let data = [20, 30, 40, 10];
    
	class BarChart {
    
    static get defaults() {
      return {
        margin: { top: 10, right: 10, bottom: 30, left: 10 }
      };
    }
    
		construct(config) {
      this.configure(config);
      this.init();
		}
    
    configure(config) {
      Object.assign(this, BarChart.defaults, config);
    }
    
    init() {
      const { element, margin, data } = this;
      
      this.svg = d3.select(element)
        .append('svg')
        .attr('width', width)
        .attr('height', height)
      .append('g')
      	.attr('transform', `translate(${margin.top},${margin.left})`)
      ;
      
      this.render(data);
    }
    
    render(data) {
      const {svg} = this;

}
	}
    
    let barChart = new BarChart({
      element: 'body',
    	data: data
    });

</script>
</body>

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