31:T1076,function flowDiagram(data, { bind = null, // pass in a d3 selection i.e d3.select('class/div') margin = { top: 0, right: 0, bottom: 0, left: 0 }, width = 410, height = 410, edgeStroke = 4, // connecting lines thickness of stroke centerSquare = 115, // size of center square squareConnector = centerSquare * 0.15, // size of small square connecting nodes targetDirection = 'above', // target can be below/above centerSquareFill = bgdCol2, domainRange = [0, 50] // pass in percentage range e.g max [0, 100] } = {}) { // set the dimensions and margins of the graph const w = width + margin.left + margin.right; const h = height + margin.top + margin.bottom; // create a container // do a destroy bind.selectAll('div').remove(); const divContainer = bind.append('div') .attr('class', 'bars-wrap clearfix'); const svgContainer = divContainer.append('div') .attr('class', 'svg-container'); const svg = svgContainer.append('svg') .attr('width', w) .attr('height', h) .append('g') .attr('transform', `translate(${margin.left},${margin.top})`); const centerH = (w / 2) - (centerSquare / 2); // horizontal center const centerV = (h / 2) - (centerSquare / 2); // vertical center const squareSize = 60; // size of the data square // left and right node svg.append('rect') .attr('width', centerSquare + squareConnector) .attr('height', squareConnector) .attr('x', centerH -(squareConnector/2)) .attr('y', centerV + (centerSquare / 2) - (squareConnector/2)) .attr('fill', centerSquareFill); // top and bottom node svg.append('rect') .attr('width', squareConnector) .attr('height', centerSquare + squareConnector) .attr('y', centerV -(squareConnector/2)) .attr('x', centerH + (centerSquare / 2) - (squareConnector/2)) .attr('fill', centerSquareFill); // edge/connector lines // horizontal edges svg.append('rect') .attr('width', centerSquare + squareConnector + 50) .attr('height', edgeStroke) .attr('x', centerH -(squareConnector/2) - 25) .attr('y', centerV + (centerSquare / 2) - (edgeStroke/2)) .attr('fill', centerSquareFill) .style('stroke-linecap', 'round'); // vertical edges svg.append('rect') .attr('width', edgeStroke) .attr('height', centerSquare + squareConnector + 50) .attr('x', centerH + (centerSquare / 2) - (edgeStroke/2)) .attr('y', centerV - (squareConnector/2) - 25) .attr('fill', centerSquareFill) .style('rx', '2'); // background/center shape svg.append('rect') .attr('width', centerSquare) .attr('height', centerSquare) .attr('x', centerH) .attr('y', centerV) .attr('rx', 5) .attr('fill', centerSquareFill); // some helpers for each of the data square locations const middleSquare = svg.append('g') .attr('transform', `translate(${w/2 - (squareSize / 2)}, ${h/2 - 25})`); const topSquare = svg.append('g') .attr('transform', `translate(${w/2 - (squareSize / 2)}, ${h/2 - 100 - 60})`); const botSquare = svg.append('g') .attr('transform', `translate(${w/2 - (squareSize / 2)}, ${h/2 + 100})`); const leftSquare = svg.append('g') .attr('transform', `translate(${w/2 - ((squareSize * 2) + 40)}, ${h/2 - 25})`); const rightSquare = svg.append('g') .attr('transform', `translate(${w/2 + (squareSize + 40)}, ${h/2 - 25})`); // render the squares with data squareBar([data[0]], { bind: middleSquare, // pass in the selection barWidth: squareSize, titleFill: '#555', titlePadding: 9, xAxis: domainRange }); squareBar([data[1]], { bind: topSquare, // pass in the selection barWidth: squareSize, xAxis: domainRange }); squareBar([data[2]], { bind: botSquare, // pass in the selection barWidth: squareSize, titlePadding: 25, titleTop: false, xAxis: domainRange }); squareBar([data[3]], { bind: leftSquare, // pass in the selection markerRight: false, // display marker on the left barWidth: squareSize, xAxis: domainRange }); squareBar([data[4]], { bind: rightSquare, // pass in the selection barWidth: squareSize, xAxis: domainRange }); }32:T1536,function squareBar (data, { bind = null, // pass in a g element from a parent from svg margin = { top: 0, right: 0, bottom: 0, left: 0 }, barWidth = 60, barHeight = barWidth, spacing = 2.2, width = data.length * (barWidth * spacing), height = barHeight + 20, valueFormat = '.1f', stroke = 'none', strokeWidth = 0, opacity = 1, labelFontSize = '13px', valueFontSize = '14px', axisMarkerFontSize = '11px', axisFontSize = '11px', xAxis = [0, 50], // data keys valueKey = 'value', targetKey = 'target', targetDir = 'targetDir', labelKey = 'label', titlePadding = 15, markerRight = true, // display marker on the right as default, otherwise left titleTop = true, // display title on top otherwise underneath // fills titleFill = titleCol, barBgd = bgdCol1, axisMarkerFill = '#ccc', barFill = aboveCol, barFillBelow = belowCol, labelFill = '#fff', markerFill = '#454545', showMarker = true, showPctAxis = false } = {}) { // set the dimensions and margins of the graph const w = width + margin.left + margin.right; const h = height + margin.top + margin.bottom; // create a container // do a destroy bind.selectAll('g').remove(); const g = bind.append('g') .attr('transform', `translate(${margin.left},${margin.top})`); // setup scales const yScale = d3.scaleLinear() .domain(xAxis) .range([barHeight, 0]); const square = g.selectAll('g') .data(data) .join('g') .attr('class', (d, i) => 'bar-group g-' + i) .attr('transform', (d, i) => `translate( ${i * (barWidth * spacing)} , 0 )`); // append bgd bar square.append('rect') .attr('class', `bar bar-bgd`) .attr('height', barHeight) .attr('x', 0) .attr('y', 0) .attr('width', barWidth) .style('fill', barBgd) .style('opacity', opacity) .style('pointer-events', 'none'); // append bar square.append('rect') .attr('class', `bar bar-top`) .attr('height', d => barHeight - yScale(d[valueKey])) .attr('x', 0) .attr('y', d => yScale(d[valueKey])) .attr('width', barWidth) .style('fill', d => { if (d[targetDir] === 'above' && d[valueKey] >= d[targetKey]) { return barFill; } else if (d[targetDir] === 'above' && d[valueKey] < d[targetKey]) { return barFillBelow; } else if (d[targetDir] === 'below' && d[valueKey] > d[targetKey]) { return barFillBelow; } else if (d[targetDir] === 'below' && d[valueKey] <= d[targetKey]) { return barFill; } }) .style('opacity', opacity) .style('pointer-events', 'none'); // append markers if (showMarker) { square.append('line') .attr('class', 'maker bar-marker-top') .attr('x1', barWidth) .attr('x1', () => (markerRight) ? barWidth : 0) .attr('x2', () => (markerRight) ? barWidth + 5 : -5) //.attr('x2', barWidth + 5) .attr('y1', d => yScale(d[targetKey])) .attr('y2', d => yScale(d[targetKey])) .style('fill', 'none') .style('stroke', markerFill) .style('stroke-width', 1) .style('opacity', 0.7) // append value MARKER label square.append('text') .attr('class', 'labels sqbar-label') .attr('y', d => yScale(d[targetKey])) .attr('x', () => (markerRight) ? barWidth + 15 : -15) //.attr('x', barWidth + 15) .attr('dx', -10) .attr('dy', 3) .style('font-size', axisMarkerFontSize) .style('letter-spacing', '1px') .style('fill', markerFill) .style('pointer-events', 'none') .style('text-anchor', 'right') .text(d => d[targetKey] + '%') } // append markers if (showPctAxis) { square.call(axisMarker, xAxis[0], axisMarkerFill) square.call(axisMarker, xAxis[1], axisMarkerFill) }; // append value square.append('text') .attr('class', 'sqbar-label') .attr('y', barHeight) .attr('x', barWidth / 2) .attr('dx', 0) .attr('dy', barHeight * -0.1) .style('font-size', valueFontSize) // .style('fill', d3.color(config.barFill).darker()) .style('fill', labelFill) .style('pointer-events', 'none') .style('text-anchor', 'middle') .text(d => d[valueKey] + '%'); // title square.append('text') .attr('class', 'sqbar-title') .attr('y', () => (titleTop) ? titlePadding * -1 : (barHeight + titlePadding)) .attr('x', barWidth / 2) .attr('dx', 0) .attr('dy', 0) .style('font-size', labelFontSize) .style('fill', titleFill) // .style('pointer-events', 'none') .style('text-anchor', 'middle') .text(d => d[labelKey]); // markers for target and axis % function axisMarker (selection, value, col) { // append bar marker selection.append('line') .attr('class', 'sqbar-marker-top') .attr('x1', 0) .attr('x2', -3) .attr('y1', yScale(value)) .attr('y2', yScale(value)) .style('fill', 'none') .style('stroke', col) .style('stroke-width', 1) .style('opacity', 0.7); // append value MARKER label selection.append('text') .attr('class', 'sqbar-label') .attr('y', yScale(value)) .attr('x', -5) .attr('dx', 0) .attr('dy', 3) .style('font-size', axisFontSize) // .style('letter-spacing', '1px') .style('fill', col) // .style('pointer-events', 'none') .style('text-anchor', 'end') .text(value); } return svg; }33:[] 2f:{"title":"percentage flow diagram movers, leavers, promotions","cells":[{"id":0,"value":"# percentage flow diagram movers, leavers, promotions\n\nUtilising [square bars](https://observablehq.com/@eesur/square-bars) to compose a visual showing flow of a population change within a team during a particular length in time e.g. year to date. So the total would add up to 100%. Below looks at grade changes and hires/leavers against targets (small percentage in the y-axis). The central node shows the non-changed population percentage.","pinned":false,"hidden":false,"mode":"md"},{"id":209,"value":"visFlow = html`

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":533,"value":"Have some sample data: (change values to see chart change)","pinned":false,"hidden":false,"mode":"md"},{"id":23,"value":"data = [ // order of labels is required: center > top > bottom > left > right\n {\n value: 25,\n label: 'in role',\n targetDir: 'above',\n target: 35\n },\n {\n value: 16,\n label: 'promo out',\n targetDir: 'above', // target can be below/above i.e aim is to either be above or below the target\n target: 10\n },\n {\n value: 13,\n label: 'promo in',\n targetDir: 'above',\n target: 15\n },\n {\n value: 16,\n label: 'hires',\n targetDir: 'above',\n target: 15\n },\n {\n value: 30,\n label: 'leavers',\n targetDir: 'below',\n target: 25\n }\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":613,"value":"-------\nrender and pass in any overrides: ","pinned":false,"hidden":false,"mode":"md"},{"id":211,"value":"flowDiagram(data, {\n bind: d3.select(visFlow), // pass in the selection\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":531,"value":"Colours being passed in:","pinned":false,"hidden":false,"mode":"md"},{"id":297,"value":"viewof titleCol = Inputs.color({label: \"Title colour:\", value: \"#948BA7\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":259,"value":"viewof bgdCol2 = Inputs.color({label: \"Background colour:\", value: \"#DBD8E2\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":254,"value":"viewof bgdCol1 = Inputs.color({label: \"Background colour:\", value: \"#F1EFF3\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":242,"value":"viewof belowCol = Inputs.color({label: \"Below target:\", value: \"#5C1E5B\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":245,"value":"viewof aboveCol = Inputs.color({label: \"Above target:\", value: \"#4C3D6C\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":541,"value":"--------\n\nTest multiple renders with random values:","pinned":false,"hidden":false,"mode":"md"},{"id":543,"value":"visWrap = html`

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":552,"value":"{ // have a way of updating the cell put not creating extra dom elements\n if (d3.select(visWrap).empty()) { // don't reload on any cell refreshes\n testMultipleRender(dataMultiple, visWrap);\n } else {\n d3.select(visWrap).selectAll('div').remove();\n testMultipleRender(dataMultiple, visWrap);\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":556,"value":"function testMultipleRender(data, sel) { // render dom and bind svg visual to it\n return data.forEach((d, i) => {\n const div = d3.select(sel).append('div').attr('class', 'sf-vis pt2 m1 ref-' + i).style('background', '#fff');\n d3.select('.ref-' + i).selectAll('h3').remove(); // tidy for refreshes on page\n d3.select('.ref-' + i).append('h3').attr('class', 'label').text('TEAM-0' + i)\n flowDiagram(data[i], {\n bind: d3.select(sel).select('.ref-' + i), // pass in the selection\n domainRange: [0, 100] // default is [0, 50]\n })\n })\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":545,"value":"dataMultiple = d3.range(4).map(d => { // some dummy data for multiple render test\n return data.map(o => {\n return {\n value: _.random(30, 100),\n label: o.label,\n targetDir: _.sample(['above', 'below']),\n target: _.random(0, 100)\n }\n })\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":539,"value":"------------\n\nCode for reusable visuals:","pinned":false,"hidden":false,"mode":"md"},{"id":200,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"

\n\n\n","pinned":true,"hidden":false,"mode":"html"}],"files":"$W33","stdlib":"1","titling":"auto"}