Skip to content

Instantly share code, notes, and snippets.

@EE2dev

EE2dev/.block

Last active May 28, 2019 22:54
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save EE2dev/0a73d50dfb7e9eca36b180fe13da985d to your computer and use it in GitHub Desktop.
Save EE2dev/0a73d50dfb7e9eca36b180fe13da985d to your computer and use it in GitHub Desktop.
Download ZIP
hierarchy-explorer demo
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<head>
<script src="https://d3js.org/d3.v5.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/EE2dev/hierarchy-explorer/dist/v07/hierarchyExplorer.css">
<script src="https://cdn.jsdelivr.net/gh/EE2dev/hierarchy-explorer/dist/v07/hierarchyExplorer.min.js"></script>
<style>
div.text{
font-size: 48px;
color: grey;
padding-left: 50px;
}
</style>
</head>
<body>
<!-- paste data in aside tag -->
<aside id="data">
</aside>
<div class="text">See one-liners for each transition</div>
<script>
const dataSpec = {
source: "https://cdn.jsdelivr.net/gh/EE2dev/hierarchy-explorer/test/data/flare.json",
key: "name",
};
const myChart = hierarchyExplorer.chart(dataSpec)
.debugOn(true)
.propagateValue("size")
;
showChart();
let myFunctions = [];
myFunctions.push({function: () => myChart.linkHeight(50), text: 'myChart.linkHeight(100)'});
myFunctions.push({function: () => myChart.linkHeight(20), text: 'myChart.linkHeight(20)'});
myFunctions.push({function: () => myChart.linkStrength(8), text: 'myChart.linkStrength(8)'});
myFunctions.push({function: () => myChart.linkStrength("size"), text: 'myChart.linkStrength("size")'});
myFunctions.push({function: () => myChart.alignLeaves(true), text: 'myChart.alignLeaves(true)'});
myFunctions.push({function: () => myChart.alignLeaves(false), text: 'myChart.alignLeaves(false)'});
myFunctions.push({function: () => myChart.linkWidth(50), text: 'myChart.linkWidth(50)'});
myFunctions.push({function: () => myChart.linkWidth("size", {scale: d3.scaleLog(), range: [20, 100]}), text: 'myChart.linkWidth("size", {scale: d3.scaleLog(), range: [20, 100]})'});
let counter = 0;
let sel = d3.select(".text");
window.setInterval(function(){
myFunctions[counter % myFunctions.length].function();
sel.text(myFunctions[counter % myFunctions.length].text);
counter = counter + 1;
}, 3000);
function showChart(_file, preprocessed) {
const selection = d3.select("body")
.append("div")
.attr("class", "chart");
if (preprocessed) {
selection.datum(_file);
}
selection.call(myChart);
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment