d3 partition layout to display a routine using line
(instead of rect
) so it can possibly fit/flow better with text
Created
May 16, 2018 16:16
-
-
Save eesur/005b1a7d54d632a9eb360070b3367273 to your computer and use it in GitHub Desktop.
d3 | partition diagram using lines
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
license: mit | |
height: 500 | |
border: no |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
*{box-sizing:border-box}body{font-family:'Space Mono',monospace;font-size:11px} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
!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")}]); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
* | |
box-sizing border-box | |
body | |
font-family: 'Space Mono', monospace | |
font-size: 11px | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment