Skip to content

Instantly share code, notes, and snippets.

@jmcmichael

jmcmichael/Non-TP53 Mutation Pie-Tree.markdown

Created March 7, 2016 17:56
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save jmcmichael/4f1614148d6c958a89ab to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save jmcmichael/4f1614148d6c958a89ab to your computer and use it in GitHub Desktop.
Download ZIP
Non-TP53 Mutation Pie-Tree
Raw
index.html
<title>TP53 Pie Tree</title>
<p id="chart"></p>
Raw
script.js
//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 + ")";
});
Raw
scripts
<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>
Raw
style.css
.link {
fill: none;
stroke: #ccc;
}
.link-label {
stroke: none;
fill: black;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment