Non-TP53 Mutation Pie-Tree

index.html

<title>TP53 Pie Tree</title>
<p id="chart"></p>

Non-TP53 Mutation Pie-Tree.markdown

Non-TP53 Mutation Pie-Tree

Forked from Joshua McMichael's Pen TP53 Mutation Pie-Tree.

A Pen by Joshua McMichael on CodePen.

License.

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 + ")";
  });

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>

style.css

.link {
  fill: none;
  stroke: #ccc;
}
.link-label {
  stroke: none;
  fill: black;
}