All examples By author By category About

Mbrownshoes

Full window Github gist

Collapsible tree with scaled lines

<!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>

<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)

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

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

https://code.jquery.com/jquery-1.11.3.min.js

https://code.jquery.com/jquery-migrate-1.2.1.min.js

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js