Missing values in the titanic dataset

Heatmap showing the missing values in the Titanic data. The data is taken from the Kaggle competition website.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Missing Values in the Titanic data</title>
	<style type="text/css">
	.tooltip{
		position: absolute;
		width: 200px;
		height: 28px;
		pointer-events: none;
	}

rect.bordered {
        stroke: white;
        stroke-width:2px;   
      }

.axis {
	  font: 10px sans-serif;
	}

.axis path,
	.axis line {
		fill: none;
		stroke: #000;
		shape-rendering: crispEdges;
	}
	</style>
</head>
<body>
<h1>Missing Values in the Titanic dataset</h1>
<div id='heatmap'></div>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript">

var margin = {top: 20, right: 60, bottom: 30, left:150},
width = 960 - margin.left - margin.right,
height = 200 - margin.top - margin.bottom;

var xGridSize = 15;
var yGridSize = 15;

var features = ["PassengerId", "Survived", "Pclass", "Name", "Sex", "Age", "SibSp", "Parch", "Ticket", "Fare", "Cabin", "Embarked"];

var svg = d3.select("#heatmap").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var tooltip = d3.select("body").append("div")
					.attr("class", "tooltip")
					.style("opacity", 0);

d3.csv("train.csv", function(error, data){
	var dataInfo = [];
	data.forEach(function(d,i){
		var rowN = i;
		var cols = Object.getOwnPropertyNames(data[i]);
		cols.forEach(function(name){
			var colN = cols.indexOf(name);
			var name = name;
			var value = data[rowN][name];
			var entry = {"row": rowN, "col": colN, "score" : value, "name":name};
			dataInfo.push(entry);
		});
	});

var featureLabels = svg.selectAll(".dayLabel")
			.data(features)
			.enter().append("text")
				.text(function(d){ return d;})
				.attr("x",0)
				.attr("y", function(d,i){ return i * xGridSize; })
				.style("text-anchor", "end")
				.attr("transform", "translate(-6," + xGridSize / 1.5 + ")");

// // add the heatmap
	var heatmap = svg.selectAll("heatmap")
			.data(dataInfo)
		.enter().append("rect")
			.attr("x", function(d){ return d.row * xGridSize; })
			.attr("y", function(d){ return d.col * yGridSize; })
			.attr("width", xGridSize)
			.attr("height", yGridSize)
			.attr("class", "rect bordered")
			.style("fill", function(d){ 
				if (d.score){
					return "steelblue";
				} else{
					return "white";
				}
				})
		.on("mouseover", function(d){
			tooltip.transition()
				.duration(200)
				.style("opacity", .9);
			tooltip.html("name - " + d.name + "<br/>" + "Value - " + d.score)
				.style("left", (d3.event.pageX + 5) + "px")
				.style("top", (d3.event.pageY - 28) + "px");
		})

.on("mouseout", function(d){
			tooltip.transition()
				.duration(500)
				.style("opacity", 0)
		});

});
</script>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js