<!DOCTYPE html>
<html>

<head>
  <script data-require="d3@3.4.6" 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>
  <link rel="stylesheet" href="style.css" />

</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("Survival Rate", dimple.plot.bar);
        myChart1.addLegend(65, 10, 510, 20, "right");
        myChart1.draw();
      }
    </script>

  </div>
</body>

</html>
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