D3 Examples - Missing values in the titanic dataset

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