Old school D3 from simpler times

All examples By author By category About

Hypercubed

Full window Github gist

Hypercubed/Project-Chi - After

<!doctype html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdn.rawgit.com/martine/webtreemap/a2fa353833eca1a4821ba4c93fb6a7d546aed02a/webtreemap.css">
<title>./dist/components/bundle.js - Source Map Explorer</title>

<style>
html, body {
  height: 100%;
}
body {
  font-family: sans-serif;
  font-size: 0.8em;
  margin: 0;
}
#map {
  top: 10px;
  bottom: 10px;
  left: 10px;
  right: 10px;
  position: absolute;
  cursor: pointer;
  -webkit-user-select: none;
}
</style>
</head>
<body>
<div id='map'></div>
</body>

<script>
var tree = {
  "jspm_packages/npm/process@0.11.2/browser.js": 1065,
  "jspm_packages/npm/process@0.11.2.js": 216,
  "jspm_packages/github/jspm/nodelibs-process@0.1.2/index.js": 250,
  "jspm_packages/github/jspm/nodelibs-process@0.1.2.js": 260,
  "jspm_packages/npm/jquery@2.1.4/dist/jquery.js": 84472,
  "jspm_packages/npm/jquery@2.1.4.js": 218,
  "jspm_packages/npm/d3@3.5.6/d3.js": 151344,
  "jspm_packages/npm/d3@3.5.6.js": 188,
  "jspm_packages/github/angular/bower-angular@1.4.5/angular.js": 155245,
  "jspm_packages/github/angular/bower-angular@1.4.5.js": 264,
  "jspm_packages/github/angular/bower-angular-route@1.4.0/angular-route.js": 4604,
  "jspm_packages/github/angular/bower-angular-route@1.4.0.js": 294,
  "jspm_packages/github/angular/bower-angular-animate@1.4.1/angular-animate.js": 23959,
  "jspm_packages/github/angular/bower-angular-animate@1.4.1.js": 304,
  "jspm_packages/github/angular/bower-angular-cookies@1.4.1/angular-cookies.js": 1616,
  "jspm_packages/github/angular/bower-angular-cookies@1.4.1.js": 304,
  "jspm_packages/github/angular-ui/bootstrap-bower@0.13.0/ui-bootstrap-tpls.js": 75370,
  "jspm_packages/github/angular-ui/bootstrap-bower@0.13.0.js": 363,
  "jspm_packages/github/chjj/marked@0.3.3/lib/marked.js": 15874,
  "jspm_packages/github/chjj/marked@0.3.3.js": 105,
  "jspm_packages/github/Hypercubed/angular-marked@0.0.16/angular-marked.js": 1175,
  "jspm_packages/github/Hypercubed/angular-marked@0.0.16.js": 293,
  "jspm_packages/github/angular-ui/ui-codemirror@0.3.0/ui-codemirror.js": 1807,
  "jspm_packages/github/angular-ui/ui-codemirror@0.3.0.js": 285,
  "jspm_packages/npm/svgsaver@0.2.2/lib/svgsaver.js": 4959,
  "jspm_packages/npm/svgsaver@0.2.2.js": 226,
  "jspm_packages/npm/angular-downloadsvg-directive@0.1.0/lib/angular-downloadsvg-directive.js": 1024,
  "jspm_packages/npm/angular-downloadsvg-directive@0.1.0.js": 331,
  "jspm_packages/npm/babyparse@0.4.3/babyparse.js": 7992,
  "jspm_packages/npm/babyparse@0.4.3.js": 223,
  "jspm_packages/npm/URIjs@1.15.1/src/punycode.js": 2799,
  "jspm_packages/npm/URIjs@1.15.1/src/IPv6.js": 1108,
  "jspm_packages/npm/URIjs@1.15.1/src/SecondLevelDomains.js": 8360,
  "jspm_packages/npm/URIjs@1.15.1/src/URI.js": 27805,
  "jspm_packages/npm/URIjs@1.15.1.js": 210,
  "jspm_packages/npm/mime-lookup@0.0.2/mime-lookup.js": 1347,
  "jspm_packages/npm/mime-lookup@0.0.2.js": 233,
  "jspm_packages/github/codemirror/codemirror@5.3.0/lib/codemirror.js": 151904,
  "jspm_packages/github/eligrey/FileSaver.js@master/FileSaver.js": 3011,
  "jspm_packages/github/eligrey/FileSaver.js@master.js": 124,
  "components/editor/editor.html": 4424,
  "jspm_packages/npm/babel-runtime@5.8.20/helpers/class-call-check.js": 354,
  "jspm_packages/npm/model-js@0.2.4/dist/model.js": 1124,
  "jspm_packages/npm/model-js@0.2.4.js": 93,
  "jspm_packages/npm/lodash@3.10.1/index.js": 51374,
  "jspm_packages/npm/lodash@3.10.1.js": 209,
  "jspm_packages/npm/chiasm@0.2.0/index.js": 3709,
  "jspm_packages/npm/chiasm@0.2.0.js": 206,
  "jspm_packages/npm/chiasm-component@0.2.1/index.js": 655,
  "jspm_packages/npm/chiasm-component@0.2.1.js": 236,
  "jspm_packages/npm/chiasm-layout@0.2.2/src/computeLayout.js": 1194,
  "jspm_packages/npm/chiasm-layout@0.2.2/src/layout.js": 1974,
  "jspm_packages/npm/chiasm-layout@0.2.2/index.js": 368,
  "jspm_packages/npm/chiasm-layout@0.2.2.js": 227,
  "jspm_packages/npm/chiasm-links@0.2.1/index.js": 938,
  "jspm_packages/npm/chiasm-links@0.2.1.js": 285,
  "jspm_packages/github/curran/model@0.2.4/dist/model.js": 1062,
  "jspm_packages/github/curran/model@0.2.4.js": 107,
  "jspm_packages/npm/d3@3.5.5/d3.js": 151324,
  "jspm_packages/npm/d3@3.5.5.js": 188,
  "jspm_packages/npm/backbone-events-standalone@0.2.7/backbone-events-standalone.js": 3339,
  "jspm_packages/npm/backbone-events-standalone@0.2.7/index.js": 314,
  "jspm_packages/npm/backbone-events-standalone@0.2.7.js": 266,
  "jspm_packages/npm/biojs-events@0.0.4/index.js": 435,
  "jspm_packages/npm/biojs-events@0.0.4.js": 224,
  "jspm_packages/npm/expression-bar@0.1.4/lib/expressionbar.js": 3619,
  "jspm_packages/npm/expression-bar@0.1.4/index.js": 250,
  "jspm_packages/npm/expression-bar@0.1.4.js": 230,
  "components/examples/bars/bars-chart.js": 1500,
  "components/examples/trains/trains-chart.js": 2669,
  "components/about/about.html": 2197,
  "components/error/error.html": 272,
  "components/index/index.html": 866,
  "common/partials/footer.html": 529,
  "common/partials/intro.html": 1426,
  "jspm_packages/github/chieffancypants/angular-loading-bar@0.8.0/build/loading-bar.js": 3667,
  "jspm_packages/github/chieffancypants/angular-loading-bar@0.8.0.js": 437,
  "common/services/datapackage/mime.js": 661,
  "common/services/datapackage/dataservice.js": 2219,
  "common/services/datapackage/index.js": 915,
  "components/editor/svg-download-dropdown.js": 1080,
  "components/editor/editor.js": 3324,
  "components/examples/index.js": 546,
  "components/examples/chiasm/barChart.js": 1894,
  "components/examples/chiasm/chiasm.js": 870,
  "components/examples/biojs/biojs.js": 530,
  "components/examples/bars/bars.js": 621,
  "components/examples/trains/trains.js": 481,
  "components/examples/polymer/d3-bar-chart.js": 1574,
  "components/examples/polymer/bar-chart-tag.js": 713,
  "components/examples/polymer/barChart-controller.js": 502,
  "components/examples/routes.js": 1741,
  "components/index/index.js": 717,
  "components/routes.js": 1205,
  "components/app.js": 1619,
  "components/boot.js": 130102
};
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/martine/webtreemap/a2fa353833eca1a4821ba4c93fb6a7d546aed02a/webtreemap.js"></script>

<script>

function newNode(name) {
  return {
    name: name,
    data: {
      '$area': 0
    },
    children: []
  };
}

var treeData = newNode('/');

function addNode(path, size) {
  var parts = path.split('/');
  var node = treeData;
  node.data['$area'] += size;

parts.forEach(function(part) {
    var child = _.find(node.children, function(child) { return child.name == part; });
    if (!child) {
      var child = newNode(part);
      node.children.push(child);
    }

node = child;
    node.data['$area'] += size;
  });
}

function addSizeToTitle(node, total) {
  var size = node.data['$area'],
      pct = 100.0 * size / total;
  node.name += ' • ' + size.toLocaleString() + ' • ' + pct.toFixed(2) + '%';
  node.children.forEach(function(x) { addSizeToTitle(x, total) });
}

for (var source in tree) {
  addNode(source, tree[source]);
}
addSizeToTitle(treeData, treeData.data['$area']);

var map = document.getElementById('map');
appendTreemap(map, treeData);

window.addEventListener('resize', function() {
  appendTreemap(map, treeData);
});

</script>

Updated missing url https://cdn.rawgit.com/martine/webtreemap/a2fa353833eca1a4821ba4c93fb6a7d546aed02a/webtreemap.js to https://cdn.jsdelivr.net/gh/martine/webtreemap/a2fa353833eca1a4821ba4c93fb6a7d546aed02a/webtreemap.js

https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js

https://cdn.rawgit.com/martine/webtreemap/a2fa353833eca1a4821ba4c93fb6a7d546aed02a/webtreemap.js