d3 | partition diagram using lines

.block

license: mit
height: 500
border: no

README.md

d3 partition layout to display a routine using line (instead of rect) so it can possibly fit/flow better with text

previous sketch using rects

dist.css

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

dist.js

!function(n){function g(C){if(I[C])return I[C].exports;var t=I[C]={i:C,l:!1,exports:{}};return n[C].call(t.exports,t,t.exports,g),t.l=!0,t.exports}var I={};g.m=n,g.c=I,g.i=function(n){return n},g.d=function(n,I,C){g.o(n,I)||Object.defineProperty(n,I,{configurable:!1,enumerable:!0,get:C})},g.n=function(n){var I=n&&n.__esModule?function(){return n.default}:function(){return n};return g.d(I,"a",I),I},g.o=function(n,g){return Object.prototype.hasOwnProperty.call(n,g)},g.p="",g(g.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: 180, right: 50, bottom: 180, left: 50 },\n    width: 960,\n    height: 500,\n    color: '#f77e5e'\n  }, config);\n  var _config = config,\n      margin = _config.margin,\n      width = _config.width,\n      height = _config.height,\n      color = _config.color;\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(8);\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('.line').data(rootNode.descendants()).enter().append('g').attr('class', 'line').attr('transform', function (d) {\n    return 'translate(' + d.x0 + ', ' + d.y0 + ')';\n  });\n  g.append('line').attr('x1', function (d) {\n    return 0;\n  }).attr('x2', function (d) {\n    return d.x1 - d.x0;\n  }).attr('y1', function (d) {\n    return d.y1 - d.y0;\n  }).attr('y2', function (d) {\n    return d.y1 - d.y0;\n  }).style('stroke', '#454545');\n  var label = g.append('text').attr('x', 0).attr('y', function (d) {\n    return d.y1 - d.y0 - 5;\n  }).style('fill', color).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/OWE5NSJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc2FtcGxlRGF0YSBmcm9tICcuL3NhbXBsZURhdGEnXG5jb25zdCBkMyA9IHdpbmRvdy5kM1xuXG5mdW5jdGlvbiBwYXJpdGlvbiAoYmluZCwgZGF0YSwgY29uZmlnKSB7XG4gIGNvbmZpZyA9IHtcbiAgICBtYXJnaW46IHt0b3A6IDE4MCwgcmlnaHQ6IDUwLCBib3R0b206IDE4MCwgbGVmdDogNTB9LFxuICAgIHdpZHRoOiA5NjAsXG4gICAgaGVpZ2h0OiA1MDAsXG4gICAgY29sb3I6ICcjZjc3ZTVlJyxcbiAgICAuLi5jb25maWdcbiAgfVxuICBjb25zdCB7bWFyZ2luLCB3aWR0aCwgaGVpZ2h0LCBjb2xvcn0gPSBjb25maWdcbiAgY29uc3QgdyA9IHdpZHRoIC0gbWFyZ2luLmxlZnQgLSBtYXJnaW4ucmlnaHRcbiAgY29uc3QgaCA9IGhlaWdodCAtIG1hcmdpbi50b3AgLSBtYXJnaW4uYm90dG9tXG5cbiAgY29uc3QgcGFydGl0aW9uTGF5b3V0ID0gZDMucGFydGl0aW9uKClcbiAgICAuc2l6ZShbdywgaF0pXG4gICAgLnBhZGRpbmcoOClcblxuICBjb25zdCByb290Tm9kZSA9IGQzLmhpZXJhcmNoeShkYXRhKVxuICByb290Tm9kZS5zdW0oZCA9PiBkLnZhbHVlKVxuXG4gIHBhcnRpdGlvbkxheW91dChyb290Tm9kZSlcblxuICBjb25zdCBzdmcgPSBkMy5zZWxlY3QoYmluZCkuYXBwZW5kKCdzdmcnKVxuICAgIC5hdHRyKCd3aWR0aCcsIHdpZHRoKVxuICAgIC5hdHRyKCdoZWlnaHQnLCBoZWlnaHQpXG4gICAgLmFwcGVuZCgnZycpXG4gICAgLmF0dHIoJ3RyYW5zZm9ybScsIGQgPT4gYHRyYW5zbGF0ZSgke21hcmdpbi5sZWZ0fSwgJHttYXJnaW4udG9wfSlgKVxuXG4gIGNvbnN0IGcgPSBzdmcuc2VsZWN0QWxsKCcubGluZScpXG4gICAgLmRhdGEocm9vdE5vZGUuZGVzY2VuZGFudHMoKSlcbiAgICAuZW50ZXIoKS5hcHBlbmQoJ2cnKVxuICAgIC5hdHRyKCdjbGFzcycsICdsaW5lJylcbiAgICAuYXR0cigndHJhbnNmb3JtJywgZCA9PiBgdHJhbnNsYXRlKCR7ZC54MH0sICR7ZC55MH0pYClcbiAgZy5hcHBlbmQoJ2xpbmUnKVxuICAgIC5hdHRyKCd4MScsIGQgPT4gMClcbiAgICAuYXR0cigneDInLCBkID0+IGQueDEgLSBkLngwKVxuICAgIC5hdHRyKCd5MScsIGQgPT4gZC55MSAtIGQueTApXG4gICAgLmF0dHIoJ3kyJywgZCA9PiBkLnkxIC0gZC55MClcbiAgICAuc3R5bGUoJ3N0cm9rZScsICcjNDU0NTQ1JylcbiAgY29uc3QgbGFiZWwgPSBnLmFwcGVuZCgndGV4dCcpXG4gICAgLmF0dHIoJ3gnLCAwKVxuICAgIC5hdHRyKCd5JywgZCA9PiBkLnkxIC0gZC55MCAtIDUpXG4gICAgLnN0eWxlKCdmaWxsJywgY29sb3IpXG4gICAgLnRleHQoZCA9PiBgJHtkLmRhdGEubmFtZX06JHtkLnZhbHVlfWApXG59XG5cbnBhcml0aW9uKCdib2R5Jywgc2FtcGxlRGF0YSlcblxuXG5cbi8vIFdFQlBBQ0sgRk9PVEVSIC8vXG4vLyBzY3JpcHQuanMiXSwibWFwcGluZ3MiOiI7Ozs7QUFBQTtBQUNBOzs7OztBQUFBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFKQTtBQURBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFDQTtBQVFBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFHQTtBQUNBO0FBQUE7QUFBQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBSUE7QUFBQTtBQUNBO0FBQ0E7QUFJQTtBQUFBO0FBQ0E7QUFDQTtBQUFBO0FBQ0E7QUFBQTtBQUNBO0FBQUE7QUFDQTtBQUFBO0FBRUE7QUFFQTtBQUFBO0FBRUE7QUFBQTtBQUNBO0FBQ0E7QUFDQSIsInNvdXJjZVJvb3QiOiIifQ==\n//# sourceURL=webpack-internal:///1\n")}]);

index.html

<!DOCTYPE html>
<title>d3 | partition diagram using lines</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: 180, right: 50, bottom: 180, left: 50},
    width: 960,
    height: 500,
    color: '#f77e5e',
    ...config
  }
  const {margin, width, height, color} = config
  const w = width - margin.left - margin.right
  const h = height - margin.top - margin.bottom

  const partitionLayout = d3.partition()
    .size([w, h])
    .padding(8)

  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('.line')
    .data(rootNode.descendants())
    .enter().append('g')
    .attr('class', 'line')
    .attr('transform', d => `translate(${d.x0}, ${d.y0})`)
  g.append('line')
    .attr('x1', d => 0)
    .attr('x2', d => d.x1 - d.x0)
    .attr('y1', d => d.y1 - d.y0)
    .attr('y2', d => d.y1 - d.y0)
    .style('stroke', '#454545')
  const label = g.append('text')
    .attr('x', 0)
    .attr('y', d => d.y1 - d.y0 - 5)
    .style('fill', color)
    .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

thumbnail.png