Forked from Joshua McMichael's Pen TP53 Mutation Pie-Tree.
A Pen by Joshua McMichael on CodePen.
<title>TP53 Pie Tree</title> | |
<p id="chart"></p> |
Forked from Joshua McMichael's Pen TP53 Mutation Pie-Tree.
A Pen by Joshua McMichael on CodePen.
//JSON object with the data | |
//http://bl.ocks.org/anotherjavadude/2952964 | |
var treeData = {"name" : "non-TP53", "info" : "1", "count" : 15, "value" : [0.538216560509554,0.368653421633554,0.307507987220447,0.0000000001,0.169216921692169,0.317279411764706,0.229613733905579,0.755181347150259], | |
"children" : [ | |
{"name" : "PIK3CA", "info" : "2", "count" : 0.15, "value" : [0,0.1257,0.2078,0,0.0160,0.2903,0.0748,0.0240], | |
"children": [ | |
{"name" : "PTEN", "info" : "5", "count" : 0.18, "value" : [0,0.0060,0.0156,0,0.0053,0.0743,0,0] }, | |
{"name" : "ARID1A", "info" : "5", "count" : 0.13, "value" : [0,0.0060,0.0364,0,0,0.0377,0.0047,0.0034] }, | |
{"name" : "KRAS", "info" : "5", "count" : 0.10, "value" : [0,0,0.0338,0,0,0.0297,0.0140,0] } | |
]}, | |
{"name" : "PTEN", "info" : "3", "count" : 0.10, "value" : [0,0.2036,0.0416,0,0.0957,0.1554,0.0140,0.0377], | |
"children": [ | |
{"name" : "PIK3CA", "info" : "5", "count" : 0.28, "value" : [0,0.0060,0.0156,0,0.0053,0.0743,0,0] }, | |
{"name" : "ARID1A", "info" : "5", "count" : 0.19, "value" : [0,0,0.0156,0,0.0053,0.0480,0,0.0017] }, | |
{"name" : "CTNNB1", "info" : "5", "count" : 0.19, "value" : [0,0.0030,0.0052,0,0.0053,0.0514,0,0] }, | |
{"name" : "PIK3R1", "info" : "5", "count" : 0.18, "value" : [0,0.0150,0,0,0,0.0480,0,0.0017] }, | |
{"name" : "KRAS", "info" : "6", "count" : 0.11, "value" : [0,0.0030,0.0052,0,0,0.0286,0,0] } | |
]}, | |
{"name" : "VHL", "info" : "3", "count" : 0.07, "value" : [0,0,0,0,0,0.0023,0,0.3431], | |
"children": [ | |
{"name" : "PBRM1", "info" : "6", "count" : 0.33, "value" : [0,0,0,0,0,0,0,0.1149] } | |
]}, | |
{"name" : "KRAS", "info" : "4", "count" : 0.06, "value" : [0.0414,0.0060,0.1143,0,0,0.0469,0.3551,0.0051] , | |
"children": [ | |
{"name" : "PIK3CA", "info" : "5", "count" : 0.24, "value" : [0,0,0.0338,0,0,0.0297,0.0140,0] }, | |
{"name" : "APC", "info" : "5", "count" : 0.21, "value" : [0,0,0.0805,0,0,0.0023,0.0140,0] }, | |
{"name" : "PTEN", "info" : "5", "count" : 0.16, "value" : [0,0.0030,0.0052,0,0,0.0286,0,0] }, | |
{"name" : "STK11", "info" : "5", "count" : 0.16, "value" : [0,0,0,0,0,0,0.1262,0] }, | |
{"name" : "ARID1A", "info" : "6", "count" : 0.16, "value" : [0,0,0.0026,0,0,0.0229,0.0280,0] }, | |
{"name" : "KEAP1", "info" : "6", "count" : 0.13, "value" : [0,0,0,0,0,0,0.1028,0] } | |
]}, | |
{"name" : "ARID1A", "info" : "3", "count" : 0.06, "value" : [0,0.0210,0.1013,0,0.0319,0.0766,0.0467,0.0480], | |
"children": [ | |
{"name" : "PIK3CA", "info" : "6", "count" : 0.33, "value" : [0,0.0060,0.0364,0,0,0.0377,0.0047,0.0034] }, | |
{"name" : "PTEN", "info" : "6", "count" : 0.32, "value" : [0,0,0.0156,0,0.0053,0.0480,0,0.0017] }, | |
{"name" : "CTNNB1", "info" : "6", "count" : 0.19, "value" : [0,0,0.0156,0,0.0053,0.0263,0,0] }, | |
{"name" : "KRAS", "info" : "6", "count" : 0.17, "value" : [0,0,0.0026,0,0,0.0229,0.0280,0] }, | |
{"name" : "PIK3R1", "info" : "6", "count" : 0.13, "value" : [0,0.0030,0,0,0,0.0206,0,0.0017] } | |
]}, | |
{"name" : "KMT2C", "info" : "4", "count" : 0.05, "value" : [0.0059,0.0299,0.0545,0,0.0372,0.0571,0.0748,0.0652] , | |
"children": [ | |
{"name" : "PIK3CA", "info" : "6", "count" : 0.20, "value" : [0,0,0.0156,0,0,0.0217,0.0140,0.0017] }, | |
{"name" : "KMT2D", "info" : "6", "count" : 0.14, "value" : [0,0.0030,0.0078,0,0,0.0069,0.0140,0.0120] }, | |
{"name" : "PTEN", "info" : "6", "count" : 0.13, "value" : [0,0.0120,0.0026,0,0.0106,0.0080,0.0047,0.0051] } | |
]}, | |
]}; | |
var organSystemColors = [ | |
]; | |
var conf = { | |
nodeRadius: 38, | |
width: 2300, | |
height: 1800, | |
nodeSize: [80, 200] | |
} | |
// Create a svg canvas | |
var vis = d3.select("#chart").append("svg") | |
.attr("width", conf.width) | |
.attr("height", conf.height) | |
.append("g") | |
.attr("transform", "translate(" + conf.width / 2 + "," + conf.nodeSize[0] + ")"); //shift right | |
//Add tooltip div | |
var div = d3.select("body").append("div") | |
.attr("class", "tooltip") | |
.style("opacity", 1e-6); | |
// Create a tree "canvas" | |
var tree = d3.layout.tree().nodeSize(conf.nodeSize); | |
// Change x and y (for the left to right tree) | |
var diagonal = d3.svg.diagonal(); | |
//.projection(function(d){ return[d.y,d.x]; }); | |
//Preparing data for the tree layout, convert data into array of nodes | |
var nodes = tree.nodes(treeData); | |
conf.maxDepth = _.chain(nodes).map('depth').max().value(); | |
var links = tree.links(nodes); | |
var color = d3.scale.category10(); | |
var pie = d3.layout.pie().sort(null); | |
var arc = d3.svg.arc().outerRadius(function(d, i, t) { return conf.nodeRadius; }); | |
var link = vis.selectAll("pathlink") | |
.data(links) | |
.enter() | |
.append("g") | |
.attr("class", "link"); | |
link.append("path") | |
.attr("d", diagonal) | |
.attr("stroke-width", function(d) { | |
var strokeWidth = Math.round((d.target.count * 100)) + "px"; | |
// console.log(['name:', d.target.name, 'count:', d.target.count, 'strokeWidth:', strokeWidth].join(" ")); | |
return strokeWidth; | |
}); | |
var node = vis.selectAll("g.nodes") | |
.data(nodes) | |
.enter().append("g") | |
.attr("transform", function(d) { | |
return "translate(" + d.x + "," + d.y + ")"; | |
}) | |
//add the dot at every node | |
node.selectAll("path") | |
.data(function(d) { | |
// console.log("path pie d --------"); | |
// console.log(d); | |
return pie(d.value); | |
}) | |
.enter().append("svg:path") | |
.attr("d", arc) | |
.style("fill", function(d, i) { | |
return color(i) | |
}); | |
node.append("text") | |
.attr("dx", 0) | |
.attr("dy", function(d) { | |
return d.depth === conf.maxDepth ? 20 + conf.nodeRadius : -5 -conf.nodeRadius; | |
}) | |
.attr("font-family", "Helvetica, Arial, sans-serif") | |
.attr("font-style", "oblique") | |
.style("text-anchor", "middle") | |
.text(function(d) { | |
return d.name; | |
}); | |
link.append("text") | |
.attr("text-anchor", "middle") | |
.attr("fill", "#333") | |
.attr("font-family", "Helvetica, Arial, sans-serif") | |
.attr("font-size", "15px") | |
.attr("font-weight", "bold") | |
.attr("stroke", "none") | |
.text(function(d) { | |
return Math.round(d.target.count * 100) + "%"; | |
}) | |
.attr("transform", function(d) { | |
return "translate(" + | |
(d.source.x + d.target.x)/2 + "," + | |
(d.source.y + d.target.y)/2 + ")"; | |
}); |
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.12/d3.min.js"></script> |
.link { | |
fill: none; | |
stroke: #ccc; | |
} | |
.link-label { | |
stroke: none; | |
fill: black; | |
} |