ishashankverma · September 3, 2017 07:33
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>
 	<meta charset="utf-8">
 	<script src="http://d3js.org/d3.v3.min.js"></script>
 	<script src="http://dimplejs.org/dist/dimple.v2.1.2.min.js"></script>
 	<style>
 		body {
 			margin: 50px;
 		}
 		h1 {
 			font-family: "Trebuchet MS", Helvetica, sans-serif;
 			font-size: 35px;
 		}

 		p {
 			width: 600px;
 			font-size: 15px;
 		}
 		/*To remove the grid lines from the plot */
 		.tick line{
  			display: none;
 		}
 	</style>
 </head>
 <body>

 	<h1>Survival Rates on the Titanic</h1>
 	<p>The sinking of titanic on the night of 14th April 1912, was one of the deadliest peacetime maritime disasters in history. Imagine yourself to be on the ship amidst the disaster, do you think you can survive ? Here is a visualization that will help you better understand the factors that led to the survival or demise of the individuals on the ship.</p>
 	
 	<!-- Adding buttons for various plots -->

 	<button id="btn1">Survival by Age</button>
 	<button id="btn2">Survival by Class</button>
 	<button id="btn3">Survival by Sex</button>
 	<button id="btn4">Survival by Embarked</button>

 	<div id="chartContainer">

 		<script type="text/javascript">
 			var svg = dimple.newSvg('#chartContainer', 600,400);
 			d3.csv('titanic_data_v4.csv', function(data) {
 				var myChart = new dimple.chart(svg,data);
 				myChart.setBounds(60,30,510,305);
 				var x = myChart.addCategoryAxis('x', 'Age Group');
 				x.addOrderRule(["Children", "Adults", "Senior"]);
 				var y = myChart.addPctAxis('y', 'Count');
 				var s = myChart.addSeries("Survival", dimple.plot.bar);
 				x.title="Age Group";
 				x.fontSize="12px";
 				y.fontSize="12px";
 				y.title="Survival Percentage";
 				// Used to clear the text from the previous frame
 				s.afterDraw = function (shape, data) {
 					// Get the shape as a d3 selection
 					var s = d3.select(shape),
 					rect = {
 						x: parseFloat(s.attr("x")),
 						y: parseFloat(s.attr("y")),
 						width: parseFloat(s.attr("width")),
 						height: parseFloat(s.attr("height"))
 					};
 					// Only label bars where the text can fit
 					if (rect.height >= 8) {
 						// Add a text label for the value
 						svg.append("text")
 						// Position at the center of the bar
 						.attr("x", rect.x + rect.width / 2)
 						.attr("y", rect.y + rect.height / 2 + 3.5)
 						// Center align
 						.style("text-anchor", "middle")
 						.style("font-size", "10px")
 						.style("font-family", "sans-serif")
 						.style("opacity", 0.6)
 						// Prevent text cursor on hover and allow tooltips
 						.style("pointer-events", "none")
 						// Format the number to show integers only
 						.text(d3.format(",")(data.yValue));
 					}
 				};
 				myChart.defaultColors = [
          			new dimple.color("#D35454", 1), // red color for deaths
 					new dimple.color("#83CB6B", 1), // green color for survived
 				];
 			myChart.addLegend(60, 10, 510, 20, "right");
 			myChart.draw(1000);
 			});
 		</script>

 		<script type="text/javascript">
 			d3.select("#btn1").on("click", function(){
 				d3.select("svg").remove();
 				var svg = dimple.newSvg("#chartContainer", 600, 400);
 				d3.csv('titanic_data_v4.csv', function(data) {
 					var myChart = new dimple.chart(svg,data);
 					myChart.setBounds(60,30,510,305);
 					var x = myChart.addCategoryAxis('x', 'Age Group');
 					x.addOrderRule(["Children", "Adults", "Senior"]);
 					var y = myChart.addPctAxis('y', 'Count');
 					var s = myChart.addSeries("Survival", dimple.plot.bar);
 					x.title="Age Group";
 					x.fontSize="12px";
 					y.fontSize="12px";
 					y.title="Survival Percentage";
 					// Used to clear the text from the previous frame
 				s.afterDraw = function (shape, data) {
 					// Get the shape as a d3 selection
 					var s = d3.select(shape),
 					rect = {
 						x: parseFloat(s.attr("x")),
 						y: parseFloat(s.attr("y")),
 						width: parseFloat(s.attr("width")),
 						height: parseFloat(s.attr("height"))
 					};
 					// Only label bars where the text can fit
 					if (rect.height >= 8) {
 						// Add a text label for the value
 						svg.append("text")
 						// Position at the center of the bar
 						.attr("x", rect.x + rect.width / 2)
 						.attr("y", rect.y + rect.height / 2 + 3.5)
 						// Center align
 						.style("text-anchor", "middle")
 						.style("font-size", "10px")
 						.style("font-family", "sans-serif")
 						.style("opacity", 0.6)
 						// Prevent text cursor on hover and allow tooltips
 						.style("pointer-events", "none")
 						// Format the number to show integers only
 						.text(d3.format(",")(data.yValue));
 					}
 					};
 					myChart.defaultColors = [
          			new dimple.color("#D35454", 1), // red color for deaths
 					new dimple.color("#83CB6B", 1), // green color for survived
        			];
        			myChart.addLegend(60, 10, 510, 20, "right");
        			myChart.draw(1000);
        		});
 			});
 		</script>

 		<script type="text/javascript">
 			d3.select("#btn2").on("click", function(){
 				d3.select("svg").remove();
 				var svg = dimple.newSvg("#chartContainer", 600, 400);
 				d3.csv('titanic_data_v4.csv', function(data) {
 					var myChart = new dimple.chart(svg,data);
 					myChart.setBounds(60,30,510,305);
 					var x = myChart.addCategoryAxis('x', 'Pclass');
 					var y = myChart.addPctAxis('y', 'Count');
 					var s = myChart.addSeries("Survival", dimple.plot.bar);
 					x.title="Passenger Class";
 					x.fontSize="12px";
 					y.fontSize="12px";
 					y.title="Survival Percentage";
 					// Used to clear the text from the previous frame
 				s.afterDraw = function (shape, data) {
 					// Get the shape as a d3 selection
 					var s = d3.select(shape),
 					rect = {
 						x: parseFloat(s.attr("x")),
 						y: parseFloat(s.attr("y")),
 						width: parseFloat(s.attr("width")),
 						height: parseFloat(s.attr("height"))
 					};
 					// Only label bars where the text can fit
 					if (rect.height >= 8) {
 						// Add a text label for the value
 						svg.append("text")
 						// Position at the center of the bar
 						.attr("x", rect.x + rect.width / 2)
 						.attr("y", rect.y + rect.height / 2 + 3.5)
 						// Center align
 						.style("text-anchor", "middle")
 						.style("font-size", "10px")
 						.style("font-family", "sans-serif")
 						.style("opacity", 0.6)
 						// Prevent text cursor on hover and allow tooltips
 						.style("pointer-events", "none")
 						// Format the number to show integers only
 						.text(d3.format(",")(data.yValue));
 					}
 					};
 					myChart.defaultColors = [
          			new dimple.color("#D35454", 1), // red color for deaths
 					new dimple.color("#83CB6B", 1), // green color for survived
        			];
        			myChart.addLegend(60, 10, 510, 20, "right");
        			myChart.draw(1000);
        		});
 			});
 		</script>

 		<script type="text/javascript">
 			d3.select("#btn3").on("click", function(){
 				d3.select("svg").remove();
 				var svg = dimple.newSvg("#chartContainer", 600, 400);
 				d3.csv('titanic_data_v4.csv', function(data) {
 					var myChart = new dimple.chart(svg,data);
 					myChart.setBounds(60,30,510,305);
 					var x = myChart.addCategoryAxis('x', 'Sex');
 					var y = myChart.addPctAxis('y', 'Count');
 					var s = myChart.addSeries("Survival", dimple.plot.bar);
 					x.title="Passenger Gender";
 					x.fontSize="12px";
 					y.fontSize="12px";
 					y.title="Survival Percentage";
 					// Used to clear the text from the previous frame
 				s.afterDraw = function (shape, data) {
 					// Get the shape as a d3 selection
 					var s = d3.select(shape),
 					rect = {
 						x: parseFloat(s.attr("x")),
 						y: parseFloat(s.attr("y")),
 						width: parseFloat(s.attr("width")),
 						height: parseFloat(s.attr("height"))
 					};
 					// Only label bars where the text can fit
 					if (rect.height >= 8) {
 						// Add a text label for the value
 						svg.append("text")
 						// Position at the center of the bar
 						.attr("x", rect.x + rect.width / 2)
 						.attr("y", rect.y + rect.height / 2 + 3.5)
 						// Center align
 						.style("text-anchor", "middle")
 						.style("font-size", "10px")
 						.style("font-family", "sans-serif")
 						.style("opacity", 0.6)
 						// Prevent text cursor on hover and allow tooltips
 						.style("pointer-events", "none")
 						// Format the number to show integers only
 						.text(d3.format(",")(data.yValue));
 					}
 					};
 					myChart.defaultColors = [
          			new dimple.color("#D35454", 1), // red color for deaths
 					new dimple.color("#83CB6B", 1), // green color for survived
        			];
        			myChart.addLegend(60, 10, 510, 20, "right");
        			myChart.draw(1000);
        		});
 			});
 		</script>

 		<script type="text/javascript">
 			d3.select("#btn4").on("click", function(){
 				d3.select("svg").remove();
 				var svg = dimple.newSvg("#chartContainer", 600, 400);
 				d3.csv('titanic_data_v4.csv', function(data) {
 					var myChart = new dimple.chart(svg,data);
 					myChart.setBounds(60,30,510,305);
 					var x = myChart.addCategoryAxis('x', 'Embarked');
 					x.addOrderRule(["Cherbourg", "Southampton", "Queenstown"]);
 					var y = myChart.addPctAxis('y', 'Count');
 					var s = myChart.addSeries("Survival", dimple.plot.bar);
 					x.title="Passenger Embarked Port";
 					x.fontSize="12px";
 					y.fontSize="12px";
 					y.title="Survival Percentage";
 					// Used to clear the text from the previous frame
 				s.afterDraw = function (shape, data) {
 					// Get the shape as a d3 selection
 					var s = d3.select(shape),
 					rect = {
 						x: parseFloat(s.attr("x")),
 						y: parseFloat(s.attr("y")),
 						width: parseFloat(s.attr("width")),
 						height: parseFloat(s.attr("height"))
 					};
 					// Only label bars where the text can fit
 					if (rect.height >= 8) {
 						// Add a text label for the value
 						svg.append("text")
 						// Position at the center of the bar
 						.attr("x", rect.x + rect.width / 2)
 						.attr("y", rect.y + rect.height / 2 + 3.5)
 						// Center align
 						.style("text-anchor", "middle")
 						.style("font-size", "10px")
 						.style("font-family", "sans-serif")
 						.style("opacity", 0.6)
 						// Prevent text cursor on hover and allow tooltips
 						.style("pointer-events", "none")
 						// Format the number to show integers only
 						.text(d3.format(",")(data.yValue));
 					}
 					};
 					myChart.defaultColors = [
          			new dimple.color("#D35454", 1), // red color for deaths
 					new dimple.color("#83CB6B", 1), // green color for survived
        			];
        			myChart.addLegend(60, 10, 510, 20, "right");
        			myChart.draw(1000);
        		});
 			});
 		</script>
 	</div>

 	<p style="font-size:10px">Note: The dataset contains details from 891 passengers. Many rows were missing details (like Age,Embarked,etc), so I have removed 179 rows. The visualization consists of 712 passengers/crew of the titanic.</p>
 </body>
 </html>
diff --git a/titanic_data_v4.csv b/titanic_data_v4.csv
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://dimplejs.org/dist/dimple.v2.1.2.min.js"></script>
	<style>
	body {
	margin: 50px;
	}
	h1 {
	font-family: "Trebuchet MS", Helvetica, sans-serif;
	font-size: 35px;
	}

	p {
	width: 600px;
	font-size: 15px;
	}
	/To remove the grid lines from the plot /
	.tick line{
	display: none;
	}
	</style>
	</head>
	<body>

	<h1>Survival Rates on the Titanic</h1>
	<p>The sinking of titanic on the night of 14th April 1912, was one of the deadliest peacetime maritime disasters in history. Imagine yourself to be on the ship amidst the disaster, do you think you can survive ? Here is a visualization that will help you better understand the factors that led to the survival or demise of the individuals on the ship.</p>

	<!-- Adding buttons for various plots -->

	<button id="btn1">Survival by Age</button>
	<button id="btn2">Survival by Class</button>
	<button id="btn3">Survival by Sex</button>
	<button id="btn4">Survival by Embarked</button>

	<div id="chartContainer">

	<script type="text/javascript">
	var svg = dimple.newSvg('#chartContainer', 600,400);
	d3.csv('titanic_data_v4.csv', function(data) {
	var myChart = new dimple.chart(svg,data);
	myChart.setBounds(60,30,510,305);
	var x = myChart.addCategoryAxis('x', 'Age Group');
	x.addOrderRule(["Children", "Adults", "Senior"]);
	var y = myChart.addPctAxis('y', 'Count');
	var s = myChart.addSeries("Survival", dimple.plot.bar);
	x.title="Age Group";
	x.fontSize="12px";
	y.fontSize="12px";
	y.title="Survival Percentage";
	// Used to clear the text from the previous frame
	s.afterDraw = function (shape, data) {
	// Get the shape as a d3 selection
	var s = d3.select(shape),
	rect = {
	x: parseFloat(s.attr("x")),
	y: parseFloat(s.attr("y")),
	width: parseFloat(s.attr("width")),
	height: parseFloat(s.attr("height"))
	};
	// Only label bars where the text can fit
	if (rect.height >= 8) {
	// Add a text label for the value
	svg.append("text")
	// Position at the center of the bar
	.attr("x", rect.x + rect.width / 2)
	.attr("y", rect.y + rect.height / 2 + 3.5)
	// Center align
	.style("text-anchor", "middle")
	.style("font-size", "10px")
	.style("font-family", "sans-serif")
	.style("opacity", 0.6)
	// Prevent text cursor on hover and allow tooltips
	.style("pointer-events", "none")
	// Format the number to show integers only
	.text(d3.format(",")(data.yValue));
	}
	};
	myChart.defaultColors = [
	new dimple.color("#D35454", 1), // red color for deaths
	new dimple.color("#83CB6B", 1), // green color for survived
	];
	myChart.addLegend(60, 10, 510, 20, "right");
	myChart.draw(1000);
	});
	</script>

	<script type="text/javascript">
	d3.select("#btn1").on("click", function(){
	d3.select("svg").remove();
	var svg = dimple.newSvg("#chartContainer", 600, 400);
	d3.csv('titanic_data_v4.csv', function(data) {
	var myChart = new dimple.chart(svg,data);
	myChart.setBounds(60,30,510,305);
	var x = myChart.addCategoryAxis('x', 'Age Group');
	x.addOrderRule(["Children", "Adults", "Senior"]);
	var y = myChart.addPctAxis('y', 'Count');
	var s = myChart.addSeries("Survival", dimple.plot.bar);
	x.title="Age Group";
	x.fontSize="12px";
	y.fontSize="12px";
	y.title="Survival Percentage";
	// Used to clear the text from the previous frame
	s.afterDraw = function (shape, data) {
	// Get the shape as a d3 selection
	var s = d3.select(shape),
	rect = {
	x: parseFloat(s.attr("x")),
	y: parseFloat(s.attr("y")),
	width: parseFloat(s.attr("width")),
	height: parseFloat(s.attr("height"))
	};
	// Only label bars where the text can fit
	if (rect.height >= 8) {
	// Add a text label for the value
	svg.append("text")
	// Position at the center of the bar
	.attr("x", rect.x + rect.width / 2)
	.attr("y", rect.y + rect.height / 2 + 3.5)
	// Center align
	.style("text-anchor", "middle")
	.style("font-size", "10px")
	.style("font-family", "sans-serif")
	.style("opacity", 0.6)
	// Prevent text cursor on hover and allow tooltips
	.style("pointer-events", "none")
	// Format the number to show integers only
	.text(d3.format(",")(data.yValue));
	}
	};
	myChart.defaultColors = [
	new dimple.color("#D35454", 1), // red color for deaths
	new dimple.color("#83CB6B", 1), // green color for survived
	];
	myChart.addLegend(60, 10, 510, 20, "right");
	myChart.draw(1000);
	});
	});
	</script>

	<script type="text/javascript">
	d3.select("#btn2").on("click", function(){
	d3.select("svg").remove();
	var svg = dimple.newSvg("#chartContainer", 600, 400);
	d3.csv('titanic_data_v4.csv', function(data) {
	var myChart = new dimple.chart(svg,data);
	myChart.setBounds(60,30,510,305);
	var x = myChart.addCategoryAxis('x', 'Pclass');
	var y = myChart.addPctAxis('y', 'Count');
	var s = myChart.addSeries("Survival", dimple.plot.bar);
	x.title="Passenger Class";
	x.fontSize="12px";
	y.fontSize="12px";
	y.title="Survival Percentage";
	// Used to clear the text from the previous frame
	s.afterDraw = function (shape, data) {
	// Get the shape as a d3 selection
	var s = d3.select(shape),
	rect = {
	x: parseFloat(s.attr("x")),
	y: parseFloat(s.attr("y")),
	width: parseFloat(s.attr("width")),
	height: parseFloat(s.attr("height"))
	};
	// Only label bars where the text can fit
	if (rect.height >= 8) {
	// Add a text label for the value
	svg.append("text")
	// Position at the center of the bar
	.attr("x", rect.x + rect.width / 2)
	.attr("y", rect.y + rect.height / 2 + 3.5)
	// Center align
	.style("text-anchor", "middle")
	.style("font-size", "10px")
	.style("font-family", "sans-serif")
	.style("opacity", 0.6)
	// Prevent text cursor on hover and allow tooltips
	.style("pointer-events", "none")
	// Format the number to show integers only
	.text(d3.format(",")(data.yValue));
	}
	};
	myChart.defaultColors = [
	new dimple.color("#D35454", 1), // red color for deaths
	new dimple.color("#83CB6B", 1), // green color for survived
	];
	myChart.addLegend(60, 10, 510, 20, "right");
	myChart.draw(1000);
	});
	});
	</script>

	<script type="text/javascript">
	d3.select("#btn3").on("click", function(){
	d3.select("svg").remove();
	var svg = dimple.newSvg("#chartContainer", 600, 400);
	d3.csv('titanic_data_v4.csv', function(data) {
	var myChart = new dimple.chart(svg,data);
	myChart.setBounds(60,30,510,305);
	var x = myChart.addCategoryAxis('x', 'Sex');
	var y = myChart.addPctAxis('y', 'Count');
	var s = myChart.addSeries("Survival", dimple.plot.bar);
	x.title="Passenger Gender";
	x.fontSize="12px";
	y.fontSize="12px";
	y.title="Survival Percentage";
	// Used to clear the text from the previous frame
	s.afterDraw = function (shape, data) {
	// Get the shape as a d3 selection
	var s = d3.select(shape),
	rect = {
	x: parseFloat(s.attr("x")),
	y: parseFloat(s.attr("y")),
	width: parseFloat(s.attr("width")),
	height: parseFloat(s.attr("height"))
	};
	// Only label bars where the text can fit
	if (rect.height >= 8) {
	// Add a text label for the value
	svg.append("text")
	// Position at the center of the bar
	.attr("x", rect.x + rect.width / 2)
	.attr("y", rect.y + rect.height / 2 + 3.5)
	// Center align
	.style("text-anchor", "middle")
	.style("font-size", "10px")
	.style("font-family", "sans-serif")
	.style("opacity", 0.6)
	// Prevent text cursor on hover and allow tooltips
	.style("pointer-events", "none")
	// Format the number to show integers only
	.text(d3.format(",")(data.yValue));
	}
	};
	myChart.defaultColors = [
	new dimple.color("#D35454", 1), // red color for deaths
	new dimple.color("#83CB6B", 1), // green color for survived
	];
	myChart.addLegend(60, 10, 510, 20, "right");
	myChart.draw(1000);
	});
	});
	</script>

	<script type="text/javascript">
	d3.select("#btn4").on("click", function(){
	d3.select("svg").remove();
	var svg = dimple.newSvg("#chartContainer", 600, 400);
	d3.csv('titanic_data_v4.csv', function(data) {
	var myChart = new dimple.chart(svg,data);
	myChart.setBounds(60,30,510,305);
	var x = myChart.addCategoryAxis('x', 'Embarked');
	x.addOrderRule(["Cherbourg", "Southampton", "Queenstown"]);
	var y = myChart.addPctAxis('y', 'Count');
	var s = myChart.addSeries("Survival", dimple.plot.bar);
	x.title="Passenger Embarked Port";
	x.fontSize="12px";
	y.fontSize="12px";
	y.title="Survival Percentage";
	// Used to clear the text from the previous frame
	s.afterDraw = function (shape, data) {
	// Get the shape as a d3 selection
	var s = d3.select(shape),
	rect = {
	x: parseFloat(s.attr("x")),
	y: parseFloat(s.attr("y")),
	width: parseFloat(s.attr("width")),
	height: parseFloat(s.attr("height"))
	};
	// Only label bars where the text can fit
	if (rect.height >= 8) {
	// Add a text label for the value
	svg.append("text")
	// Position at the center of the bar
	.attr("x", rect.x + rect.width / 2)
	.attr("y", rect.y + rect.height / 2 + 3.5)
	// Center align
	.style("text-anchor", "middle")
	.style("font-size", "10px")
	.style("font-family", "sans-serif")
	.style("opacity", 0.6)
	// Prevent text cursor on hover and allow tooltips
	.style("pointer-events", "none")
	// Format the number to show integers only
	.text(d3.format(",")(data.yValue));
	}
	};
	myChart.defaultColors = [
	new dimple.color("#D35454", 1), // red color for deaths
	new dimple.color("#83CB6B", 1), // green color for survived
	];
	myChart.addLegend(60, 10, 510, 20, "right");
	myChart.draw(1000);
	});
	});
	</script>
	</div>

	<p style="font-size:10px">Note: The dataset contains details from 891 passengers. Many rows were missing details (like Age,Embarked,etc), so I have removed 179 rows. The visualization consists of 712 passengers/crew of the titanic.</p>
	</body>
	</html>