D3 Examples - Collapsible tree with scaled lines

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style>
    .node {
        cursor: pointer;
    }
    
    .node circle {
        fill: #fff;
        stroke: steelblue;
        stroke-width: 1.5px;
    }
    
    .node text {
        font: 12px sans-serif;
    }
    
    .link {
        fill: none;
        stroke: lightsteelblue;
        /*stroke-width: 1.5px;*/
    }
div.tooltip {
        position: absolute;
        width: auto;
        height: auto;
        padding: 10px;
        background-color: white;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
        -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
        -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
        box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
        /*pointer-events: none;*/
}
​
#tooltip.hidden {
        display: none;
}
​
#tooltip p {
  margin: 0;
  font-family: sans-serif;;
  font-size: 16px;
  line-height: 20px;
}
​
</style>
​
<body>
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
​
<h2>Canadian Political Donations</h2> 
<script>
var margin = {
        top: 20,
        right: 120,
        bottom: 20,
        left: 120
    },
    width = 960 - margin.right - margin.left,
    height = 800 - margin.top - margin.bottom;
​
var tree = d3.layout.tree()
    .size([height, width]);
​
var color = d3.scale.category10();
​
var i = 0,
    duration = 750,
    root;
​
var diagonal = d3.svg.diagonal()
    .projection(function(d) {
        return [d.y, d.x];
    });
​
var svg = d3.select("body").append("svg")
    .attr("width", width + margin.right + margin.left)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
​
​
var test = [];
var totals = [];
​
var dat = {};
​
// var selectedYear = '2015' //could switch between categories
// var selectYears = ['2008','2009','2010','2011','2012','2013','2014','2015']
​
// var formatSpending = function (d){
// if (isNaN(d)) d = 0;
//  return "$" + d3.format(",.2f")(d) + " Thousand";
// };
​
d3.csv("short.csv", function(csv) {
​
    dat.children = getData(csv);
    console.log(dat)
​
    root = dat;
    root.x0 = height / 2;
    root.y0 = 0;
​
    function collapse(d) {
        if (d.values) {
            // console.log(d.values)
            d.children = d.values
            d._children = d.children;
            if (d._children.length > 1) {
                d._children.forEach(collapse);
            }
​
            d.children = null;
        }
    }
​
    // console.log(root)
    // root.children.forEach(function(d){
    //   // console.log(d)
    // })
    root.children.forEach(collapse);
    // test = root
    // console.log(test)
​
    update(root)
        // test = root
        // console.log(root)
​
})
​
dat.key = 'Donations'
​
// console.log(dat)
​
function getData(csv) {
​
    var children = [];
    // var unique =[];
​
    csv.forEach(function(d, i) {
​
            children.push(d);
​
​
        })
        // console.log(values)
​
    //Create level and 1 and 2 rollups
    var level1 = d3.nest()
        .key(function(d) {
            return d["Recipient ID"];
        }).rollup(function(v) {
            return d3.sum(v, function(d) {
                // console.log(d['Monetary amount'])
                return d['Monetary amount']
            })
        })
        .map(children);
    // console.log(level1)
​
    var level2 = d3.nest()
        .key(function(d) {
            return d["Recipient ID"];
        })
        .key(function(d) {
            return d["Fiscal/Election date"];
        }).rollup(function(v) {
            return d3.sum(v, function(d) {
                // console.log(d["Grant Type"])
                return d['Monetary amount']
            })
        })
        .map(children);
    // console.log(level2)
​
    var nest = d3.nest()
        .key(function(d) {
            return d["Recipient ID"];
        })
        .key(function(d) {
            return d["Fiscal/Election date"];
        })
        .key(function(d) {
            // console.log(d['Monetary amount'])
            // if (d['Monetary amount'] > 1000){
                return d["Contributor Province"];
            // }
            
        })
        .rollup(function(v) {
            return d3.sum(v, function(d) {
                // console.log(d['Monetary amount'])
                return d['Monetary amount']
            })
        })
        .entries(children);
 
    nest.level1 = level1
    nest.level2 = level2
​
    test = level1
    totals = level2
        // totals.push(level2)
    return nest
​
};
​
​
d3.select(self.frameElement).style("height", "800px");
​
​
​
var tooltip = d3.select("body")
    .append("div")
    .attr("class", "tooltip")
    .attr("id", "tooltip")
    .text(' ');
​
d3.select("#tooltip").classed("hidden", true);
​
function update(source) {
​
    var linewidth;
    var scale = d3.scale.linear()
        // .domain([0, d3.max(dataset, function(d) { return d[0]; })])
        .domain([1000, 60000000]) //change to d3.max scale
        .range([1, 60])
​
    //compute the tree layout
    var nodes = tree.nodes(root).reverse(),
        links = tree.links(nodes);
    // console.log(links)
​
    //Normalize fixed depth
    nodes.forEach(function(d) {
        d.y = d.depth * 180;
    });
​
    //Update notes
    var node = svg.selectAll("g.node")
        .data(nodes, function(d) {
            // console.log(d)
            return d.id || (d.id = ++i);
        });
    // console.log(node)
​
    // Enter any new nodes at the parent's previous position.
    var nodeEnter = node.enter().append("g")
        .attr("class", "node")
        .attr("transform", function(d) {
            return "translate(" + source.y0 + "," + source.x0 + ")";
        })
        .on("click", click);
​
    nodeEnter.append("circle")
        .attr("r", 1e-6)
        .style("fill", function(d) {
            if (typeof(d._children) == 'number') {
                return "#fff";
            } else {
                return d._children ? "lightsteelblue" : "#fff";
            }
        });
​
    nodeEnter.append("text")
        .attr("x", function(d) {
            if (typeof(d._children) == 'number') {
                return 10
            } else {
                return d.children || d._children ? -10 : 10;
            }
        })
        .attr("dy", ".35em")
        .attr("text-anchor", function(d) {
            if (typeof(d._children) == 'number') {
                return "start"
            } else {
                return d.children || d._children ? "end" : "start";
            }
        })
        .text(function(d) {
            return d.key;
        })
        .style("fill-opacity", 1e-6);
​
​
​
    // Transition nodes to their new position.
    var nodeUpdate = node.transition()
        .duration(duration)
        .attr("transform", function(d) {
            return "translate(" + d.y + "," + d.x + ")";
        });
​
    nodeUpdate.select("circle")
        .attr("r", 4.5)
        // attr("r",function(d){
        //     console.log(d)
        //     console.log(scale(test[d.key]))
        //     return scale(test[d.key])
        .style("fill", function(d) {
            if (typeof(d._children) == 'number') {
                return "#fff";
            } else {
                return d._children ? "lightsteelblue" : "#fff";
            }
        });
​
    nodeUpdate.select("text")
        .style("fill-opacity", 1);
​
    // Transition exiting nodes to the parent's new position.
    var nodeExit = node.exit().transition()
        .duration(duration)
        .attr("transform", function(d) {
            return "translate(" + source.y + "," + source.x + ")";
        })
        .remove();
​
    nodeExit.select("circle")
        .attr("r", 1e-6);
​
    nodeExit.select("text")
        .style("fill-opacity", 1e-6);
​
    // Update the links…
    var link = svg.selectAll("path.link")
        .data(links, function(d) {
            // console.log(d)
            // console.log(d.target.id)
            return d.target.id;
        });
​
​
​
​
    // Enter any new links at the parent's previous position.
    link.enter().insert("path", "g")
        .attr("class", "link")
        .attr("d", function(d) {
            var o = {
                x: source.x0,
                y: source.y0
            };
            return diagonal({
                source: o,
                target: o
            });
        })
        .style("stroke-width", function(d) {
​
            // console.log(d.source.children.level1)
            if (d.source.depth == 1) {
                // console.log(d)
                // console.log(d.source.depth)
                // console.log(d.target.depth)
                // console.log(totals[d.target.parent.key][d.target.key])
                linewidth = scale(totals[d.target.parent.key][d.target.key])
                    // need to select target based on parent as some targets have the same name
            } else if (d.source.depth == 0) {
                // console.log(d.source.depth)
                // console.log(d.target.depth)
                // console.log(d.target.key)
​
                linewidth = scale(d.source.children.level1[d.target.key])
                    // console.log(scale(linewidth))
                    // linewidth = 10
​
            } else if (d.source.depth == 2) {
                // console.log(d)
                // console.log(d.source.depth)
                // console.log(d.target.values)
                // console.log(d.target.key)
​
                linewidth = scale(d.target.values)
                    // console.log(scale(linewidth))
                    // linewidth = 10
​
            }
            // else{
​
            // }
            // if(d.target.key in d.source.children.level2){
​
            //    linewidth = scale(d.source.children.level2[d.target.key])
            //    console.log(scale(linewidth))
            //    // linewidth = 10
​
            // }
            return linewidth
                // d.source.children.forEach(function(i){
                //     console.log(i)
                // })
​
            // console.log(d.source.children)
        })
        .style("stroke", function(d) {
            // console.log(d)
            if (d.source.depth == 0) {
                fill_col = color(d.target.key);
            } else if (d.source.depth == 1) {
                fill_col = color(d.source.key);
            } else if (d.source.depth == 2) {
                fill_col = color(d.source.parent.key);
            }
            // console.log(d.organization)
            return fill_col;
        })
        .on("mouseover", function(d) {
​
            if (d.source.depth == 1) {
                // console.log(d)
                // console.log(d.source.depth)
                // console.log(d.target.depth)
                console.log(totals[d.target.parent.key][d.target.key])
                linewidth = totals[d.target.parent.key][d.target.key]
                    // need to select target based on parent as some targets have the same name
            } else if (d.source.depth == 0) {
                // console.log(d.source.depth)
                // console.log(d.target.depth)
                // console.log(d.target.key)
​
                linewidth = d.source.children.level1[d.target.key]
                    // console.log(scale(linewidth))
                    // linewidth = 10
​
            } else if (d.source.depth == 2) {
                // console.log(d)
                // console.log(d.source.depth)
                // console.log(d.target.values)
                // console.log(d.target.key)
​
                linewidth = d.target.values
                    // console.log(scale(linewidth))
                    // linewidth = 10
​
            }
            // else{
​
            // }
            // if(d.target.key in d.source.children.level2){
​
            //    linewidth = scale(d.source.children.level2[d.target.key])
            //    console.log(scale(linewidth))
            //    // linewidth = 10
​
            // }
            console.log(d.target.key)
​
            //     tooltip.style("left", xPosition + "px")
            // .style("top", yPosition + "px")
            // .style("opacity", 1);  
            tooltip.style("left", (d3.event.pageX) + "px")
                .style("top", (d3.event.pageY - 28) + "px")
                .style("opacity", .9);
            // .style("visibility", "visible");
            tooltip.html(d.target.key + ': ' + "<span style='color:red'>" + '$' + addCommas(linewidth) + "</span>")
            d3.select("#tooltip").classed("hidden", false);
            return linewidth
​
​
        })
        // .on("mousemove", function() {
        //                 return tooltip.style("top", (d3.event.pageY - 10) + "px").style("left", (d3.event.pageX -10) + "px");
        //             })
        .on("mouseout", function() {
            d3.select("#tooltip").classed("hidden", true);
            // tooltip
            //  .transition()
            //    .style("opacity",0)
            //    .style('pointer-events', 'none');
            // .style("visibility", "hidden");
            // return tooltip.style("visibility", "hidden");
        })
        .style("stroke-linecap", "round")
        .style("opacity", .8);
​
    // Transition links to their new position.
    link.transition()
        .duration(duration)
        .attr("d", diagonal);
​
    // Transition exiting nodes to the parent's new position.
    link.exit().transition()
        .duration(duration)
        .attr("d", function(d) {
            var o = {
                x: source.x,
                y: source.y
            };
            return diagonal({
                source: o,
                target: o
            });
        })
        .remove();
​
    // Stash the old positions for transition.
    nodes.forEach(function(d) {
        d.x0 = d.x;
        d.y0 = d.y;
    });
}
​
function addCommas(nStr) {
    nStr += '';
    x = nStr.split('.');
    x1 = x[0];
    x2 = x.length > 1 ? '.' + x[1] : '';
    var rgx = /(\d+)(\d{3})/;
    while (rgx.test(x1)) {
        x1 = x1.replace(rgx, '$1' + ',' + '$2');
    }
    return x1 + x2;
}
// Toggle values on click.
function click(d) {
    if (d.children) {
        d._children = d.children;
        d.children = null;
    } else {
        d.children = d._children;
        d._children = null;
    }
    update(d);
}
</script>
    