Bars

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    .bar {
  background-color: teal;
  height: 20px;
  margin-top: 2px;
}
    button {padding: 10px 20px; border-radius: 5px; margin-top: 5px; }
    
    button:hover {background-color: red; color: #eee;}
  </style>
</head>

<body>
  <div id="chart">  
  </div>
  <button onclick="render('math')">Math</button>
  <button onclick="render('science')">Science</button>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
    const data = [ 
      {name: 'Michal', science: 49, math: 99},
      {name: 'Yosef', science: 84, math: 87},
      {name: 'Shmuel', science: 93, math: 96}
                   ];
 function render(subject){
    d3.select('#chart')
 	 		.selectAll('div')
    	.remove()
    
d3.select('#chart')
			.selectAll('div')
      .data(data)
      .enter()
    	.append("div")
    	.attr('class', 'bar')
   		.style('width', function(d) {
      return d[subject] + 'px'
    })
 }
    render('math');
    
  /*  let myChart = 
      d3.select('#chart')
    	.append("div")
    	.attr("width", 400)
      .attr("height", 500)
      .data(data)

myChart.append("text")
      .text("Edit the code below to change me!")
      .attr("y", 200)
      .attr("x", 120)
      .attr("font-size", 36)
      .attr("font-family", "monospace");*/

</script>
</body>

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