Skip to content

Instantly share code, notes, and snippets.

@arzon94

arzon94/.block

Last active May 23, 2019 17:40
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save arzon94/d2ff4672ed518dd8e6f515eae0aa0afc to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save arzon94/d2ff4672ed518dd8e6f515eae0aa0afc to your computer and use it in GitHub Desktop.
Download ZIP
impact analysis
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Impact Analysis</title>
<style>
.node {
cursor: pointer;
}
.node circle {
fill: #fff;
stroke: steelblue;
stroke-width: 3px;
}
.node text {
font: 12px sans-serif;
}
.link {
fill: none;
stroke: #ccc;
stroke-width: 2px;
}
div .tooltip {
position: absolute;
text-align: center;
width: 60px;
height: 28px;
padding: 2px;
font: 12px sans-serif;
background: lightsteelblue;
border: 0px;
border-radius: 8px;
pointer-events: none;
}
</style>
</head>
<body>
<!-- load the d3.js library -->
<script src="https://d3js.org/d3.v3.min.js"></script>
<!-- <script src="https://d3js.org/d3.v4.min.js"></script> -->
<script src="./randomdata.js"></script>
<script src="./index.js"></script>
</body>
</html>
Raw
index.js
let icons = ["code", "database", "excel", "table", "csv", "project-diagram", "file-code", "folder"];
let hoveredStyle = { "stroke": "lightgray" };
let defaultStyle = { "stroke": "steelblue" };
// ************** Generate the tree diagram *****************
let margin = {top: 20, right: 120, bottom: 20, left: 120},
width = 960 - margin.right - margin.left,
height = 500 - margin.top - margin.bottom;
let i = 0,
duration = 750,
root;
let div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
let tree = d3.layout.tree()
.size([height, width]);
let diagonal = d3.svg.diagonal()
.projection(function(d) { return [d.y, d.x]; });
let 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 + ")");
// root = treeData[0];
root = randomData[0];
root.x0 = height / 2;
root.y0 = 0;
update(root);
d3.select(self.frameElement).style("height", "500px");
function update(source) {
// Compute the new tree layout.
let nodes = tree.nodes(root).reverse(),
links = tree.links(nodes);
// Normalize for fixed-depth.
nodes.forEach(function(d) { d.y = d.depth * 180; });
// Update the nodes…
let node = svg.selectAll("g.node")
.data(nodes, function(d) { return d.id || (d.id = ++i); });
// Enter any new nodes at the parent's previous position.
// let nodeEnter = node.enter().append("g")
// .attr("class", "node")
// .attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })
// .on("click", click);
let 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) { return d._children ? "lightsteelblue" : "#fff"; })
.on("mouseover", function(d){
console.log(d)
d3.select(this).style(hoveredStyle);
div.transition()
.duration(200)
.style("opacity", .9);
div.html(d.size + "<br/>" + d.modDate)
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on("mouseout", function(){
d3.select(this).style(defaultStyle);
});
nodeEnter.append("text")
.attr("x", function(d) { return d.children || d._children ? -13 : 13; })
.attr("dy", ".35em")
.attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })
.text(function(d) { return d.name; })
.style("fill-opacity", 1e-6);
// Transition nodes to their new position.
let nodeUpdate = node.transition()
.duration(duration)
.attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; });
nodeUpdate.select("circle")
.attr("r", 10)
.style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });
nodeUpdate.select("text")
.style("fill-opacity", 1);
// Transition exiting nodes to the parent's new position.
let nodeExit = node.exit().transition()
.duration(duration)
.attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; })
.remove();
console.log('hi');
nodeExit.select("circle")
.attr("r", 1e-6);
nodeExit.select("text")
.style("fill-opacity", 1e-6);
// Update the links…
let link = svg.selectAll("path.link")
.data(links, function(d) { 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) {
let o = {x: source.x0, y: source.y0};
return diagonal({source: o, target: o});
});
// 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) {
let 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;
});
}
// Toggle children 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);
}
Raw
randomdata.js
let randomData = [{
"name": "5ce45bfb1692c3797c29f16d",
"level": 0,
"parent": null,
"fileType": ".bdat",
"modDate": "Fri Feb 19 2010 07:45:49 GMT+0000 (UTC)",
"size": 26889,
"children": [{
"name": "5ce45bfbac74a5bbcfcbad07",
"level": 1,
"fileType": ".sas",
"modDate": "Mon May 16 2016 14:43:37 GMT+0000 (UTC)",
"size": 33482,
"children": [{
"name": "5ce45bfb49b0c3f5907e3eb0",
"level": 3,
"fileType": ".bdat",
"modDate": "Sun Nov 01 2015 15:22:01 GMT+0000 (UTC)",
"size": 20223,
"children": [{
"name": "5ce45bfb737aa1f6e351c482",
"fileType": ".job",
"level": 4,
"modDate": "Mon Jun 21 2010 12:40:19 GMT+0000 (UTC)",
"size": 55070
},
{
"name": "5ce45bfb62efe32c8193b1d7",
"fileType": ".job",
"level": 4,
"modDate": "Mon Jul 29 2013 14:50:03 GMT+0000 (UTC)",
"size": 17993
}
]
},
{
"name": "5ce45bfb10e7d1ffbc563b5c",
"level": 3,
"fileType": ".job",
"modDate": "Tue Aug 06 2013 15:30:18 GMT+0000 (UTC)",
"size": 32297,
"children": [{
"name": "5ce45bfb9e9f6f8788629436",
"fileType": ".mnf",
"level": 4,
"modDate": "Fri Sep 28 2018 07:23:38 GMT+0000 (UTC)",
"size": 2192
}]
},
{
"name": "5ce45bfb55dc45ad80bd987b",
"level": 3,
"fileType": ".bdat",
"modDate": "Fri Sep 12 2014 22:33:09 GMT+0000 (UTC)",
"size": 4969,
"children": [{
"name": "5ce45bfbe109736cc24dfc83",
"fileType": ".job",
"level": 4,
"modDate": "Thu May 14 2015 04:14:34 GMT+0000 (UTC)",
"size": 24397
}]
}
]
},
{
"name": "5ce45bfb493752616a7d9822",
"level": 1,
"fileType": ".xls",
"modDate": "Wed Apr 21 2010 12:26:38 GMT+0000 (UTC)",
"size": 4984,
"children": [{
"name": "5ce45bfb85e888b554435cf0",
"level": 3,
"fileType": ".sas",
"modDate": "Wed Feb 08 2017 14:34:34 GMT+0000 (UTC)",
"size": 54016,
"children": [{
"name": "5ce45bfb483ed443d8388664",
"fileType": ".mnf",
"level": 4,
"modDate": "Tue Feb 02 2016 07:39:10 GMT+0000 (UTC)",
"size": 32657
},
{
"name": "5ce45bfbdfb4b9f1dcab3265",
"fileType": ".xls",
"level": 4,
"modDate": "Fri Jan 17 2014 02:59:28 GMT+0000 (UTC)",
"size": 2406
}
]
},
{
"name": "5ce45bfb556697b9e7833858",
"level": 3,
"fileType": ".xls",
"modDate": "Fri Dec 01 2017 07:06:54 GMT+0000 (UTC)",
"size": 51586,
"children": [{
"name": "5ce45bfbef64e56fb719bf58",
"fileType": ".bdat",
"level": 4,
"modDate": "Sun Jul 28 2013 10:21:09 GMT+0000 (UTC)",
"size": 52261
},
{
"name": "5ce45bfb70fd3bef9ac5a3ba",
"fileType": ".bdat",
"level": 4,
"modDate": "Mon Jan 02 2012 05:05:40 GMT+0000 (UTC)",
"size": 11944
},
{
"name": "5ce45bfbdbde6fb8bec00254",
"fileType": ".xls",
"level": 4,
"modDate": "Mon Oct 17 2016 02:24:08 GMT+0000 (UTC)",
"size": 26272
}
]
},
{
"name": "5ce45bfb9386955cb58e250c",
"level": 3,
"fileType": ".sas",
"modDate": "Mon Jul 22 2013 13:23:11 GMT+0000 (UTC)",
"size": 450,
"children": [{
"name": "5ce45bfbeacd7416a0fe61a2",
"fileType": ".bdat",
"level": 4,
"modDate": "Fri Nov 25 2011 02:13:48 GMT+0000 (UTC)",
"size": 30383
}]
}
]
},
{
"name": "5ce45bfb07ba07eb73217f6c",
"level": 1,
"fileType": ".job",
"modDate": "Wed Mar 06 2019 11:22:28 GMT+0000 (UTC)",
"size": 36478,
"children": [{
"name": "5ce45bfb7b89952f53ba35b4",
"level": 3,
"fileType": ".job",
"modDate": "Wed Mar 03 2010 02:48:39 GMT+0000 (UTC)",
"size": 3375,
"children": [{
"name": "5ce45bfb1ff3df2340910231",
"fileType": ".mnf",
"level": 4,
"modDate": "Sun Jul 03 2011 22:17:27 GMT+0000 (UTC)",
"size": 58367
},
{
"name": "5ce45bfbe6deb89af02c520c",
"fileType": ".mnf",
"level": 4,
"modDate": "Sun Sep 04 2016 00:20:44 GMT+0000 (UTC)",
"size": 29661
}
]
},
{
"name": "5ce45bfb8b496ca5c0ecf021",
"level": 3,
"fileType": ".xls",
"modDate": "Tue Apr 07 2015 12:25:37 GMT+0000 (UTC)",
"size": 4218,
"children": [{
"name": "5ce45bfb1e8d2ac5c9bbe6a1",
"fileType": ".xls",
"level": 4,
"modDate": "Fri Jul 17 2015 09:57:10 GMT+0000 (UTC)",
"size": 27727
},
{
"name": "5ce45bfbd91c5a093c2063d1",
"fileType": ".mnf",
"level": 4,
"modDate": "Mon Aug 16 2010 22:42:13 GMT+0000 (UTC)",
"size": 17486
},
{
"name": "5ce45bfbf693393d0a75344a",
"fileType": ".job",
"level": 4,
"modDate": "Sun Jun 27 2010 05:45:24 GMT+0000 (UTC)",
"size": 27804
}
]
},
{
"name": "5ce45bfb2c4644ab34e5ba4f",
"level": 3,
"fileType": ".job",
"modDate": "Wed Nov 30 2016 19:42:24 GMT+0000 (UTC)",
"size": 39391,
"children": [{
"name": "5ce45bfbccb20a512991fe98",
"fileType": ".sas",
"level": 4,
"modDate": "Mon Jul 01 2019 10:56:23 GMT+0000 (UTC)",
"size": 4257
},
{
"name": "5ce45bfb092d98dbd72938d6",
"fileType": ".mnf",
"level": 4,
"modDate": "Sat Sep 01 2012 16:46:03 GMT+0000 (UTC)",
"size": 53954
},
{
"name": "5ce45bfb91cba031eaa75314",
"fileType": ".bdat",
"level": 4,
"modDate": "Thu Nov 10 2016 19:47:39 GMT+0000 (UTC)",
"size": 60111
}
]
}
]
}
]
}]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment