| license: mit |
A responsive scatterplot, showing prevalence and survival rates of different types of cancer for both sexes. Use the buttons to zoom in on the rare types of cancer.
More explication here, live here (Dutch).
forked from maartenzam's block: Cancer scatterplot
| Soort | Geslacht | Prevalentie | Overleving | |
|---|---|---|---|---|
| Head and neck | m | 21.4 | 50.7 | |
| Esophagus | m | 10.5 | 23.5 | |
| Stomach | m | 5.4 | 35.2 | |
| Colon | m | 29.7 | 65.5 | |
| Rectum | m | 14.2 | 66.8 | |
| Liver | m | 6.2 | 21 | |
| Gall bladder | m | 1.7 | 19.6 | |
| Pancreas | m | 8.1 | 11.3 | |
| Lung | m | 53.5 | 15.8 | |
| Pleura and peritoneum | m | 2 | 5.3 | |
| Skin | m | 12.1 | 86.6 | |
| Breast | m | 0.8 | 83.1 | |
| Prostate | m | 75.5 | 95.2 | |
| Testicle | m | 6.3 | 96.5 | |
| Kidney | m | 11.1 | 74.6 | |
| Bladder | m | 16 | 55.8 | |
| Brain | m | 7.2 | 20.7 | |
| Thyroid | m | 3.2 | 91.3 | |
| Head and neck | f | 6.3 | 57.6 | |
| Esophagus | f | 3 | 26 | |
| Stomach | f | 3.3 | 43.7 | |
| Colon | f | 21.2 | 67.2 | |
| Rectum | f | 7.7 | 66.7 | |
| Liver | f | 2.2 | 19.9 | |
| Gall bladder | f | 1.3 | 17.3 | |
| Pancreas | f | 6.3 | 11 | |
| Lung | f | 23.4 | 22.6 | |
| Pleura and peritoneum | f | 0.4 | 15.1 | |
| Skin | f | 18.5 | 92.8 | |
| Breast | f | 109.8 | 89.6 | |
| Cervix | f | 8 | 69 | |
| Uterus | f | 11.5 | 79.2 | |
| Ovary | f | 7.1 | 42.7 | |
| Kidney | f | 5.5 | 75.2 | |
| Bladder | f | 3 | 48.6 | |
| Brain | f | 4 | 22.3 | |
| Thyroid | f | 9.4 | 95.6 |
| <!doctype html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Kankerscatter</title> | |
| <style> | |
| body { | |
| font: 12px sans-serif; | |
| margin: 4px; | |
| } | |
| #chart { | |
| width: 100%; | |
| height: 100%; | |
| min-width: 300px; | |
| min-height: 300px; | |
| position: absolute; | |
| } | |
| .d3-tip { | |
| line-height: 1; | |
| font: 14px sans-serif; | |
| padding: 12px; | |
| background: rgba(0, 0, 0, 0.8); | |
| color: rgb(185, 185, 185); | |
| border-radius: 2px; | |
| } | |
| /* Creates a small triangle extender for the tooltip */ | |
| .d3-tip:after { | |
| box-sizing: border-box; | |
| display: inline; | |
| font-size: 10px; | |
| width: 100%; | |
| line-height: 1; | |
| color: rgba(0, 0, 0, 0.8); | |
| content: "\25BC"; | |
| position: absolute; | |
| text-align: center; | |
| } | |
| /* Style northward tooltips differently */ | |
| .d3-tip.n:after { | |
| margin: -1px 0 0 0; | |
| top: 100%; | |
| left: 0; | |
| } | |
| button { | |
| background-color: #fa4951; | |
| color: white; | |
| border: none; | |
| border-radius: 1px; | |
| font-size: 14px; | |
| margin: 0px 4px; | |
| padding: 4px; | |
| width: 160px; | |
| cursor: pointer; | |
| } | |
| button.pressed { | |
| background-color: #fdafb3; | |
| } | |
| /*Axes stuff*/ | |
| .axis { | |
| fill: #aaa; | |
| } | |
| .axis path { | |
| stroke: #aaa; | |
| stroke-width: 2; | |
| opacity: 0.5; | |
| } | |
| .axis.y .tick line { | |
| stroke: #aaa; | |
| opacity: 0.3; | |
| } | |
| .axis.y path { | |
| visibility: hidden; | |
| } | |
| .axis.x .tick line { | |
| stroke: #aaa; | |
| opacity: 0; | |
| } | |
| .axis .tick text { | |
| font-size: 14px; | |
| fill: #aaa; | |
| opacity: 0.8; | |
| } | |
| text.label { | |
| fill: #555; | |
| opacity: 1; | |
| font-size: 18px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <button id="zoomin">Rare cancers</button><button id="zoomout" class="pressed">All cancers</button><br /> | |
| <svg id="chart"></svg> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> | |
| <script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script> | |
| <script> | |
| var margin = {top: 40, right: 40, bottom: 40, left: 60}, | |
| dim = parseInt(d3.select("#chart").style("width")), | |
| width = dim - margin.left - margin.right, | |
| height = 450 - margin.top - margin.bottom; | |
| //scales and axes | |
| var x = d3.scale.linear() | |
| .range([0, width]); | |
| var y = d3.scale.linear() | |
| .range([height, 0]); | |
| var xAxis = d3.svg.axis() | |
| .scale(x) | |
| .tickValues([0,20,40,60,80,100]) | |
| .outerTickSize(0) | |
| .innerTickSize(8) | |
| .orient("bottom"); | |
| var yAxis = d3.svg.axis() | |
| .scale(y) | |
| .tickValues([20,40,60,80,100]) | |
| .innerTickSize(-width) | |
| .outerTickSize(0) | |
| .orient("left"); | |
| var svg = d3.select("#chart") | |
| .attr("width", width + margin.left + margin.right) | |
| .attr("height", height + margin.top + margin.bottom) | |
| .append("g") | |
| .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
| //Tooltip | |
| var tip = d3.tip() | |
| .attr('class', 'd3-tip') | |
| .offset([-10, 0]) | |
| .html(function(d) { | |
| return "<div><span></span> <span style='color:white'>" + d.Soort + " (" + d.Geslacht+ ")</span></div>" + "<div><span></span> <span style='color:white'>" + d.Prevalentie + " cases 100.000</span></div>" + | |
| "<div><span></span> <span style='color:white'>"+ Math.round(d.Overleving) + " % survival</span></div>"; | |
| }) | |
| svg.call(tip); | |
| d3.csv("cancerdata.csv", function(error, data) { | |
| if (error) throw error; | |
| data.forEach(function(d) { | |
| d.Prevalentie = +d.Prevalentie; | |
| d.Overleving = +d.Overleving; | |
| }); | |
| x.domain([0, 100]); | |
| y.domain([0, 110]); | |
| //generate data for the connecting lines | |
| var linedata = d3.nest() | |
| .key(function(d) {return d.Soort}) | |
| .entries(data); | |
| linedata = linedata.filter(function(el) {return el.values.length == 2; }); | |
| svg.selectAll(".connect") | |
| .data(linedata) | |
| .enter().append("line") | |
| .attr("class", function(d) { return "connect " + d.key; }) | |
| .attr("x1", function(d) { return x(d.values[0].Overleving)}) | |
| .attr("x2", function(d) { return x(d.values[1].Overleving)}) | |
| .attr("y1", function(d) { return y(d.values[0].Prevalentie)}) | |
| .attr("y2", function(d) { return y(d.values[1].Prevalentie)}) | |
| .attr("stroke", "grey") | |
| .attr("stroke-width", 1); | |
| linedata.forEach(function(d) { | |
| d.key = d.key.replace('kanker', '') | |
| }); | |
| //Chartlabels | |
| svg.selectAll("text.chartlabel") | |
| .data(linedata) | |
| .enter().append("text") | |
| .text(function(d) {return d.key}) | |
| .attr("class", "chartlabel") | |
| .attr("x", function(d) { return x((d.values[0].Overleving + d.values[1].Overleving)/2); }) | |
| .attr("y", function(d) { return y((d.values[0].Prevalentie + d.values[1].Prevalentie)/2); }) | |
| .style("opacity", function(d) { | |
| if((d.values[0].Prevalentie + d.values[1].Prevalentie)/2 < 25) { | |
| return 0; | |
| } | |
| else { | |
| return 0.4; | |
| } | |
| }) | |
| .style("font-size", function() { | |
| if(width < 1024) { | |
| return 16; | |
| } | |
| else { | |
| return 22; | |
| } | |
| }) | |
| .style("fill", "#c2b6a4") | |
| .attr("text-anchor", "middle"); | |
| //Axes | |
| svg.append("g") | |
| .attr("class", "x axis") | |
| .attr("transform", "translate(0," + height + ")") | |
| .call(xAxis) | |
| .append("text") | |
| .attr("class", "label") | |
| .attr("x", width) | |
| .attr("y", 40) | |
| .style("text-anchor", "end") | |
| .text("Survival rate after 5 years (%)"); | |
| svg.append("g") | |
| .attr("class", "y axis") | |
| .call(yAxis) | |
| .append("text") | |
| .attr("class", "label") | |
| .attr("transform", "rotate(-90)") | |
| .attr("y", -50) | |
| .attr("dy", ".71em") | |
| .style("text-anchor", "end") | |
| .text("Prevalence (cases per year per 100.000 people)") | |
| //Mars and Venus symbols | |
| var symbolcolors = {m: "#e86756", f: "#9FA8DA", mout: "#9a0b16", fout: "#3f51b5"}; | |
| var symbolgroup = svg.selectAll(".symbol") | |
| .data(data) | |
| .enter().append("g") | |
| .attr("class", function(d) { return d.Geslacht; }) | |
| .attr("transform", function(d) { return "translate(" + x(d.Overleving) + "," + y(d.Prevalentie) + ")"; }); | |
| var vrouwen = svg.selectAll("g.f"); | |
| vrouwen | |
| .append("line") | |
| .attr("x1", 0) | |
| .attr("x2", 0) | |
| .attr("y1", 0) | |
| .attr("y2", 20) | |
| .attr("stroke", symbolcolors.fout) | |
| .attr("stroke-width", 2); | |
| vrouwen | |
| .append("line") | |
| .attr("x1", -7) | |
| .attr("x2", 7) | |
| .attr("y1", 14) | |
| .attr("y2", 14) | |
| .attr("stroke", symbolcolors.fout) | |
| .attr("stroke-width", 2); | |
| var mannen = svg.selectAll("g.m"); | |
| mannen | |
| .append("line") | |
| .attr("x1", 0) | |
| .attr("x2", 14) | |
| .attr("y1", 0) | |
| .attr("y2", -14) | |
| .attr("stroke", symbolcolors.mout) | |
| .attr("stroke-width", 2); | |
| mannen | |
| .append("line") | |
| .attr("x1", 7) | |
| .attr("x2", 15) | |
| .attr("y1", -14) | |
| .attr("y2", -14) | |
| .attr("stroke", symbolcolors.mout) | |
| .attr("stroke-width", 2); | |
| mannen | |
| .append("line") | |
| .attr("x1", 14) | |
| .attr("x2", 14) | |
| .attr("y1", -6) | |
| .attr("y2", -14) | |
| .attr("stroke", symbolcolors.mout) | |
| .attr("stroke-width", 2); | |
| symbolgroup.append("circle") | |
| .attr("class", "dot") | |
| .attr("r", 8) | |
| .style("fill", function(d) { return symbolcolors[d.Geslacht]; }) | |
| .style("stroke", function(d) { return symbolcolors[d.Geslacht + "out"]; }) | |
| .style("stroke-width", 2) | |
| .on('mouseover', function(d) { | |
| tip.show(d); | |
| d3.select(this).style("stroke-width", 3); | |
| }) | |
| .on('mouseout', function(d) { | |
| d3.select(this).style("stroke-width", 2); | |
| tip.hide(d); | |
| }); | |
| }); | |
| //button functionality | |
| d3.select("#zoomin").on("click", function() { | |
| d3.select("#zoomout").classed("pressed", false); | |
| d3.select("#zoomin").classed("pressed", true); | |
| y.domain([0, 21]); | |
| svg.select('.y.axis') | |
| .transition().duration(1500) | |
| .call(yAxis); | |
| svg.selectAll("g.m, g.f") | |
| .transition().duration(1500) | |
| .attr("transform", function(d) { return "translate(" + x(d.Overleving) + "," + y(d.Prevalentie) + ")"; }); | |
| svg.selectAll("line.connect") | |
| .transition().duration(1500) | |
| .attr("y1", function(d) { return y(d.values[0].Prevalentie)}) | |
| .attr("y2", function(d) { return y(d.values[1].Prevalentie)}); | |
| svg.selectAll("text.chartlabel") | |
| .transition().duration(1500) | |
| .attr("x", function(d) { return x((d.values[0].Overleving + d.values[1].Overleving)/2); }) | |
| .attr("y", function(d) { return y((d.values[0].Prevalentie + d.values[1].Prevalentie)/2); }) | |
| .style("opacity", 0.4); | |
| }); | |
| d3.select("#zoomout").on("click", function() { | |
| d3.select("#zoomin").classed("pressed", false); | |
| d3.select("#zoomout").classed("pressed", true); | |
| y.domain([0, 110]); | |
| svg.select('.y.axis') | |
| .transition().duration(1500) | |
| .call(yAxis); | |
| svg.selectAll("g.m, g.f") | |
| .transition().duration(1500) | |
| .attr("transform", function(d) { return "translate(" + x(d.Overleving) + "," + y(d.Prevalentie) + ")"; }); | |
| svg.selectAll("line.connect") | |
| .transition().duration(1500) | |
| .attr("y1", function(d) { return y(d.values[0].Prevalentie)}) | |
| .attr("y2", function(d) { return y(d.values[1].Prevalentie)}); | |
| svg.selectAll("text.chartlabel") | |
| .transition().duration(1500) | |
| .attr("x", function(d) { return x((d.values[0].Overleving + d.values[1].Overleving)/2); }) | |
| .attr("y", function(d) { return y((d.values[0].Prevalentie + d.values[1].Prevalentie)/2); }) | |
| .style("opacity", function(d) { if((d.values[0].Prevalentie + d.values[1].Prevalentie)/2 < 25) { | |
| return 0; | |
| } | |
| else { | |
| return 0.4; | |
| } | |
| }); | |
| }); | |
| //Responsiveness | |
| function resize() { | |
| var dim = parseInt(d3.select("#chart").style("width")), | |
| width = dim - margin.left - margin.right, | |
| height = 450 - margin.top - margin.bottom; | |
| // Update the range of the scale with new width/height | |
| x.range([0, width]); | |
| y.range([height, 0]); | |
| // Update the axis and text with the new scale | |
| svg.select('.x.axis') | |
| .attr("transform", "translate(0," + height + ")") | |
| .call(xAxis); | |
| svg.select('.x.axis').select('.label') | |
| .attr("x",width); | |
| svg.select('.y.axis') | |
| .call(yAxis); | |
| // Update the ticks | |
| yAxis.innerTickSize(-width); | |
| svg.selectAll("g.m, g.f") | |
| .attr("transform", function(d) { return "translate(" + x(d.Overleving) + "," + y(d.Prevalentie) + ")"; }); | |
| svg.selectAll("line.connect") | |
| .attr("x1", function(d) { return x(d.values[0].Overleving)}) | |
| .attr("x2", function(d) { return x(d.values[1].Overleving)}) | |
| .attr("y1", function(d) { return y(d.values[0].Prevalentie)}) | |
| .attr("y2", function(d) { return y(d.values[1].Prevalentie)}); | |
| svg.selectAll("text.chartlabel") | |
| .attr("x", function(d) { return x((d.values[0].Overleving + d.values[1].Overleving)/2); }) | |
| .attr("y", function(d) { return y((d.values[0].Prevalentie + d.values[1].Prevalentie)/2); }) | |
| .style("font-size", function() { | |
| if(width < 1024) { | |
| return 16; | |
| } | |
| else { | |
| return 22; | |
| } | |
| }); | |
| } | |
| d3.select(window).on('resize', resize); | |
| resize(); | |
| </script> | |
| </body> | |
| </html> |