JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>

<body>
  <script src="https://d3js.org/d3.v3.js"></script>

  <div id="graphe"></div>

</body>

JavaScript

var donneesSport = [{'pompes' : 13, 'abdos' : 8}, 
{'pompes' : 18, 'abdos' : 17}, {'pompes' : 2, 'abdos' : 2}, {'pompes' : 5, 'abdos' : 18}, {'pompes' : 20, 'abdos' : 12}];

var yScale = d3.scale.linear()
  .domain([0, d3.max(donneesSport, function(d) { return Math.max(d.abdos, d.pompes); })])
  .range([200, 0]);

var yAxis = d3.svg.axis()
		.orient("left")
    .scale(yScale);

var marginX = 40;
var marginY = 20;

var graphe = d3.select("#graphe")
  .append("svg")
  .attr("width", 400)
  .attr("height", 400);
graphe.append("g")
  .attr("transform", "translate(" + marginX +", " + marginY + ")")
  .call(yAxis);
  
  var d = graphe.append("g").selectAll("g")
  .data(donneesSport)
  .enter().append("g");
  
  d.append("rect")
   .attr("x", function(d, i) { return i * 22 + marginX + 10;} )
   .attr("y", function(d, i) { return marginY + yScale(d.pompes);} )
   .attr("width", 5)
   .attr("height", function(d, i) { return 200 - yScale(d.pompes);} )
   .attr("fill", "blue");
   d.append("rect")
   .attr("x", function(d, i) { return i * 22 + 6 + marginX + 10; })
   .attr("y", function(d, i) { return marginY + yScale(d.abdos);} )
   .attr("width", 5)
   .attr("height", function(d, i) { return 200 - yScale(d.abdos);} )
   .attr("fill", "red");