Kaplan-Meier Plot of Lung Data
Kaplan-Meier graphs are visual representations of survival data, commonly used in medical research and other fields dealing with time-to-event data. They illustrate the probability of an event (like death or disease recurrence) occurring over time, providing a clear picture of survival rates within a group. These graphs display survival curves, where the y-axis shows the proportion of subjects who survived past a certain point in time, and the x-axis represents time. Steps or drops in the curve indicate the occurrence of events. Kaplan-Meier curves are essential tools for comparing survival experiences between different groups, such as patients receiving various treatments or possessing different characteristics.
<html>
<head>
<!-- Include the CanvasXpress library in your HTML file -->
<link rel="stylesheet" href="https://www.canvasxpress.org/dist/canvasXpress.css" type="text/css"/>
<script src="https://www.canvasxpress.org/dist/canvasXpress.min.js"></script>
</head>
<body>
<!-- Create a canvas element for the chart with the desired dimensions -->
<div>
<canvas id="canvasId" width="600" height="600"></canvas>
</div>
<!-- Create a script to initialize the chart -->
<script>
// Use a data frame (2D-array) for the graph
var data = [
[ "Id", "inst", "time", "status-org", "age", "sex", "ph.ecog", "ph.karno", "pat.karno", "meal.cal", "wt.loss", "status", "Gender"],
[ "1", 3, 306, 2, 74, 1, 1, 90, 100, 1175, null, 1, "Male"],
[ "2", 3, 455, 2, 68, 1, 0, 90, 90, 1225, 15, 1, "Male"],
[ "3", 3, 1010, 1, 56, 1, 0, 90, 90, null, 15, 0, "Male"],
[ "4", 5, 210, 2, 57, 1, 1, 90, 60, 1150, 11, 1, "Male"],
[ "5", 1, 883, 2, 60, 1, 0, 100, 90, null, 0, 1, "Male"],
[ "6", 12, 1022, 1, 74, 1, 1, 50, 80, 513, 0, 0, "Male"],
[ "7", 7, 310, 2, 68, 2, 2, 70, 60, 384, 10, 1, "Female"],
[ "8", 11, 361, 2, 71, 2, 2, 60, 80, 538, 1, 1, "Female"],
[ "9", 1, 218, 2, 53, 1, 1, 70, 80, 825, 16, 1, "Male"],
[ "10", 7, 166, 2, 61, 1, 2, 70, 70, 271, 34, 1, "Male"],
[ "11", 6, 170, 2, 57, 1, 1, 80, 80, 1025, 27, 1, "Male"],
[ "12", 16, 654, 2, 68, 2, 2, 70, 70, null, 23, 1, "Female"],
[ "13", 11, 728, 2, 68, 2, 1, 90, 90, null, 5, 1, "Female"],
[ "14", 21, 71, 2, 60, 1, null, 60, 70, 1225, 32, 1, "Male"],
[ "15", 12, 567, 2, 57, 1, 1, 80, 70, 2600, 60, 1, "Male"],
[ "16", 1, 144, 2, 67, 1, 1, 80, 90, null, 15, 1, "Male"],
[ "17", 22, 613, 2, 70, 1, 1, 90, 100, 1150, -5, 1, "Male"],
[ "18", 16, 707, 2, 63, 1, 2, 50, 70, 1025, 22, 1, "Male"],
[ "19", 1, 61, 2, 56, 2, 2, 60, 60, 238, 10, 1, "Female"],
[ "20", 21, 88, 2, 57, 1, 1, 90, 80, 1175, null, 1, "Male"],
[ "21", 11, 301, 2, 67, 1, 1, 80, 80, 1025, 17, 1, "Male"],
[ "22", 6, 81, 2, 49, 2, 0, 100, 70, 1175, -8, 1, "Female"],
[ "23", 11, 624, 2, 50, 1, 1, 70, 80, null, 16, 1, "Male"],
[ "24", 15, 371, 2, 58, 1, 0, 90, 100, 975, 13, 1, "Male"],
[ "25", 12, 394, 2, 72, 1, 0, 90, 80, null, 0, 1, "Male"],
[ "26", 12, 520, 2, 70, 2, 1, 90, 80, 825, 6, 1, "Female"],
[ "27", 4, 574, 2, 60, 1, 0, 100, 100, 1025, -13, 1, "Male"],
[ "28", 13, 118, 2, 70, 1, 3, 60, 70, 1075, 20, 1, "Male"],
// ... (data truncated after 29 records for clarity)
]
// Create the configuration for the graph
var config = {
"colorBy" : "Gender",
"colors" : ["#2E9FDF","#E7B800"],
"graphType" : "Scatter2D",
"kmRiskTable" : true,
"legendColumns" : 2,
"legendPosition" : "top",
"showKMConfidenceIntervals" : true,
"showKMMedianSurvivalTime" : true,
"title" : "Lung Cancer Data with Confidence Level and Risk Number Table",
"xAxis" : ["time"],
"xAxisTitle" : "Time",
"yAxis" : ["status"],
"yAxisTitle" : "Survival Probability"
}
// Event used to create graph (optional)
var events = false
// Call the CanvasXpress function to create the graph
var cX = new CanvasXpress("canvasId", data, config, events);
// Functions after rendering graph
cX.addKMPlot();
</script>
</body>
</html>
<html>
<head>
<!-- Include the CanvasXpress library in your HTML file -->
<link rel="stylesheet" href="https://www.canvasxpress.org/dist/canvasXpress.css" type="text/css"/>
<script src="https://www.canvasxpress.org/dist/canvasXpress.min.js"></script>
</head>
<body>
<!-- Create a canvas element for the chart with the desired dimensions -->
<div>
<canvas id="canvasId" width="600" height="600"></canvas>
</div>
<!-- Create a script to initialize the chart -->
<script>
// Create the data for the graph
var data = {
"y" : {
"data" : [
[3,306,2,74,1,1,90,100,1175,null,1],[3,455,2,68,1,0,90,90,1225,15,1],[3,1010,1,56,1,0,90,90,null,15,0],[5,210,2,57,1,1,90,60,1150,11,1],[1,883,2,60,1,0,100,90,null,0,1],[12,1022,1,74,1,1,50,80,513,0,0],[7,310,2,68,2,2,70,60,384,10,1],[11,361,2,71,2,2,60,80,538,1,1],[1,218,2,53,1,1,70,80,825,16,1],[7,166,2,61,1,2,70,70,271,34,1],[6,170,2,57,1,1,80,80,1025,27,1],[16,654,2,68,2,2,70,70,null,23,1],[11,728,2,68,2,1,90,90,null,5,1],[21,71,2,60,1,null,60,70,1225,32,1],[12,567,2,57,1,1,80,70,2600,60,1],[1,144,2,67,1,1,80,90,null,15,1],[22,613,2,70,1,1,90,100,1150,-5,1],[16,707,2,63,1,2,50,70,1025,22,1],[1,61,2,56,2,2,60,60,238,10,1],[21,88,2,57,1,1,90,80,1175,null,1],[11,301,2,67,1,1,80,80,1025,17,1],[6,81,2,49,2,0,100,70,1175,-8,1],[11,624,2,50,1,1,70,80,null,16,1],[15,371,2,58,1,0,90,100,975,13,1],[12,394,2,72,1,0,90,80,null,0,1],[12,520,2,70,2,1,90,80,825,6,1],[4,574,2,60,1,0,100,100,1025,-13,1],[13,118,2,70,1,3,60,70,1075,20,1],[13,390,2,53,1,1,80,70,875,-7,1],[1,12,2,74,1,2,70,50,305,20,1],[12,473,2,69,2,1,90,90,1025,-1,1],[1,26,2,73,1,2,60,70,388,20,1],[7,533,2,48,1,2,60,80,null,-11,1],[16,107,2,60,2,2,50,60,925,-15,1],[12,53,2,61,1,2,70,100,1075,10,1],[1,122,2,62,2,2,50,50,1025,null,1],[22,814,2,65,1,2,70,60,513,28,1],[15,965,1,66,2,1,70,90,875,4,0],[1,93,2,74,1,2,50,40,1225,24,1],[1,731,2,64,2,1,80,100,1175,15,1],[5,460,2,70,1,1,80,60,975,10,1],[11,153,2,73,2,2,60,70,1075,11,1],[10,433,2,59,2,0,90,90,363,27,1],[12,145,2,60,2,2,70,60,null,null,1],[7,583,2,68,1,1,60,70,1025,7,1],[7,95,2,76,2,2,60,60,625,-24,1],[1,303,2,74,1,0,90,70,463,30,1],[3,519,2,63,1,1,80,70,1025,10,1],[13,643,2,74,1,0,90,90,1425,2,1],[22,765,2,50,2,1,90,100,1175,4,1],[3,735,2,72,2,1,90,90,null,9,1],[12,189,2,63,1,0,80,70,null,0,1],[21,53,2,68,1,0,90,100,1025,0,1],[1,246,2,58,1,0,100,90,1175,7,1],[6,689,2,59,1,1,90,80,1300,15,1],[1,65,2,62,1,0,90,80,725,null,1],[5,5,2,65,2,0,100,80,338,5,1],[22,132,2,57,1,2,70,60,null,18,1],[3,687,2,58,2,1,80,80,1225,10,1],[1,345,2,64,2,1,90,80,1075,-3,1],[22,444,2,75,2,2,70,70,438,8,1],[12,223,2,48,1,1,90,80,1300,68,1],[21,175,2,73,1,1,80,100,1025,null,1],[11,60,2,65,2,1,90,80,1025,0,1],[3,163,2,69,1,1,80,60,1125,0,1],[3,65,2,68,1,2,70,50,825,8,1],[16,208,2,67,2,2,70,null,538,2,1],[5,821,1,64,2,0,90,70,1025,3,0],[22,428,2,68,1,0,100,80,1039,0,1],[6,230,2,67,1,1,80,100,488,23,1],[13,840,1,63,1,0,90,90,1175,-1,0],[3,305,2,48,2,1,80,90,538,29,1],[5,11,2,74,1,2,70,100,1175,0,1],[2,132,2,40,1,1,80,80,null,3,1],[21,226,2,53,2,1,90,80,825,3,1],[12,426,2,71,2,1,90,90,1075,19,1],[1,705,2,51,2,0,100,80,1300,0,1],[6,363,2,56,2,1,80,70,1225,-2,1],[3,11,2,81,1,0,90,null,731,15,1],[1,176,2,73,1,0,90,70,169,30,1],[4,791,2,59,1,0,100,80,768,5,1],[13,95,2,55,1,1,70,90,1500,15,1],[11,196,1,42,1,1,80,80,1425,8,0],[21,167,2,44,2,1,80,90,588,-1,1],[16,806,1,44,1,1,80,80,1025,1,0],[6,284,2,71,1,1,80,90,1100,14,1],[22,641,2,62,2,1,80,80,1150,1,1],[21,147,2,61,1,0,100,90,1175,4,1],[13,740,1,44,2,1,90,80,588,39,0],[1,163,2,72,1,2,70,70,910,2,1],[11,655,2,63,1,0,100,90,975,-1,1],[22,239,2,70,1,1,80,100,null,23,1],[5,88,2,66,1,1,90,80,875,8,1],[10,245,2,57,2,1,80,60,280,14,1],[1,588,1,69,2,0,100,90,null,13,0],[12,30,2,72,1,2,80,60,288,7,1],[3,179,2,69,1,1,80,80,null,25,1],[12,310,2,71,1,1,90,100,null,0,1],[11,477,2,64,1,1,90,100,910,0,1],[3,166,2,70,2,0,90,70,null,10,1],[1,559,1,58,2,0,100,100,710,15,0],[6,450,2,69,2,1,80,90,1175,3,1],[13,364,2,56,1,1,70,80,null,4,1],[6,107,2,63,1,1,90,70,null,0,1],[13,177,2,59,1,2,50,null,null,32,1],[12,156,2,66,1,1,80,90,875,14,1],[26,529,1,54,2,1,80,100,975,-3,0],[1,11,2,67,1,1,90,90,925,null,1],[21,429,2,55,1,1,100,80,975,5,1],[3,351,2,75,2,2,60,50,925,11,1],[13,15,2,69,1,0,90,70,575,10,1],[1,181,2,44,1,1,80,90,1175,5,1],[10,283,2,80,1,1,80,100,1030,6,1],[3,201,2,75,2,0,90,100,null,1,1],[6,524,2,54,2,1,80,100,null,15,1],[1,13,2,76,1,2,70,70,413,20,1],[3,212,2,49,1,2,70,60,675,20,1],[1,524,2,68,1,2,60,70,1300,30,1],[16,288,2,66,1,2,70,60,613,24,1],[15,363,2,80,1,1,80,90,346,11,1],[22,442,2,75,1,0,90,90,null,0,1],[26,199,2,60,2,2,70,80,675,10,1],[3,550,2,69,2,1,70,80,910,0,1],[11,54,2,72,1,2,60,60,768,-3,1],[1,558,2,70,1,0,90,90,1025,17,1],[22,207,2,66,1,1,80,80,925,20,1],[7,92,2,50,1,1,80,60,1075,13,1],[12,60,2,64,1,1,80,90,993,0,1],[16,551,1,77,2,2,80,60,750,28,0],[12,543,1,48,2,0,90,60,null,4,0],[4,293,2,59,2,1,80,80,925,52,1],[16,202,2,53,1,1,80,80,null,20,1],[6,353,2,47,1,0,100,90,1225,5,1],[13,511,1,55,2,1,80,70,null,49,0],[1,267,2,67,1,0,90,70,313,6,1],[22,511,1,74,2,2,60,40,96,37,0],[12,371,2,58,2,1,80,70,null,0,1],[13,387,2,56,1,2,80,60,1075,null,1],[1,457,2,54,1,1,90,90,975,-5,1],[5,337,2,56,1,0,100,100,1500,15,1],[21,201,2,73,2,2,70,60,1225,-16,1],[3,404,1,74,1,1,80,70,413,38,0],[26,222,2,76,1,2,70,70,1500,8,1],[1,62,2,65,2,1,80,90,1075,0,1],[11,458,1,57,1,1,80,100,513,30,0],[26,356,1,53,2,1,90,90,null,2,0],[16,353,2,71,1,0,100,80,775,2,1],[16,163,2,54,1,1,90,80,1225,13,1],[12,31,2,82,1,0,100,90,413,27,1],[13,340,2,59,2,0,100,90,null,0,1],[13,229,2,70,1,1,70,60,1175,-2,1],[22,444,1,60,1,0,90,100,null,7,0],[5,315,1,62,2,0,90,90,null,0,0],[16,182,2,53,2,1,80,60,null,4,1],[32,156,2,55,1,2,70,30,1025,10,1],[null,329,2,69,1,2,70,80,713,20,1],[26,364,1,68,2,1,90,90,null,7,0],[4,291,2,62,1,2,70,60,475,27,1],[12,179,2,63,1,1,80,70,538,-2,1],[1,376,1,56,2,1,80,90,825,17,0],[32,384,1,62,2,0,90,90,588,8,0],[10,268,2,44,2,1,90,100,2450,2,1],[11,292,1,69,1,2,60,70,2450,36,0],[6,142,2,63,1,1,90,80,875,2,1],[7,413,1,64,1,1,80,70,413,16,0],[16,266,1,57,2,0,90,90,1075,3,0],[11,194,2,60,2,1,80,60,null,33,1],[21,320,2,46,1,0,100,100,860,4,1],[6,181,2,61,1,1,90,90,730,0,1],[12,285,2,65,1,0,100,90,1025,0,1],[13,301,1,61,1,1,90,100,825,2,0],[2,348,2,58,2,0,90,80,1225,10,1],[2,197,2,56,1,1,90,60,768,37,1],[16,382,1,43,2,0,100,90,338,6,0],[1,303,1,53,1,1,90,80,1225,12,0],[13,296,1,59,2,1,80,100,1025,0,0],[1,180,2,56,1,2,60,80,1225,-2,1],[13,186,2,55,2,1,80,70,null,null,1],[1,145,2,53,2,1,80,90,588,13,1],[7,269,1,74,2,0,100,100,588,0,0],[13,300,1,60,1,0,100,100,975,5,0],[1,284,1,39,1,0,100,90,1225,-5,0],[16,350,2,66,2,0,90,100,1025,null,1],[32,272,1,65,2,1,80,90,null,-1,0],[12,292,1,51,2,0,90,80,1225,0,0],[12,332,1,45,2,0,90,100,975,5,0],[2,285,2,72,2,2,70,90,463,20,1],[3,259,1,58,1,0,90,80,1300,8,0],[15,110,2,64,1,1,80,60,1025,12,1],[22,286,2,53,1,0,90,90,1225,8,1],[16,270,2,72,1,1,80,90,488,14,1],[16,81,2,52,1,2,60,70,1075,null,1],[12,131,2,50,1,1,90,80,513,null,1],[1,225,1,64,1,1,90,80,825,33,0],[22,269,2,71,1,1,90,90,1300,-2,1],[12,225,1,70,1,0,100,100,1175,6,0],[32,243,1,63,2,1,80,90,825,0,0],[21,279,1,64,1,1,90,90,null,4,0],[1,276,1,52,2,0,100,80,975,0,0],[32,135,2,60,1,1,90,70,1275,0,1],[15,79,2,64,2,1,90,90,488,37,1],[22,59,2,73,1,1,60,60,2200,5,1],[32,240,1,63,2,0,90,100,1025,0,0],[3,202,1,50,2,0,100,100,635,1,0],[26,235,1,63,2,0,100,90,413,0,0],[33,105,2,62,1,2,null,70,null,null,1],[5,224,1,55,2,0,80,90,null,23,0],[13,239,2,50,2,2,60,60,1025,-3,1],[21,237,1,69,1,1,80,70,null,null,0],[33,173,1,59,2,1,90,80,null,10,0],[1,252,1,60,2,0,100,90,488,-2,0],[6,221,1,67,1,1,80,70,413,23,0],[15,185,1,69,1,1,90,70,1075,0,0],[11,92,1,64,2,2,70,100,null,31,0],[11,13,2,65,1,1,80,90,null,10,1],[11,222,1,65,1,1,90,70,1025,18,0],[13,192,1,41,2,1,90,80,null,-10,0],[21,183,2,76,1,2,80,60,825,7,1],[11,211,1,70,2,2,70,30,131,3,0],[2,175,1,57,2,0,80,80,725,11,0],[22,197,1,67,1,1,80,90,1500,2,0],[11,203,1,71,2,1,80,90,1025,0,0],[1,116,2,76,1,1,80,80,null,0,1],[1,188,1,77,1,1,80,60,null,3,0],[13,191,1,39,1,0,90,90,2350,-5,0],[32,105,1,75,2,2,60,70,1025,5,0],[6,174,1,66,1,1,90,100,1075,1,0],[22,177,1,58,2,1,80,90,1060,0,0]
],
"smps" : ["inst","time","status-org","age","sex","ph.ecog","ph.karno","pat.karno","meal.cal","wt.loss","status"],
"vars" : ["1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25","26","27","28","29","30","31","32","33","34","35","36","37","38","39","40","41","42","43","44","45","46","47","48","49","50","51","52","53","54","55","56","57","58","59","60","61","62","63","64","65","66","67","68","69","70","71","72","73","74","75","76","77","78","79","80","81","82","83","84","85","86","87","88","89","90","91","92","93","94","95","96","97","98","99","100","101","102","103","104","105","106","107","108","109","110","111","112","113","114","115","116","117","118","119","120","121","122","123","124","125","126","127","128","129","130","131","132","133","134","135","136","137","138","139","140","141","142","143","144","145","146","147","148","149","150","151","152","153","154","155","156","157","158","159","160","161","162","163","164","165","166","167","168","169","170","171","172","173","174","175","176","177","178","179","180","181","182","183","184","185","186","187","188","189","190","191","192","193","194","195","196","197","198","199","200","201","202","203","204","205","206","207","208","209","210","211","212","213","214","215","216","217","218","219","220","221","222","223","224","225","226","227","228"]
},
"z" : {
"Gender" : ["Male","Male","Male","Male","Male","Male","Female","Female","Male","Male","Male","Female","Female","Male","Male","Male","Male","Male","Female","Male","Male","Female","Male","Male","Male","Female","Male","Male","Male","Male","Female","Male","Male","Female","Male","Female","Male","Female","Male","Female","Male","Female","Female","Female","Male","Female","Male","Male","Male","Female","Female","Male","Male","Male","Male","Male","Female","Male","Female","Female","Female","Male","Male","Female","Male","Male","Female","Female","Male","Male","Male","Female","Male","Male","Female","Female","Female","Female","Male","Male","Male","Male","Male","Female","Male","Male","Female","Male","Female","Male","Male","Male","Male","Female","Female","Male","Male","Male","Male","Female","Female","Female","Male","Male","Male","Male","Female","Male","Male","Female","Male","Male","Male","Female","Female","Male","Male","Male","Male","Male","Male","Female","Female","Male","Male","Male","Male","Male","Female","Female","Female","Male","Male","Female","Male","Female","Female","Male","Male","Male","Female","Male","Male","Female","Male","Female","Male","Male","Male","Female","Male","Male","Female","Female","Male","Male","Female","Male","Male","Female","Female","Female","Male","Male","Male","Female","Female","Male","Male","Male","Male","Female","Male","Female","Male","Female","Male","Female","Female","Female","Male","Male","Female","Female","Female","Female","Female","Male","Male","Male","Male","Male","Male","Male","Male","Male","Female","Male","Female","Male","Female","Male","Female","Female","Female","Male","Female","Female","Male","Female","Female","Male","Male","Female","Male","Male","Female","Male","Female","Female","Male","Female","Male","Male","Male","Female","Male","Female"]
}
}
// Create the configuration for the graph
var config = {
"colorBy" : "Gender",
"colors" : ["#2E9FDF","#E7B800"],
"graphType" : "Scatter2D",
"kmRiskTable" : true,
"legendColumns" : 2,
"legendPosition" : "top",
"showKMConfidenceIntervals" : true,
"showKMMedianSurvivalTime" : true,
"title" : "Lung Cancer Data with Confidence Level and Risk Number Table",
"xAxis" : ["time"],
"xAxisTitle" : "Time",
"yAxis" : ["status"],
"yAxisTitle" : "Survival Probability"
}
// Event used to create graph (optional)
var events = false
// Call the CanvasXpress function to create the graph
var cX = new CanvasXpress("canvasId", data, config, events);
// Functions after rendering graph
cX.addKMPlot();
</script>
</body>
</html>
