d3 | partition diagram

.block

license: mit
height: 500
border: no

README.md

d3 partition layout to display a routine

dist.css

*{box-sizing:border-box}body{font-family:'Space Mono',monospace;font-size:11px;color:#454545}

dist.js

!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")}]);

index.html

<!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>

preview.png

sampleData.js

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

script.js

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)

style.styl

*
  box-sizing border-box
body 
  font-family: 'Space Mono', monospace
  font-size: 11px
  color: #454545

thumbnail.png