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 d.abdos; })])
  .range([0, 200]);

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