ICU Mortality/Event Visualization

Using data from the MIMIC-III data set (data on ICU patients), I developed a mortality scoring model. Given the current measurements of a patient 24 hours after admission, the model will predict the chance of a patient living or dieing. When applied to the measurements taken over an entire ICU stay, a doctor or hospital administrator can review how close a patient is to dieing over the course of his or her ICU stay. In addition to this, I also overlaid the hospital procedures each patient has undergone, so doctors and administrators could see any possible effects that these procedures had as well. Finally, there's a mouseover tooltip that shows further details for each procedure the patient underwent.

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.axis--y path {
  display: none;
}

.cities {
  fill: none;
  /*stroke: #aaa;*/
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-width: 2px;
  stroke-opacity: 0.25;
}

.city--hover {
  stroke: #000;
  stroke-width: 2.5px;
  stroke-opacity: 1;
  font-family: "sans-serif";
}

.city--click {
  stroke: #000;
  stroke-width: 2.5px;
  stroke-opacity: 1;
  font-family: "sans-serif";

}

.focus text {
  text-anchor: middle;
  text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff;
}

.voronoi path {
  fill: none;
  pointer-events: all;
}

.voronoi--show path {
  stroke: red;
  stroke-opacity: 0.2;
}

#form {
  position: absolute;
  top: 20px;
  right: 30px;
}

.dot {
  stroke: #000;
  stroke-opacity: 0.8;
  opacity: 0.8;

}

.tooltip {
  background-color: #f7f7f7;
  padding: 3px 12px;
  font-family: sans-serif;
  border: 1px solid #bbbbbb;
  box-shadow: 1px 1px 4px #bbbbbb;
}
.tooltip {
/*  width: 200px;
  height: 80px;*/
  pointer-events: none;
  word-wrap: normal;
}
.tooltip_title {
  font-weight: bold;
  font-size: 14px;
  margin: 5px 0;
  max-width: 300px;
  word-wrap: normal;
}
.tooltip_body {
  font-weight: normal;
  margin: 5px 0;
}

</style>
<svg width="960" height="500"></svg>

<script src="//d3js.org/d3.v4.min.js"></script>
<script>

var months,
    monthKeys,
    monthParse = d3.timeParse("%Y-%m");

var svg = d3.select("svg"),
    margin = {top: 20, right: 30, bottom: 50, left: 40},
    width = svg.attr("width") - margin.left - margin.right,
    height = svg.attr("height") - margin.top - margin.bottom,
    g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var x = d3.scaleLinear()
    .range([0, width]);

var y = d3.scaleLinear()
    .range([height, 0]);

var xValue = function(d) { return d.rel_time;},
    xMap = function(d) { return x(xValue(d));};

var yValue = function(d) { return d.pred;}, // data -> value
    yMap = function(d) { return y(yValue(d));}; // data -> display

var z = d3.scaleOrdinal(d3.schemeCategory10);

var voronoi = d3.voronoi()
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.value); })
    .extent([[-margin.left, -margin.top], [width + margin.right, height + margin.bottom]]);

var line = d3.line()
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.value); });

var cValue = function(d) { return d.category;},
    color = d3.scaleOrdinal(d3.schemeCategory10);

var tooltip = d3.select("body").append("div")
    .attr("class", "tooltip")
    .style("position", "absolute")
    .style("opacity", 0)
    .style("z-index", "10");

var title = svg.append("text")
                .attr("x", (width / 2))             
                .attr("y", margin.top)
                .attr("text-anchor", "middle")  
                .style("font-size", "20px") 
                .style("font-family","sans-serif")
                .text("ICU Stay History");

d3.tsv("procedures2.tsv", function(error, data) {

// change string (from CSV) into number format
  data.forEach(function(d) {
    d.rel_time = +d.rel_time;
    d.pred = +d.pred;
    d.icustay_id = +d.icustay_id;
    d.meas_time = +d.meas_time;
  });

x.domain([0-0.02, 0.955]);
  y.domain([0.032, 0.68]);

// draw dots
  svg.selectAll(".dot")
      .data(data)
    .enter().append("circle")
      .attr("class", "dot")
      .attr("r", 4)
      .attr("cx", xMap)
      .attr("cy", yMap)
      .style("fill", function(d) { 
        console.log(d)
        return color(cValue(d));}) 
      .on("mouseover", function(d) {
          tooltip.transition()
               .duration(200)
               .style("opacity", .9);

tooltip.html("")
               .style("left", (d3.event.pageX + 18) + "px")
               .style("top", (d3.event.pageY - 52) + "px");
         tooltip.append("h3").attr("class", "tooltip_title");
         tooltip.append("pre").attr("class", "tooltip_body");
         tooltip.select(".tooltip_title")
           .text(d.label)

tooltip.select(".tooltip_body")
           .text(
             "Patient ID: " + d.icustay_id + "\n" + 
             "Type: " + d.category + "\n" +
             "Rel. Time: " + d3.format("0.2f")(d.rel_time) + "\n" +
             "Abs. Time: " + d3.format("0.0f")(d.meas_time) + " Hours"
            );
      })

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

// draw legend
  var legend = svg.selectAll(".legend")
      .data(color.domain())
    .enter().append("g")
      .attr("class", "legend")
      .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

// draw legend colored rectangles
  legend.append("rect")
      .attr("x", width - 18)
      .attr("width", 18)
      .attr("height", 18)
      .style("fill", color);

// draw legend text
  legend.append("text")
      .attr("x", width - 24)
      .attr("y", 9)
      .attr("dy", ".35em")
      .style("text-anchor", "end")
      .style("font-family","sans-serif")
      .text(function(d) { return d;})

});

d3.tsv("pat_pred1.tsv", type, function(error, data) {
  if (error) throw error;

// console.log(ids)
  g.append("g")
      .attr("class", "axis axis--x")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x))
    .append("text")
      .attr("x", width/2 - 50)
      .attr("y", 30)
      .attr("dy", "0.32em")
      .style("text-anchor", "start")
      .style("fill", "#000")
      .style("font-weight", "bold")
      .text("Rel. Time in ICU");

g.append("g")
      .attr("class", "axis axis--y")
      .call(d3.axisLeft(y).ticks(10, "%"))
    .append("text")
      .attr("x", 4)
      .attr("y", 0.5)
      .attr("dy", "0.32em")
      .style("text-anchor", "start")
      .style("fill", "#000")
      .style("font-weight", "bold")
      .text("Pred. Mortality (%)");

g.append("g")
      .attr("class", "cities")
    .selectAll("path")
    .data(data)
    .enter().append("path")
      .attr("d", function(d) { d.line = this; return line(d.values); })
      .attr("class", "lines")
      .attr("id", function(d) {
        console.log(d.name)
        return d.name;})
      .style("stroke", '#000');

var focus = g.append("g")
      .attr("transform", "translate(-100,-100)")
      .attr("class", "focus");

focus.append("circle")
      .attr("r", 3.5);

focus.append("text")
      .attr("y", -10);

var voronoiGroup = g.append("g")
      .attr("class", "voronoi");

voronoiGroup.selectAll("path")
    .data(voronoi.polygons(d3.merge(data.map(function(d) { return d.values; }))))
    .enter().append("path")
      .attr("d", function(d) { return d ? "M" + d.join("L") + "Z" : null; })
      .on("click", mouseclick)
      .on("mouseover", mouseover)
      .on("mouseout", mouseout);

d3.select("#show-voronoi")
      .property("disabled", false)
      .on("change", function() { voronoiGroup.classed("voronoi--show", this.checked); });

function mouseover(d) {
    d3.select(d.data.city.line).classed("city--hover", true);
    d.data.city.line.parentNode.appendChild(d.data.city.line);
  }

function mouseout(d) {
    d3.select(d.data.city.line).classed("city--hover", false);
    focus.attr("transform", "translate(-100,-100)");
  }

function mouseclick(d) {
    focus.select("text").text("Patient ID: " + d.data.city.name)
                .attr("x", width - 5)         
                .attr("y", 250)
                .style("font-family","sans-serif");
  }

});

</script>

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