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.
xxxxxxxxxx<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><!-- <label id="form" for="show-voronoi"> Show Voronoi <input type="checkbox" id="show-voronoi" disabled></label> --><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 -> displayvar 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; var ids = months x.domain([d3.min(months), d3.max(months)]); console.log([0, d3.max(data, function(c) { return d3.max(c.values, function(d) { return d.value; }); })]); y.domain([0, d3.max(data, function(c) { return d3.max(c.values, function(d) { return d.value; }); })]).nice(); z.domain(ids); // 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"); }});function type(d, i, columns) { if (!months) monthKeys = columns.slice(1), months = monthKeys.map(parseFloat); var c = {name: d.name, values: null}; c.values = monthKeys.map(function(k, i) { return {city: c, date: months[i], value: d[k]}; }); return c;}</script> https://d3js.org/d3.v4.min.js