Skip to content

Instantly share code, notes, and snippets.

@EoinMGB

EoinMGB/.block

Last active January 8, 2017 10:56
Show Gist options

  • Select an option

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

Select an option

Learn more about clone URLs
Save EoinMGB/0e814f40414ac79162a8c31028af39bf to your computer and use it in GitHub Desktop.
Download ZIP
Icicle & Force Layout
Raw
.block
license: mit
Raw
icicles.json
{
"home":{
"card":{
"card_A":{
"card_AA":{
"card_AAA":5
, "card_AAB":2
, "end":10
}
, "card_AB":5
, "end":5
}
, "card_B":24
, "card_C":14
, "end":10
}
, "mortgage":{
"mortgage_A":15
, "mortgage_B":12
, "end":5
}
, "carloan":{
"carloan_A":25
, "end":4
}
, "end":25
}
}
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 = 600,
height = 500;
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.indexOf('_')>=0){
return color(d.key.substr(0, d.key.indexOf('_')))
}
else{
return color(d.key)
}
}
})
.on("click", clicked)
//.on("click", getAncestors);
//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/>"+ 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(x(d.x) + x(d.dx)/2 + 30) + "px"
//})
//.style("top", function(){
//return(y(d.y) + y(d.dy)/4) + "px"
//})
.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]);
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>
<svg stroke = "black" id ="nodes" width="300" height="500"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var link;
var node;
var svg = d3.select("#nodes"),
width2 = +svg.attr("width"),
height2 = +svg.attr("height");
var radius = 7
var color = d3.scaleOrdinal(d3.schemeCategory20);
var simulation = d3.forceSimulation()
.force("link", d3.forceLink().id(function(d) { return d.id; }))
.force("charge", d3.forceManyBody())
.force("center", d3.forceCenter(width2 / 2, height2 / 2));
d3.json("nodes.json", function(error, graph) {
if (error) throw error;
link = svg.append("g")
.attr("class", "links")
.selectAll("line")
.data(graph.links)
.enter().append("line")
.attr("id", function(d){return d.source})
.attr("stroke-width", function(d) { return Math.sqrt(d.value); });
node = svg.append("g")
.attr("class", "nodes")
.selectAll("circle")
.data(graph.nodes)
.enter().append("circle")
.attr("id", function(d){return d.id})
.attr("r", radius)
//.attr("fill", function(d) { return color(d.group); })
.attr("fill", function(d) {
if(d.id.indexOf('_')>=0){
return color(d.id.substr(0, d.id.indexOf('_')))
}
else{
return color(d.id)
}
})
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended))
.on("click", node_clicked);
node.append("title")
.text(function(d) { return d.id; });
simulation
.nodes(graph.nodes)
.on("tick", ticked);
simulation.force("link")
.links(graph.links);
function ticked() {
node.attr("cx", function(d) { return d.x = Math.max(radius, Math.min(width2 - radius, d.x)); })
.attr("cy", function(d) { return d.y = Math.max(radius, Math.min(height2 - radius, d.y)); });
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
.on("mousemove", function(d){
node.attr("stroke", "black")
})
.on("mouseout", function(){
node.attr("stroke", "white")
})
});
function dragstarted(d) {
if (!d3.event.active) simulation.alphaTarget(0.3).restart();
d.fx = d.x;
d.fy = d.y;
}
function dragged(d) {
d.fx = d3.event.x;
d.fy = d3.event.y;
}
function dragended(d) {
if (!d3.event.active) simulation.alphaTarget(0);
d.fx = null;
d.fy = null;
}
function hide_nodes(){
// Fade all the segments.
node.style("opacity", 0.1);
link.style("opacity", 0.1);
// Then highlight only those that are an ancestor of the current segment.
node.filter(function(d) {
return (path.indexOf(d.id) >= 0);
})
.style("opacity", 1);
node.filter(function(d) {
return (path.indexOf(d.id) >= 0);
})
.style("opacity", 1);
link.filter(function(d) {
return (path.indexOf(d.id) >= 0);
})
.style("opacity", 1);
link.filter(function(d) {
return (path.indexOf(d.source.id) >= 0);
})
.style("opacity", 1);
}
function node_clicked(d) {
clicked(d3.select('#rect_'+d.id).data()[0]);
}
</script>
Raw
nodes.json
{
"nodes":[
{"id": "home", "group": 0}
, {"id": "card", "group": 1}
, {"id": "mortgage", "group": 2}
, {"id": "carloan", "group": 3}
, {"id": "card_A", "group": 1}
, {"id": "card_AA", "group": 1}
, {"id": "card_AB", "group": 1}
, {"id": "card_AAA", "group": 1}
, {"id": "card_AAB", "group": 1}
, {"id": "card_B", "group": 1}
, {"id": "card_C", "group": 1}
, {"id": "mortgage_A", "group": 2}
, {"id": "mortgage_B", "group": 2}
, {"id": "carloan_A", "group": 3}
]
, "links":[
{"source": "card", "target": "home", "value": 3},
{"source": "mortgage", "target": "home", "value": 3},
{"source": "carloan", "target": "home", "value": 3},
{"source": "card_A", "target": "card", "value": 3},
{"source": "card_AA", "target": "card_A", "value": 3},
{"source": "card_AAA", "target": "card_AA", "value": 3},
{"source": "card_AAB", "target": "card_AA", "value": 3},
{"source": "card_AB", "target": "card_A", "value": 3},
{"source": "card_B", "target": "card", "value": 3},
{"source": "card_C", "target": "card", "value": 3},
{"source": "mortgage_A", "target": "mortgage", "value": 3},
{"source": "mortgage_B", "target": "mortgage", "value": 3},
{"source": "carloan_A", "target": "carloan", "value": 3}
]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment