Skip to content

Instantly share code, notes, and snippets.

@EoinMGB

EoinMGB/.block

Created August 29, 2017 07:23
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save EoinMGB/01594b61f45e203c567a7d6c4c760e72 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save EoinMGB/01594b61f45e203c567a7d6c4c760e72 to your computer and use it in GitHub Desktop.
Download ZIP
Linked Force Layout & Icicle Diagram
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
rect {
stroke: #fff;
}
.links line {
stroke: #999;
stroke-opacity: 0.6;
}
.nodes circle {
stroke: #fff;
stroke-width: 1.5px;
cursor: pointer
}
body{
font-family: Sans-Serif
}
</style>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
var path = ["home"];
var width = ($(document).width()-50)/2;
height = ($( document ).height()-50);
var x = d3.scale.linear()
.range([0, width]);
var y = d3.scale.linear()
.range([0, height]);
var color = d3.scale.category20c();
var colors = {"home":"red", "card":"green", "mortgage":"orange", "car":"purple"};
var partition = d3.layout.partition()
.children(function(d) { return isNaN(d.value) ? d3.entries(d.value) : null; })
.value(function(d) { return d.value; });
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var rect = svg.selectAll("rect");
d3.json("icicles.json", function(error, root) {
if (error) throw error;
rect = rect
.data(partition(d3.entries(root)[0]))
.enter().append("rect")
.attr("id", function(d){return "rect_" + d.key})
.attr("class", function(d){return d.key})
.attr("x", function(d) { return x(d.x); })
.attr("y", function(d) { return y(d.y); })
.attr("width", function(d) { return x(d.dx); })
.attr("height", function(d) { return y(d.dy); })
.attr("fill", function(d) { if(d.key == "end"){
return "white"
}
else{
if(d.key == 'all'){
return 'rgb(255, 148, 42)'
}
else{
return 'rgb(174, 199, 232)'
}
}
})
.on("click", clicked)
current_location = "all"
//TOOL TIP____________________________________________________________________ -->
var tooltip=d3.select("body").append("div")
.style("position","absolute")
.style("padding","0px")
.style("opacity","0")
.style("background", "white")
.style("border", "2px;")
.style("text-align","center")
.style("vertical-align","middle")
.style("padding","10px")
.attr("id", "tooltip");
rect
.on("mousemove", function(d){
tooltip
.html( function(){
if(d.parent){
return "<strong>" + d.key + "</strong>"+"<br/>" + d.value + "<br/>" + Math.round( d.value/d.parent.value*100 * 10 ) / 10 + "% of previous page"}
else{
return "<strong>" + d.key + "</strong>"
}
})
.style("opacity", 1)
.style("left", function(){
return(d3.event.pageX+30)+"px"
})
.style("top", (d3.event.pageY-20)+"px")
})
.on("mouseout", function(){
tooltip
.style("opacity", 0)
.style("left", "-100px")
.style("top", "-100px")
})
});
var num = 0;
function allDescendants (node) {
path.unshift(node.key);
if(node.children){
for (var i = 0; i < node.children.length; i++) {
var child = node.children[i];
path.unshift(child.key);
allDescendants(child);
}
}
}
function clicked(d) {
if(d.key != "end"){
x.domain([d.x, d.x + d.dx]);
y.domain([d.y, 1]).range([d.y ? 20 : 0, height]);
console.log("#node_" + current_location)
console.log("#rect_" + current_location)
d3.select("#rect_" + current_location).attr("fill", "rgb(174, 199, 232)");
d3.select("#node_" + current_location).attr("fill", "rgb(174, 199, 232)");
d3.select("#node_" + current_location).attr("r", 2);
current_location = d.key
d3.select("#rect_" + current_location).attr("fill", "rgb(255, 148, 42)"); //turn orange
d3.select("#node_" + current_location).attr("fill", "rgb(255, 148, 42)"); //turn orange
d3.select("#node_" + current_location).attr("r", 5);
rect.transition()
.duration(750)
.attr("x", function(d) { return x(d.x); })
.attr("y", function(d) { return y(d.y); })
.attr("width", function(d) { return x(d.x + d.dx) - x(d.x); })
.attr("height", function(d) { return y(d.y + d.dy) - y(d.y); });
var current = d;
path = [];
allDescendants(current);
//console.log(path);
hide_nodes();
}
}
</script>
<script>
var width = ($(document).width()-100)/2,
height = ($(document).height()-50),
root;
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.attr("stroke", "#999")
.attr("stroke-opacity", 0.6);
var force = d3.layout.force()
.linkDistance(5)
.charge(-5)
.gravity(.10)
.size([width, height])
.on("tick", tick)
;
var link = svg.selectAll(".link"),
node = svg.selectAll(".node");
d3.json("nodes.json", function(error, json) {
if (error) throw error;
root = json;
update();
});
function update() {
var nodes = flatten(root),
links = d3.layout.tree().links(nodes);
// Restart the force layout.
force
.nodes(nodes)
.links(links)
.start()
;
// Update links.
link = link.data(links, function(d) { return d.target.id; });
link.exit().remove();
link.enter().insert("line", ".node")
.attr("class", "link");
// Update nodes.
node = node.data(nodes, function(d) { return d.id; });
node.exit().remove();
var nodeEnter = node.enter().append("g")
.attr("class", "node")
//.on("click", click)
.call(force.drag);
nodeEnter.append("circle")
.attr("id", function(d){return 'node_' + d.name})
.attr("r", function(d){
if(d.name == "all"){
return 5
}
else{
return 2
}
})
.on("click", node_clicked);;
node.select("circle")
.attr("fill", function(d) {
if(d.name == 'all'){
return 'rgb(255, 148, 42)'
}
else{
return 'rgb(174, 199, 232)'
}
})
}
function tick() {
link.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; });
node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
}
function color(d) {
return d._children ? "#3182bd" // collapsed package
: d.children ? "#c6dbef" // expanded package
: "#fd8d3c"; // leaf node
}
// Toggle children on click.
function click(d) {
if (d3.event.defaultPrevented) return; // ignore drag
if (d.children) {
d._children = d.children;
d.children = null;
} else {
d.children = d._children;
d._children = null;
}
//update();
}
// Returns a list of all nodes under the root.
function flatten(root) {
var nodes = [], i = 0;
function recurse(node) {
if (node.children) node.children.forEach(recurse);
if (!node.id) node.id = ++i;
nodes.push(node);
}
recurse(root);
return nodes;
}
function hide_nodes(){
// Fade all the segments.
node.style("opacity", 0.2);
link.style("opacity", 0.2);
// Then highlight only those that are an ancestor of the current segment.
node.filter(function(d) {
return (path.indexOf(d.name) >= 0);
})
.style("opacity", 1);
node.filter(function(d) {
return (path.indexOf(d.name) >= 0);
})
.style("opacity", 1);
link.filter(function(d) {
return (path.indexOf(d.name) >= 0);
})
.style("opacity", 1);
link.filter(function(d) {
return (path.indexOf(d.source.name) >= 0);
})
.style("opacity", 1);
}
function node_clicked(d) {
clicked(d3.select("#rect_"+d.name).data()[0]);
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment