2c:null 2d:["$","title",null,{"children":"Custom D3 layout for CSS-like box-model | Peter Hofmann | Observable"}] 32:T4f8,md`This custom layout for hierarchical data is inspired by the CSS box-model and adds *margin* and *padding* on all four sides of nested elements. - Boxes are arranged horizontally in lines; if a *maximum line width* is exceeded, they flow into a new line. - Padding is added *inside*, margins *outside* the boundary of boxes. - *Width* and *height* of the boxes is defined by their combined child sizes (width/height plus margins) as well as the padding of the box itself. - Empty boxes collapse to their padding, but you can also specify a *minimal* width and height for containers. - Elements that are not intended as boxes must set the boolean \`isContainer\` to \`false\` and can have a fixed width and height. #### Updates: > [*This project is now on GitHub and NPM!*](https://github.com/formsandlines/boxmodel-layout-for-d3) - Added \`spanHeight\` as optional parameter for nodes to span their whole parent container. - Vertical align is now per line (fixes element reordering with \`vAlign:'bottom'\`) - \`edgeMargins\` is now a function so you can specify this option globally as well as individually for each element. #### ToDo: - Initialize some parameters with default values so you don't have to specify every single parameter for each visualization.`33:T610,viewof ctr_demoModel = form(html``)34:T931,demoModel = { const config = config_demoModel; const id = DOM.uid(); yield html`

`; const root = root_demoModel; const rootW = root.x1-root.x0, rootH = root.y1-root.y0; const svgW = width, svgH = rootH; document.getElementById(id.id) .appendChild(html``); const svg = d3.select(`#${id.id} > svg`) .attr('width','100%').attr('height','auto'); //.style('background-color','rgba(0,0,0,.05)'); const node = svg.selectAll('g') .data(root.descendants()).enter().append('g') .attr('transform', d => `translate(${ d.x0 },${ d.y0 })`).filter(d => d.parent); const box = node.append('rect') .attr('stroke', d => 'black') .attr('fill', 'none') .attr('width', d => d.x1 - d.x0 ).attr('height', d => d.y1 - d.y0 ); const padT = node.append('rect') .attr('fill', 'rgba(0,255,0,0.2)') .attr('height', config.padding.top ).attr('width', d => d.x1 - d.x0 ); const padB = node.append('rect') .attr('fill', 'rgba(0,255,0,0.2)') .attr('y', d => (d.y1-d.y0)-config.padding.bottom ) .attr('height', config.padding.bottom ).attr('width', d => d.x1 - d.x0 ); const padL = node.append('rect') .attr('fill', 'rgba(0,255,0,0.2)') .attr('width', config.padding.left ).attr('height', d => d.y1 - d.y0 ); const padR = node.append('rect') .attr('fill', 'rgba(0,255,0,0.2)') .attr('x', d => (d.x1-d.x0)-config.padding.right ) .attr('width', config.padding.right ).attr('height', d => d.y1 - d.y0 ); const marT = node.append('rect') .attr('fill', 'rgba(255,0,0,0.2)') .attr('y', -config.margin.top ) .attr('height', config.margin.top ).attr('width', d => d.x1 - d.x0 ); const marB = node.append('rect') .attr('fill', 'rgba(255,0,0,0.2)') .attr('y', d => d.y1-d.y0 ) .attr('height', config.margin.bottom ).attr('width', d => d.x1 - d.x0 ); const marL = node.append('rect') .attr('fill', 'rgba(255,0,0,0.2)') .attr('x', -config.margin.left ) .attr('width', config.margin.left ).attr('height', d => d.y1 - d.y0 ); const marR = node.append('rect') .attr('fill', 'rgba(255,0,0,0.2)') .attr('x', d => d.x1-d.x0 ) .attr('width', config.margin.right ).attr('height', d => d.y1 - d.y0 ); return svg.node(); }35:T7ba,demoBoxed = { const config = ({ padding: {left: ctr_demoBoxed.padLR, right: ctr_demoBoxed.padLR, top: ctr_demoBoxed.padTB, bottom: ctr_demoBoxed.padTB}, vAlign: 'top', margin: {left: ctr_demoBoxed.marLR, right: ctr_demoBoxed.marLR, top: ctr_demoBoxed.marTB, bottom: ctr_demoBoxed.marTB}, edgeMargins: false, minContainerSize: {width: ctr_demoBoxed.minContSize, height: ctr_demoBoxed.minContSize}, maxLineWidth: ctr_demoBoxed.maxLineW }); const layout = data => boxmodel() .vAlign(config.vAlign) .edgeMargins(config.edgeMargins) .spanHeight(d => false) .isContainer(d => true) .padding(d => { let p = Object.assign({}, config.padding); return p; }) .margin(d => { let m = Object.assign({}, config.margin); return m; }) .minContainerSize(d => { let w = config.minContainerSize.width; let h = config.minContainerSize.height; return {width: w, height: h}; }) .maxLineWidth(d => { let w = config.maxLineWidth; return w; }) .nodeSize(d => { let w = 0, h = 0; return {width: w, height: h}; }) (d3.hierarchy(data)) const root = layout(data_demoBoxed); const svgW = (root.x1 - root.x0), svgH = (root.y1 - root.y0); const color = d3.scaleQuantize() .domain([0, root.height]) .range(d3.schemeOranges[9]) const svg = d3.select(DOM.svg(svgW, svgH)) .attr('width','100%').attr('height','auto'); const bg = svg.append('rect') .lower() .attr('width','100%').attr('height','100%') .attr('fill', 'rgba(0,0,0,1.0)'); const nodes = svg.selectAll('g') .data(root.descendants()).enter().append('g') .attr('transform', d => `translate(${d.x0},${d.y0})`); const boxes = nodes.append('rect') .attr('fill', d => color(d.height)) .attr('width', d => d.x1 - d.x0 ).attr('height', d => d.y1 - d.y0 ); return svg.node(); }36:T620,chart_demo2 = { const config = config_demoPyramid; const layout = data => boxmodel() .vAlign(config.vAlign) .edgeMargins(config.edgeMargins) .spanHeight(d => false) .isContainer(d => true) .padding(d => { let p = Object.assign({}, config.padding); return p; }) .margin(d => { let m = Object.assign({}, config.margin); return m; }) .minContainerSize(d => { let w = config.minContainerSize.width; let h = config.minContainerSize.height; return {width: w, height: h}; }) .maxLineWidth(d => { let w = config.maxLineWidth; return w; }) .nodeSize(d => { let w = 0, h = 0; return {width: w, height: h}; }) (d3.hierarchy(data)) const root = layout(data_demoPyramid); const svgW = (root.x1 - root.x0), svgH = (root.y1 - root.y0); const color = d3.scaleQuantize() .domain([0, root.height]) .range(d3.schemeOranges[9]) const svg = d3.select(DOM.svg(svgW, svgH)) .attr('width','50%').attr('height','auto'); const bg = svg.append('rect') .lower() .attr('width','100%').attr('height','100%') .attr('fill', 'rgba(0,0,0,1.0)'); const nodes = svg.selectAll('g') .data(root.descendants()).enter().append('g') .attr('transform', d => `translate(${d.x0},${d.y0})`); const boxes = nodes.append('rect') .attr('fill', d => color(d.height)) .attr('width', d => d.x1 - d.x0 ).attr('height', d => d.y1 - d.y0 ); return svg.node(); }37:T2986,function boxmodel() { // v.1.2.1 | by Peter Hofmann, 03/2019 let isContainer, spanHeight, edgeMargins, vAlign; let padding, margin, minContainerSize, maxLineWidth, nodeSize; const lineMap = []; function compute(root) { root.eachAfter(scaleNode); root.eachBefore(scaleToParent); root.eachBefore(positionNode); return root; } compute.vAlign = function(x) { return arguments.length ? (vAlign = x, compute) : vAlign; }; compute.edgeMargins = function(x) { return arguments.length ? (edgeMargins = typeof x === 'function' ? x : constant(+x), compute) : edgeMargins; }; compute.isContainer = function(x) { return arguments.length ? (isContainer = typeof x === 'function' ? x : constant(+x), compute) : isContainer; }; compute.spanHeight = function(x) { return arguments.length ? (spanHeight = typeof x === 'function' ? x : constant(+x), compute) : spanHeight; }; compute.padding = function(x) { return arguments.length ? (padding = typeof x === 'function' ? x : constant(+x), compute) : padding; }; compute.margin = function(x) { return arguments.length ? (margin = typeof x === 'function' ? x : constant(+x), compute) : margin; }; compute.nodeSize = function(x) { return arguments.length ? (nodeSize = typeof x === 'function' ? x : constant(+x), compute) : nodeSize; }; compute.minContainerSize = function(x) { return arguments.length ? (minContainerSize = typeof x === 'function' ? x : constant(+x), compute) : minContainerSize; }; compute.maxLineWidth = function(x) { return arguments.length ? (maxLineWidth = typeof x === 'function' ? x : constant(+x), compute) : maxLineWidth; }; // -------------- // Main functions function scaleNode(node) { // set size to fixed definition by default let w = nodeSize(node).width, h = nodeSize(node).height; if (isContainer(node)) { w = h = 0; // containers have no fixed size, so we nullify if (node.children) { // For non-empty containers, size and margin between children must be summed up. // To do this, we need to determine when a line of children widths/margins surpasses maxLineWidth // and if so, add to an array that stores this line width as well as the interval of child indizes const lines = generateLines(node); // now loop through all lines and their elements to calculate the line heights for (let l = 0; l < lines.length; l++) { lines[l].height = calcLineHeight(node,lines,l); // add as line property } // add line array to a global line map lineMap.push({box: node, lines: lines}); // add the largest of all line widths to the width w += d3.max(lines, l => l.width); // add the sum of all line heights to the height h += d3.sum(lines, l => l.height); } // no specified size => combined padding OR minSize (if paddings smaller) w += padding(node).left + padding(node).right; h += padding(node).top + padding(node).bottom; w = Math.max(w, minContainerSize(node).width); h = Math.max(h, minContainerSize(node).height); } // finally, assign w/h to node coordinates node.x0 = node.y0 = 0; node.x1 = w, node.y1 = h; } // ------ end scaleNode() ------- function scaleToParent(node) { // spanHeight and other scaling operations that refer to container/line size // can only be realized after all container scaling has been done let h = node.y1; // if element spans height of its container/line, calculate new height if (node.parent && spanHeight(node)) { h = getOwnLine(node).height; const parentLines = getLines(node.parent); const lineIndex = getLineIndex(node, parentLines); h -= !edgeMargins(node) && lineIndex === 0 ? 0 : margin(node).top; h -= !edgeMargins(node) && lineIndex === (parentLines.length-1) ? 0 : margin(node).bottom; // now adjust the line heights accordingly by distributing the excess height const heightDiff = h - node.y1; if (isContainer(node) && node.children && heightDiff > 0) { const lines = getLines(node); const excess = heightDiff / lines.length; for (const line of lines) { line.height += excess; } } } node.y1 = h; } function positionNode(node) { const w = node.x1 - node.x0; const h = node.y1 - node.y0; if (node.parent) { // y-position children relative to parent container y + padding node.y0 = node.parent.y0 + padding(node.parent).top; const order = node.parent.children.indexOf(node); if (order === 0 || lineBreak(node)) { // x-position 1. children (of line) relative to parent container x + padding node.x0 += node.parent.x0 + padding(node.parent).left; if (edgeMargins(node)) node.x0 += margin(node).left; } else { // all subsequent children can be x-positioned relative to their left neighbour const neighbourLeft = node.parent.children[order-1]; node.x0 = neighbourLeft.x1; // margins of both children are collapsed to the max value node.x0 += Math.max( margin(neighbourLeft).right, margin(node).left ); } } // if no parent, position is dependent only on vertical alignment else { switch (vAlign) { case 'top': node.y0 = 0; break; case 'middle': node.y0 = h/2; break; case 'bottom': node.y0 = h; break; } } // shift height in middle and bottom alignments // for children, add vertical margins and also shift to the y-position of their line switch (vAlign) { case 'top': if (node.parent) { const lineIndex = getLineIndex(node); node.y0 += !edgeMargins(node) && lineIndex === 0 ? 0 : margin(node).top; node.y0 += calcLineShift(node); } break; case 'middle': if (node.parent) node.y0 += calcLineShift(node) + getOwnLine(node).height/2; node.y0 -= h/2; break; case 'bottom': if (node.parent) { const lines = getLines(node.parent), lineIndex = getLineIndex(node, lines); node.y0 -= !edgeMargins(node) && lineIndex === (lines.length-1) ? 0 : margin(node).bottom; node.y0 += calcLineShift(node, true); } node.y0 -= h; break; } // last, assign w/h shift to coordinates node.x1 = node.x0 + w; node.y1 = node.y0 + h; } // ------ end positionNode() ------- // ------------------- // Essential functions function generateLines(node) { const lines = []; let lineWidth = 0, flexHeight = false, startIndex = 0, newLine = true; node.children.forEach( (child,i) => { // determine if at least one of the children in a line has a property to span container height if (spanHeight(child) && !flexHeight) flexHeight = true; // add width of each child lineWidth += (child.x1 - child.x0); // add largest of the two margins between children and left outer margin (if edgeMargins true) lineWidth += newLine ? (edgeMargins(child) ? margin(child).left : 0) : Math.max(margin(child).left, margin(node.children[i-1]).right); // right margin is only added at the end of a line (if edgeMargins true) const marginRight = edgeMargins(child) ? margin(child).right : 0; if (lineWidth + marginRight > maxLineWidth(node) || i === node.children.length-1) lineWidth += marginRight; // line breaks if maxLineWidth is surpassed or it's the last one if (lineWidth > maxLineWidth(node) || i === node.children.length-1) { // if true, add child interval to lines array and save line width lines.push({from: startIndex, to: i, width: lineWidth, flexHeight: flexHeight}); // if not last line, reset variables if (i < node.children.length-1) startIndex = i+1, lineWidth = 0, flexHeight = false, newLine = true; } else newLine = false; }); return lines; } function calcLineHeight(node, lines, lineIndex) { const line = lines[lineIndex]; let lineHeight = 0; for (let i = line.from; i <= line.to; i++) { const child = node.children[i]; // calculate the raw children height const childH = child.y1 - child.y0; // add vertical margins between children and (if edgeMargins true) outer vertical margins // note: collapsing individual vertical margins is too messy and complicated, so I left this out const marginsVert = (!edgeMargins(child) && lineIndex===0 ? 0 : margin(child).top) + (!edgeMargins(child) && lineIndex===(lines.length-1) ? 0 : margin(child).bottom); // set line height if it surpasses line height of previous childs if (childH + marginsVert > lineHeight) lineHeight = childH + marginsVert; } return Math.max(lineHeight, minContainerSize(node).height); } // ---------------- // Helper functions function getLines(node) { return lineMap[lineMap.findIndex(m => m.box === node)].lines; } function getLineIndex(node, parentLines) { if (node.parent) { const lines = (arguments.length > 1) ? parentLines : getLines(node.parent); const index = node.parent.children.indexOf(node); return lines.findIndex(l => { return (index >= l.from) && (index <= l.to); }); } return null; } function getOwnLine(node) { const lines = getLines(node.parent); const lineIndex = getLineIndex(node, lines); return lines[lineIndex]; } function calcLineShift(node, include = false) { if (node.parent) { const lines = getLines(node.parent); const lineIndex = getLineIndex(node, lines); const lineTo = include ? lineIndex : lineIndex-1; return d3.sum(lines.filter( (l,i) => (i <= lineTo) ), l => l.height); } return null; } function lineBreak(node) { if (node.parent) { const index = node.parent.children.indexOf(node); const lines = getLines(node.parent); const line = lines[getLineIndex(node, lines)]; return line.from === index; } return null; } function constant(x) { // from D3 source return function() { return x; }; } return compute; }38:[] 30:{"id":"4d5b2884016ac347","slug":"custom-d3-layout-for-css-like-box-model","title":"Custom D3 layout for CSS-like box-model","thumbnail":"0a8751dac86e7ca610d69ea4b7aaec4fa22d32ab3f82ccb555d5e66c022c4b38","access_level":"public","create_time":"$D2019-03-14T10:00:52.001Z","update_time":"$D2019-03-29T21:38:48.871Z","view_time":null,"first_public_time":"$D2019-03-18T13:18:58.143Z","has_unpublished_edits":null,"fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"e581d618919cd266","login":"formsandlines","name":"Peter Hofmann","avatar_url":"https://avatars-next.observableusercontent.com/da037e21011ef7f0553d73420763f4a2071c0bd9191552279dd8ebc154fc28b8","tier":"starter_2024","bio":"I like to create and experiment with tools for thought and visualization with a special focus on the language system FORMWELT and its underlying 4-valued logic uFORM iFORM."},"version":1748,"publish_version":1748,"role":null,"authored":false,"authors":[{"type":"individual","id":"b20948974f4dc365","login":"formsandlines","name":"Peter Hofmann","avatar_url":"https://avatars-next.observableusercontent.com/da037e21011ef7f0553d73420763f4a2071c0bd9191552279dd8ebc154fc28b8","tier":null,"bio":"I like to create and experiment with tools for thought and visualization with a special focus on the language system FORMWELT and its underlying 4-valued logic uFORM iFORM."}],"members":[{"type":"individual","id":"b20948974f4dc365","login":"formsandlines","name":"Peter Hofmann","avatar_url":"https://avatars-next.observableusercontent.com/da037e21011ef7f0553d73420763f4a2071c0bd9191552279dd8ebc154fc28b8","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":{"id":"929942c346668d9a","slug":"components","title":"Components","owner":{"id":"e581d618919cd266","login":"formsandlines","name":"Peter Hofmann"}},"type":"notebook","body":{"titling":"auto","title":"Custom D3 layout for CSS-like box-model","cells":[{"id":0,"value":"md`# Custom D3 layout for CSS-like box-model`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1212,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1455,"value":"md`---\n### Model Parameters`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1351,"value":"md`\n|padding|margin|min. container size|max. line width|\n|-------|------|--------|--------------|\n|top: \\`\\`${ctr_demoModel.padT}\\`\\`|top: \\`\\`${ctr_demoModel.marT}\\`\\`|width: \\`\\`${ctr_demoModel.minContW}\\`\\`|\\`\\`${ctr_demoModel.maxLineW}\\`\\`|\n|bottom: \\`\\`${ctr_demoModel.padB}\\`\\`|bottom: \\`\\`${ctr_demoModel.marB}\\`\\`|height: \\`\\`${ctr_demoModel.minContH}\\`\\`||\n|left: \\`\\`${ctr_demoModel.padL}\\`\\`|left: \\`\\`${ctr_demoModel.marL}\\`\\`|||\n|right: \\`\\`${ctr_demoModel.padR}\\`\\`|right: \\`\\`${ctr_demoModel.marR}\\`\\`|||\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1311,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1315,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1678,"value":"layout_demoModel = data => boxmodel()\n .vAlign(config_demoModel.vAlign)\n .edgeMargins(d => {\n return config_demoModel.edgeMargins;\n //if(d.parent) return config_demoModel.edgeMargins;\n //else return false;\n })\n .spanHeight(d => false).isContainer(d => true)\n .padding(d => {\n let p = Object.assign({}, config_demoModel.padding);\n return p;\n })\n .margin(d => {\n let m = Object.assign({}, config_demoModel.margin);\n return m;\n })\n .minContainerSize(d => {\n let w = config_demoModel.minContainerSize.width;\n let h = config_demoModel.minContainerSize.height;\n return {width: w, height: h};\n })\n .maxLineWidth(d => {\n let w = config_demoModel.maxLineWidth;\n return w;\n })\n .nodeSize(d => {\n let w = 0, h = 0;\n return {width: w, height: h};\n })\n (d3.hierarchy(data))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1684,"value":"config_demoModel = ({ padding: {left: ctr_demoModel.padL, right: ctr_demoModel.padR, top: ctr_demoModel.padT, bottom: ctr_demoModel.padB}, vAlign: 'top',\n margin: {left: ctr_demoModel.marL, right: ctr_demoModel.marR, top: ctr_demoModel.marT, bottom: ctr_demoModel.marB}, edgeMargins: ctr_demoModel.edgeMar,\n minContainerSize: {width: ctr_demoModel.minContW, height: ctr_demoModel.minContH}, maxLineWidth: ctr_demoModel.maxLineW });","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1673,"value":"root_demoModel = layout_demoModel(data_demoModel);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1318,"value":"data_demoModel = ({\n children: [{children:[{}]},{children:[{}]},{children:[{}]},{children:[{}]}]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1457,"value":"md`---\n### Lines demo`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1251,"value":"viewof ctr_demoBoxed = form(html``)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1427,"value":"md`\n- padding top/bottom: ${ctr_demoBoxed.padTB}, padding left/right: ${ctr_demoBoxed.padLR}\n- margin top/bottom: ${ctr_demoBoxed.marTB}, margin left/right: ${ctr_demoBoxed.marLR}\n- min. container size: ${ctr_demoBoxed.minContSize}, max. line width: ${ctr_demoBoxed.maxLineW}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1123,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":910,"value":"data_demoBoxed = {\n const data = {children: []};\n for (let i=0; i < Math.ceil(d3.randomNormal(5,1)()); i++) {\n data.children.push({children: []});\n }\n for (let i=0; i < data.children.length; i++) {\n for (let j=0; j < Math.ceil(d3.randomNormal(6,2)()); j++) {\n data.children[i].children.push({children: []});\n }\n }\n for (let i=0; i < data.children.length; i++) {\n for (let j=0; j < data.children[i].children.length; j++) {\n for (let k=0; k < Math.ceil(d3.randomNormal(12,4)()); k++) {\n data.children[i].children[j].children.push({children: []});\n }\n }\n }\n return data;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1462,"value":"md`---\n### Pyramid demo`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1173,"value":"config_demoPyramid = ({ padding: {left: 6, right: 6, top: 0, bottom: 16}, vAlign: 'middle',\n margin: {left: 4, right: 4, top: 0, bottom: 16}, edgeMargins: true,\n minContainerSize: {width: 16, height: 16}, maxLineWidth: 1200});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":701,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1119,"value":"data_demoPyramid = ({children: \n [{},{children: \n [{},{children: \n [{},{children: \n [{},{children: \n [{},{children: \n [{},{children: \n [{},{children: \n [{}]\n },{}]\n },{}]\n },{}]\n },{}]\n },{}]\n },{}]\n },{}]\n });","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1580,"value":"md`---\n### More complex example\n\n- [Custom Boxmodel layout demo with flare (Observable)](https://observablehq.com/@formsandlines/custom-boxmodel-layout-demo-with-flare)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1465,"value":"md`---\n## Boxmodel layout`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"$37","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1575,"value":"md`---\n### Appendix\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1266,"value":"import {form} from '@mbostock/form-input'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1532,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W38","stdlib":"1"}} 31:"$30:body"