Unexpected value Infinity parsing x attribute in d3.js

I try to plot data from a csv file using d3.js, to do so I load my data and filter it in the d3.csv call:

d3.csv("data/survival-rates.csv", function(d){
    d['Survival Rate']=Math.round(d['Survival Rate']);
    if(d['Sex']=='male'){
        return d;
    }
}, draw);//draw is the callback function to create the svg element

Now in the draw function used as a callback I create an SVG element and append it to a div I created previously:

//inside the function draw(data){...
var svg = d3.select("#myChart1")
            .append("svg")
            .attr("width", width + margin)
            .attr("height", height + margin)
            .append('g')
            .attr('class','chart');

        console.table(data);

        var myChart1 = new dimple.chart(svg, data);
        myChart1.addCategoryAxis("x", "Pclass"); 
        myChart1.addMeasureAxis("y", "Survival Rate");
        myChart1.draw();

Here I get an error :

Unexpected value Infinity parsing x attribute.

even if the console.table(data) shows no NaN value in the dataset.

I looked for this error and found nothing on it, Thanks in advance

Edit

This is the structure of the data I'm working with:

Pclass,Sex,Survival Rate
1,female,96.8085106383
1,male,36.8852459016
2,female,92.1052631579
2,male,15.7407407407
3,female,50.0
3,male,13.5446685879

Solution

Check the plunker: plunker

<head>
  <script data-require="[email protected]" data-semver="3.4.6" src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.4.1/d3.js"></script>
  <script data-require="dimplejs@*" data-semver="2.1.2" src="https://cdnjs.cloudflare.com/ajax/libs/dimple/2.3.0/dimple.latest.js"></script>
</head>

<body>
<br>
<div id="chartContainer1">
    <script>
      d3.csv("data/survivals-rates.csv", function(d) {
        d['Survival Rate'] = Math.round(d['Survival Rate']);
        if (d['Sex'] == 'male') {
          return d;
        }
      }, draw);

  function draw(data) {
        var svg = d3.select("#chartContainer1")
          .append("svg")
          .attr("width", 400)
          .attr("height", 1200)
          .append('g')
          .attr('class', 'chart');
        console.table(data);
        var myChart1 = new dimple.chart(svg, data);
        myChart1.setBounds(60, 30, 510, 330)
        myChart1.addCategoryAxis("x", "Pclass");
        myChart1.addMeasureAxis("y", "Survival Rate");
        myChart1.addSeries(null, dimple.plot.bar);
        myChart1.addLegend(65, 10, 510, 20, "right");
        myChart1.draw();
      }
    </script>

  </div>
</body>

</html>