<!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