30:T14d7,function squareBar (data, { bind = null, // pass in a d3 selection i.e d3.select('class/div') margin = { top: 30, right: 0, bottom: 10, left: 20 }, barWidth = 50, barHeight = barWidth, spacing = 2.2, width = data.length * (barWidth * spacing), height = barHeight + 20, valueFormat = '.1f', stroke = 'none', strokeWidth = 0, opacity = 1, labelFontSize = '14px', valueFontSize = '14px', axisMarkerFontSize = '11px', axisFontSize = '11px', xAxis = [0, 50], // data keys valueKey = 'value', targetKey = 'target', targetDir = 'targetDir', labelKey = 'label', // fills barBgd = '#ccc', axisMarkerFill = '#ccc', barFill = '#2166ac', barFillBelow = '#b2182b', labelFill = '#fff', markerFill = '#454545', showMarker = true, showPctAxis = true } = {}) { // 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 titleContainer = divContainer.append('div') // .attr('class', 'title-container ') const svgContainer = divContainer.append('div') .attr('class', 'svg-container'); // setup scales const yScale = d3.scaleLinear() .domain(xAxis) .range([barHeight, 0]); const svg = svgContainer.append('svg') .attr('width', w) .attr('height', h) .append('g') .attr('transform', `translate(${margin.left},${margin.top})`); const group = svg.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 group.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 group.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) { group.append('line') .attr('class', 'maker bar-marker-top') .attr('x1', barWidth) .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 group.append('text') .attr('class', 'labels sqbar-label') .attr('y', d => yScale(d[targetKey])) .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) { group.call(axisMarker, xAxis[0], axisMarkerFill) group.call(axisMarker, xAxis[1], axisMarkerFill) }; // append value group.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] + '%'); group.append('text') .attr('class', 'sqbar-title') .attr('y', -15) .attr('x', barWidth / 2) .attr('dx', 0) .attr('dy', 0) .style('font-size', labelFontSize) .style('fill', '#ccc') // .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; }31:[] 2e:{"title":"square bars","cells":[{"id":0,"value":"# square bars\n\nAn alternative to using a bar chart or a pie when either the values need unique scales or varying targets, or simply distinct separation. Also [squares are so cool](https://observablehq.com/@eesur/its-all-squares)!\nHere the colour is red if under the threshold/target and blue if it meets or exceeds the target:","pinned":false,"hidden":false,"mode":"md"},{"id":113,"value":"vis1 = html`

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":144,"value":"viewof valuePct = Inputs.range([1, 50], {label: \"Value\", step: 1, value: 20})","pinned":false,"hidden":false,"mode":"ojs"},{"id":146,"value":"viewof targetPct = Inputs.range([1, 50], {label: \"Target:\", step: 1, value: 25})","pinned":false,"hidden":false,"mode":"ojs"},{"id":120,"value":"squareBar([\n {\n value: valuePct,\n label: 'test',\n targetDir: 'above', // target can be below/above i.e aim is to either be above or below the target\n target: targetPct\n }\n ], {\n bind: d3.select(vis1), // pass in the selection\n barWidth: 100,\n valueFontSize: '24px'\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":191,"value":"----------------\n\nTest a render with an array:","pinned":false,"hidden":false,"mode":"md"},{"id":14,"value":"vis2 = html`

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":23,"value":"data = [\n {\n value: 45,\n label: 'T1',\n targetDir: 'above', // target can be below/above i.e aim is to either be above or below the target\n target: 40\n },\n {\n value: 13,\n label: 'T2',\n targetDir: 'above',\n target: 15\n },\n {\n value: 20,\n label: 'T3',\n targetDir: 'above',\n target: 15\n },\n {\n value: 30,\n label: 'T4',\n targetDir: 'above',\n target: 35\n },\n {\n value: 15,\n label: 'T5',\n targetDir: 'above',\n target: 15\n }\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":16,"value":"squareBar(data, {\n bind: d3.select(vis2), // pass in the selection\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":56,"value":"

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