Skip to content

Instantly share code, notes, and snippets.

@eesur
Created May 16, 2018 11:52
Show Gist options
  • Save eesur/4122153d0dad01bd3675b74c61edbc58 to your computer and use it in GitHub Desktop.
Save eesur/4122153d0dad01bd3675b74c61edbc58 to your computer and use it in GitHub Desktop.
d3 | partition diagram
license: mit
height: 500
border: no
*{box-sizing:border-box}body{font-family:'Space Mono',monospace;font-size:11px;color:#454545}
!function(g){function n(t){if(I[t])return I[t].exports;var C=I[t]={i:t,l:!1,exports:{}};return g[t].call(C.exports,C,C.exports,n),C.l=!0,C.exports}var I={};n.m=g,n.c=I,n.i=function(g){return g},n.d=function(g,I,t){n.o(g,I)||Object.defineProperty(g,I,{configurable:!1,enumerable:!0,get:t})},n.n=function(g){var I=g&&g.__esModule?function(){return g.default}:function(){return g};return n.d(I,"a",I),I},n.o=function(g,n){return Object.prototype.hasOwnProperty.call(g,n)},n.p="",n(n.s=1)}([function(module,exports,__webpack_require__){"use strict";eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nvar data = {\n name: 'Training',\n children: [{\n name: 'Upper',\n children: [{\n name: 'Back',\n children: [{\n name: 'Lats',\n value: 4\n }, {\n name: 'Lower',\n value: 3\n }]\n }, {\n name: 'Chest',\n value: 3\n }, {\n name: 'Arms',\n children: [{\n name: 'Bi',\n value: 2\n }, {\n name: 'Tri',\n value: 3\n }]\n }]\n }, {\n name: 'Rest',\n value: 5\n }, {\n name: 'Lower',\n children: [{\n name: 'Squats',\n value: 6\n }, {\n name: 'Lunges',\n value: 4\n }]\n }]\n};\n\nexports.default = data;//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiMC5qcyIsInNvdXJjZXMiOlsid2VicGFjazovLy9zYW1wbGVEYXRhLmpzPzM5N2YiXSwic291cmNlc0NvbnRlbnQiOlsiY29uc3QgZGF0YSA9IHtcbiAgbmFtZTogJ1RyYWluaW5nJyxcbiAgY2hpbGRyZW46IFtcbiAgICB7XG4gICAgICBuYW1lOiAnVXBwZXInLFxuICAgICAgY2hpbGRyZW46IFtcbiAgICAgICAge1xuICAgICAgICAgIG5hbWU6ICdCYWNrJyxcbiAgICAgICAgICBjaGlsZHJlbjogW1xuICAgICAgICAgICAge1xuICAgICAgICAgICAgICBuYW1lOiAnTGF0cycsXG4gICAgICAgICAgICAgIHZhbHVlOiA0XG4gICAgICAgICAgICB9LFxuICAgICAgICAgICAge1xuICAgICAgICAgICAgICBuYW1lOiAnTG93ZXInLFxuICAgICAgICAgICAgICB2YWx1ZTogM1xuICAgICAgICAgICAgfVxuICAgICAgICAgIF1cbiAgICAgICAgfSxcbiAgICAgICAge1xuICAgICAgICAgIG5hbWU6ICdDaGVzdCcsXG4gICAgICAgICAgdmFsdWU6IDNcbiAgICAgICAgfSxcbiAgICAgICAge1xuICAgICAgICAgIG5hbWU6ICdBcm1zJyxcbiAgICAgICAgICBjaGlsZHJlbjogW1xuICAgICAgICAgICAge1xuICAgICAgICAgICAgICBuYW1lOiAnQmknLFxuICAgICAgICAgICAgICB2YWx1ZTogMlxuICAgICAgICAgICAgfSxcbiAgICAgICAgICAgIHtcbiAgICAgICAgICAgICAgbmFtZTogJ1RyaScsXG4gICAgICAgICAgICAgIHZhbHVlOiAzXG4gICAgICAgICAgICB9XG4gICAgICAgICAgXVxuICAgICAgICB9XG4gICAgICBdXG4gICAgfSxcbiAgICB7XG4gICAgICBuYW1lOiAnUmVzdCcsXG4gICAgICB2YWx1ZTogNVxuICAgIH0sXG4gICAge1xuICAgICAgbmFtZTogJ0xvd2VyJyxcbiAgICAgIGNoaWxkcmVuOiBbXG4gICAgICAgIHtcbiAgICAgICAgICBuYW1lOiAnU3F1YXRzJyxcbiAgICAgICAgICB2YWx1ZTogNlxuICAgICAgICB9LFxuICAgICAgICB7XG4gICAgICAgICAgbmFtZTogJ0x1bmdlcycsXG4gICAgICAgICAgdmFsdWU6IDRcbiAgICAgICAgfVxuICAgICAgXVxuICAgIH1cbiAgXVxufVxuXG5leHBvcnQgZGVmYXVsdCBkYXRhXG5cblxuXG4vLyBXRUJQQUNLIEZPT1RFUiAvL1xuLy8gc2FtcGxlRGF0YS5qcyJdLCJtYXBwaW5ncyI6Ijs7Ozs7QUFBQTtBQUNBO0FBQ0E7QUFFQTtBQUNBO0FBRUE7QUFDQTtBQUVBO0FBQ0E7QUFGQTtBQUtBO0FBQ0E7QUFGQTtBQVBBO0FBY0E7QUFDQTtBQUZBO0FBS0E7QUFDQTtBQUVBO0FBQ0E7QUFGQTtBQUtBO0FBQ0E7QUFGQTtBQVBBO0FBcEJBO0FBb0NBO0FBQ0E7QUFGQTtBQUtBO0FBQ0E7QUFFQTtBQUNBO0FBRkE7QUFLQTtBQUNBO0FBRkE7QUFQQTtBQTFDQTtBQUNBO0FBeURBIiwic291cmNlUm9vdCI6IiJ9\n//# sourceURL=webpack-internal:///0\n")},function(module,exports,__webpack_require__){"use strict";eval("\n\nvar _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };\n\nvar _sampleData = __webpack_require__(0);\n\nvar _sampleData2 = _interopRequireDefault(_sampleData);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nvar d3 = window.d3;\n\nfunction parition(bind, data, config) {\n config = _extends({\n margin: { top: 150, right: 50, bottom: 150, left: 50 },\n width: 960,\n height: 500\n }, config);\n var _config = config,\n margin = _config.margin,\n width = _config.width,\n height = _config.height;\n\n var w = width - margin.left - margin.right;\n var h = height - margin.top - margin.bottom;\n\n var partitionLayout = d3.partition().size([w, h]).padding(5);\n\n var rootNode = d3.hierarchy(data);\n rootNode.sum(function (d) {\n return d.value;\n });\n\n partitionLayout(rootNode);\n\n var svg = d3.select(bind).append('svg').attr('width', width).attr('height', height).append('g').attr('transform', function (d) {\n return 'translate(' + margin.left + ', ' + margin.top + ')';\n });\n\n var g = svg.selectAll('.bar').data(rootNode.descendants()).enter().append('g').attr('class', 'bar').attr('transform', function (d) {\n return 'translate(' + d.x0 + ', ' + d.y0 + ')';\n });\n g.append('rect').attr('width', function (d) {\n return d.x1 - d.x0;\n }).attr('height', function (d) {\n return d.y1 - d.y0;\n }).style('fill', '#f0ca75').style('stroke', '#fff');\n var label = g.append('text').attr('x', 5).attr('y', 15).text(function (d) {\n return d.data.name + ':' + d.value;\n });\n}\n\nparition('body', _sampleData2.default);//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiMS5qcyIsInNvdXJjZXMiOlsid2VicGFjazovLy9zY3JpcHQuanM/OWE5NSJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc2FtcGxlRGF0YSBmcm9tICcuL3NhbXBsZURhdGEnXG5jb25zdCBkMyA9IHdpbmRvdy5kM1xuXG5mdW5jdGlvbiBwYXJpdGlvbiAoYmluZCwgZGF0YSwgY29uZmlnKSB7XG4gIGNvbmZpZyA9IHtcbiAgICBtYXJnaW46IHt0b3A6IDE1MCwgcmlnaHQ6IDUwLCBib3R0b206IDE1MCwgbGVmdDogNTB9LFxuICAgIHdpZHRoOiA5NjAsXG4gICAgaGVpZ2h0OiA1MDAsXG4gICAgLi4uY29uZmlnXG4gIH1cbiAgY29uc3Qge21hcmdpbiwgd2lkdGgsIGhlaWdodH0gPSBjb25maWdcbiAgY29uc3QgdyA9IHdpZHRoIC0gbWFyZ2luLmxlZnQgLSBtYXJnaW4ucmlnaHRcbiAgY29uc3QgaCA9IGhlaWdodCAtIG1hcmdpbi50b3AgLSBtYXJnaW4uYm90dG9tXG5cbiAgY29uc3QgcGFydGl0aW9uTGF5b3V0ID0gZDMucGFydGl0aW9uKClcbiAgICAuc2l6ZShbdywgaF0pXG4gICAgLnBhZGRpbmcoNSlcblxuICBjb25zdCByb290Tm9kZSA9IGQzLmhpZXJhcmNoeShkYXRhKVxuICByb290Tm9kZS5zdW0oZCA9PiBkLnZhbHVlKVxuXG4gIHBhcnRpdGlvbkxheW91dChyb290Tm9kZSlcblxuICBjb25zdCBzdmcgPSBkMy5zZWxlY3QoYmluZCkuYXBwZW5kKCdzdmcnKVxuICAgIC5hdHRyKCd3aWR0aCcsIHdpZHRoKVxuICAgIC5hdHRyKCdoZWlnaHQnLCBoZWlnaHQpXG4gICAgLmFwcGVuZCgnZycpXG4gICAgLmF0dHIoJ3RyYW5zZm9ybScsIGQgPT4gYHRyYW5zbGF0ZSgke21hcmdpbi5sZWZ0fSwgJHttYXJnaW4udG9wfSlgKVxuXG4gIGNvbnN0IGcgPSBzdmcuc2VsZWN0QWxsKCcuYmFyJylcbiAgICAuZGF0YShyb290Tm9kZS5kZXNjZW5kYW50cygpKVxuICAgIC5lbnRlcigpLmFwcGVuZCgnZycpXG4gICAgLmF0dHIoJ2NsYXNzJywgJ2JhcicpXG4gICAgLmF0dHIoJ3RyYW5zZm9ybScsIGQgPT4gYHRyYW5zbGF0ZSgke2QueDB9LCAke2QueTB9KWApXG4gIGcuYXBwZW5kKCdyZWN0JylcbiAgICAuYXR0cignd2lkdGgnLCBkID0+IGQueDEgLSBkLngwKVxuICAgIC5hdHRyKCdoZWlnaHQnLCBkID0+IGQueTEgLSBkLnkwKVxuICAgIC5zdHlsZSgnZmlsbCcsICcjZjBjYTc1JylcbiAgICAuc3R5bGUoJ3N0cm9rZScsICcjZmZmJylcbiAgY29uc3QgbGFiZWwgPSBnLmFwcGVuZCgndGV4dCcpXG4gICAgLmF0dHIoJ3gnLCA1KVxuICAgIC5hdHRyKCd5JywgMTUpXG4gICAgLnRleHQoZCA9PiBgJHtkLmRhdGEubmFtZX06JHtkLnZhbHVlfWApXG59XG5cbnBhcml0aW9uKCdib2R5Jywgc2FtcGxlRGF0YSlcblxuXG5cbi8vIFdFQlBBQ0sgRk9PVEVSIC8vXG4vLyBzY3JpcHQuanMiXSwibWFwcGluZ3MiOiI7Ozs7QUFBQTtBQUNBOzs7OztBQUFBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBSEE7QUFEQTtBQUFBO0FBQUE7QUFBQTtBQUNBO0FBT0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUdBO0FBQ0E7QUFBQTtBQUFBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFJQTtBQUFBO0FBQ0E7QUFDQTtBQUlBO0FBQUE7QUFDQTtBQUNBO0FBQUE7QUFDQTtBQUFBO0FBR0E7QUFHQTtBQUFBO0FBQ0E7QUFDQTtBQUNBIiwic291cmNlUm9vdCI6IiJ9\n//# sourceURL=webpack-internal:///1\n")}]);
<!DOCTYPE html>
<title>d3 | partition diagram</title>
<link href="https://fonts.googleapis.com/css?family=Space+Mono" rel="stylesheet">
<link href='dist.css' rel='stylesheet' />
<body>
<script src='https://d3js.org/d3.v4.min.js'></script>
<script src='dist.js'></script>
</body>
const data = {
name: 'Training',
children: [
{
name: 'Upper',
children: [
{
name: 'Back',
children: [
{
name: 'Lats',
value: 4
},
{
name: 'Lower',
value: 3
}
]
},
{
name: 'Chest',
value: 3
},
{
name: 'Arms',
children: [
{
name: 'Bi',
value: 2
},
{
name: 'Tri',
value: 3
}
]
}
]
},
{
name: 'Rest',
value: 5
},
{
name: 'Lower',
children: [
{
name: 'Squats',
value: 6
},
{
name: 'Lunges',
value: 4
}
]
}
]
}
export default data
import sampleData from './sampleData'
const d3 = window.d3
function parition (bind, data, config) {
config = {
margin: {top: 150, right: 50, bottom: 150, left: 50},
width: 960,
height: 500,
...config
}
const {margin, width, height} = config
const w = width - margin.left - margin.right
const h = height - margin.top - margin.bottom
const partitionLayout = d3.partition()
.size([w, h])
.padding(5)
const rootNode = d3.hierarchy(data)
rootNode.sum(d => d.value)
partitionLayout(rootNode)
const svg = d3.select(bind).append('svg')
.attr('width', width)
.attr('height', height)
.append('g')
.attr('transform', d => `translate(${margin.left}, ${margin.top})`)
const g = svg.selectAll('.bar')
.data(rootNode.descendants())
.enter().append('g')
.attr('class', 'bar')
.attr('transform', d => `translate(${d.x0}, ${d.y0})`)
g.append('rect')
.attr('width', d => d.x1 - d.x0)
.attr('height', d => d.y1 - d.y0)
.style('fill', '#f0ca75')
.style('stroke', '#fff')
const label = g.append('text')
.attr('x', 5)
.attr('y', 15)
.text(d => `${d.data.name}:${d.value}`)
}
parition('body', sampleData)
*
box-sizing border-box
body
font-family: 'Space Mono', monospace
font-size: 11px
color: #454545
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment