40:null 41:["$","title",null,{"children":"Simple stacked bar chart | Lasha | Observable"}] 47:T120b,viewof dataStr = Inputs.textarea({ rows: 100, value: JSON.stringify( { title: "chart title", unit: "%", yMin: 0, yMax: 100, grouped: true, rightYMin: 0, rightYMax: 1000, rightUnit: "", legends: [ [ { type: "line", color: "red", label: "Description of red line" }, { type: "line", color: "gray", dashed: true, label: "Description of dashed gray line" } ], [ { type: "rect", color: "red", label: "Description of red rect" }, { type: "rect", color: "blue", label: "Description of blue rect" } ] ], rotateX: 10, lines: [ { color: "red", axis: "right", values: [ { name: 2018, value: 40 }, { name: 2019, value: 50 }, { name: 2020, value: 10 }, { name: 2021, value: 90 } ] }, { dashed: true, values: [ { name: 2018, value: 50 }, { name: 2019, value: 80 } ] } ], groups: [ { name: 2018, values: [ { name: "No Action", value: 0, color: "white" }, { name: "Planned response", value: 1, color: "#ACD3F1" }, { name: "Initial response", value: 18, color: "#1786D7" }, { name: "Partial response", value: 1, color: "#126AAA" }, { name: "Full response", value: 1, color: "#0D4E7C" } ] }, { name: 2019, values: [ { name: "No Action", value: 0, color: "white" }, { name: "Planned response", value: 5, color: "#ACD3F1" }, { name: "Initial response", value: 22, color: "#1786D7" }, { name: "Partial response", value: 1, color: "#126AAA" }, { name: "Full response", value: 3, color: "#0D4E7C" } ] }, { name: 2020, values: [ { name: "No Action", value: 0, color: "white" }, { name: "Planned response", value: 5, color: "#ACD3F1" }, { name: "Initial response", value: 22, color: "#1786D7" }, { name: "Partial response", value: 1, color: "#126AAA" }, { name: "Full response", value: 33, color: "#0D4E7C" } ] }, { name: 2021, values: [ { name: "No Action", value: 0, color: "white" }, { name: "Planned response", value: 5, color: "#ACD3F1" }, { name: "Initial response", value: 22, color: "#1786D7" }, { name: "Partial response", value: 41, color: "#126AAA" }, { name: "Full response", value: 3, color: "#0D4E7C" } ] }, { name: 2022, values: [ { name: "No Action", value: 0, color: "white" }, { name: "Planned response", value: 5, color: "#ACD3F1" }, { name: "Initial response", value: 22, color: "#1786D7" }, { name: "Partial response", value: 51, color: "#126AAA" }, { name: "Full response", value: 3, color: "#0D4E7C" } ] } ] }, null, " " ) })48:T421,function generateLegendsHtml(legendsData) { if (!legendsData) return ``; return `

${legendsData .map( (legends) => `

${legends .map( (legend) => `

${ (legend.type == "line" && `

`) || "" } ${ (legend.type == "rect" && `

`) || "" }

${legend.label}

` ) .join("")}

`; }49:T4442,class StackedBarChart { constructor() { // Defining state attributes const attrs = { id: "ID" + Math.floor(Math.random() * 1000000), svgWidth: 400, svgHeight: 350, marginTop: 15, marginBottom: 55, marginRight: 75, marginLeft: 75, grouped: true, colors: { neutral10: '#EBEBEB', }, container: "body", defaultTextFill: "#2C3E50", defaultFont: "Open Sans", data: null, chartWidth: null, chartHeight: null, duration: 1000, }; // Defining accessors this.getState = () => attrs; this.setState = (d) => Object.assign(attrs, d); // Automatically generate getter and setters for chart object based on the state properties; Object.keys(attrs).forEach((key) => { //@ts-ignore this[key] = function (_) { if (!arguments.length) { return attrs[key]; } attrs[key] = _; return this; }; }); // Custom enter exit update pattern initialization (prototype method) this.initializeEnterExitUpdatePattern(); } render() { const state = this.getState(); state.grouped = state.data.grouped; console.log('bar chart data', state.data) this.setDynamicContainer(); this.calculateProperties(); this.drawSvgAndWrappers(); this.drawRects(); state.firstRender = false; state.duration = 0; return this; } calculateProperties() { const { data, marginLeft, marginTop, marginRight, marginBottom, svgWidth, svgHeight } = this.getState(); //Calculated properties var calc = { id: null, chartTopMargin: null, chartLeftMargin: null, chartWidth: null, chartHeight: null }; calc.id = "ID" + Math.floor(Math.random() * 1000000); // id for event handlings calc.chartLeftMargin = marginLeft; calc.chartTopMargin = data.title ? 40 : marginTop; const chartWidth = svgWidth - marginRight - calc.chartLeftMargin; const chartHeight = svgHeight - marginBottom - calc.chartTopMargin; this.setState({ calc, chartWidth, chartHeight }); } drawRects() { const { chart, svg, colors, grouped, duration, data, chartWidth, chartHeight } = this.getState(); function wrap(text, width) { console.log('wrapping following text', text.text(), width) text.each(function () { var text = d3.select(this), words = text.text().split(/\s+/).reverse(), word, line = [], lineNumber = 0, lineHeight = 1.1, // ems x = text.attr("x"), y = text.attr("y"), dy = 0, //parseFloat(text.attr("dy")), tspan = text.text(null) .append("tspan") .attr("x", x) .attr("y", y) .attr("dy", dy + "em"); while (word = words.pop()) { line.push(word); tspan.text(line.join(" ")); if (tspan.node().getComputedTextLength() > width) { line.pop(); tspan.text(line.join(" ")); line = [word]; tspan = text.append("tspan") .attr("x", x) .attr("y", y) .attr("dy", ++lineNumber * lineHeight + dy + "em") .text(word); } } }); } chart.selectAll("g").remove(); if (data.title) { const title = svg._add({ tag: 'g', className: 'chart-title-group' }) .attr('transform', `translate(${40},${10})`); title._add({ tag: 'text', className: 'chart-title-text' }) .text(data.title) } const barCount = data.groups[0].values.length; const numberOfBars = Object.keys(data.groups[0]).filter(key => key.startsWith('values')).length; data.groups.forEach(group => { for (let i = 1; i <= numberOfBars; i++) { let val = 0; group[`values${i === 1 ? '' : i}`].forEach(valueObj => { valueObj.cumsum = val; val += valueObj.value; }); } }); // Y Axis const scaleY = d3.scaleLinear() .domain([data.yMin, data.yMax]) .range([chartHeight, 0]); const yAxis = d3.axisLeft(scaleY).tickFormat(d => d3.format('.2s')(d) + data.unit).ticks(5) .tickSize(-chartWidth); const yAxisWrapper = chart._add({ tag: 'g', className: 'y-axis-group' }); yAxisWrapper.transition().duration(duration).call(yAxis); yAxisWrapper.selectAll('.domain').remove(); yAxisWrapper.selectAll('text').attr('font-size', 14).attr('font-weight', 300).attr('x', -10); yAxisWrapper.selectAll('.tick line') .attr('stroke', colors.neutral10); // Right Y axis const scaleRightY = d3.scaleLinear() .domain([data.rightYMin, data.rightYMax]) .range([chartHeight, 0]); const yAxisRight = d3.axisRight(scaleRightY).tickFormat(d => { const format = d < 0 ? d3.format('.2s') : (d) => d return format(d) + data.rightUnit }).ticks(5) .tickSize(10); const yAxisRightWrapper = chart._add({ tag: 'g', className: 'y-axis-right-group' }) .attr('transform', `translate(${chartWidth})`); yAxisRightWrapper.transition().duration(duration).call(yAxisRight); yAxisRightWrapper.selectAll('.domain').remove(); yAxisRightWrapper.selectAll('text').attr('font-size', 14).attr('font-weight', 300).attr('x', -10); yAxisRightWrapper.selectAll('.tick line') .attr('stroke', colors.neutral10); // X Axis const margin = 20; const lineNames = (data.lines || []).map(d => d.values).flat().map(d => d.name + "").sort(); const barNames = data.groups.map(d => d.name + ""); const uniqNames = Array.from(new Set(lineNames.concat(barNames))); const scaleX = d3.scaleBand() .domain(uniqNames) .range([0 + margin, chartWidth - margin]) .paddingInner(grouped ? 0.2 : 0.5); const xAxis = d3.axisBottom(scaleX); const xAxisWrapper = chart._add({ tag: 'g', className: 'x-axis-group' }) .style('opacity', 0) .attr('transform', `translate(0,${chartHeight})`); const xFoWrapper = chart._add({ tag: 'g', className: 'x-fo-group' }) .attr('transform', `translate(0,${chartHeight})`); xAxisWrapper.call(xAxis); xAxisWrapper.selectAll('.tick line').remove(); xAxisWrapper.selectAll('.domain').remove(); const texts = xAxisWrapper.selectAll('text').nodes(); xAxisWrapper.selectAll('text') .attr('font-size', 14) .attr('font-weight', 300) .attr('text-anchor', data.textAnchor || 'middle') // .attr('transform', `rotate(${data.rotateX || 0})`); console.log('wrapping -----') console.log({ texts, scaleX }) xFoWrapper._add({ tag: 'foreignObject', className: 'fo-x', data: scaleX.domain() }) .attr('width', scaleX.bandwidth() * 2) .attr('height', 100) .attr('transform', function (d) { return `translate(${scaleX(d)},10)` }) ._add({ tag: 'xhtml:div', className: 'fo-div-x', data: (d) => [d] }) .style('font-size', 12 + 'px') .style('font-weight', 300) .style('line-height', '100%') .style('width', scaleX.bandwidth() * 1.2 + 'px') .style('height', '100px') .html(d => d) xAxisWrapper._add({ tag: 'line', className: 'horizontal-line' }) .attr('x1', 0) .attr('x2', chartWidth) .attr('y0', 0) .attr('y1', 0) .attr('stroke', 'black') .attr('stroke-width', 0.5); // Background-rects const barWrappers = chart._add({ tag: 'g', className: 'bar-wrappers', data: data.groups }) .attr('transform', d => `translate(${scaleX(d.name + "")},0)`); const barBackground = barWrappers._add({ tag: 'path', className: 'bar-background' }) .attr('fill', 'rgba(255,255,255,0.5)') .attr('d', (d) => { let margin = 4 if (data.isIndirect) margin = 10 const width = scaleX.bandwidth() + margin; const height = chartHeight - 1; const roundness = width / 8; return `M0 ${height} V${roundness} Q0 0 ${roundness} 0 H${width - roundness} Q${width} 0 ${width} ${roundness} V${height}z`; }); for (let i = 1; i <= numberOfBars; i++) { let barWidth = scaleX.bandwidth(); let offsetX = 0; let margin = 3; if (grouped) { barWidth = (scaleX.bandwidth() / barCount) - margin; offsetX = (i - 1) * (barWidth + margin); } else { if (numberOfBars > 1) { barWidth = barWidth / numberOfBars * (1 - (numberOfBars - 1) * 0.05); } offsetX = (scaleX.bandwidth() / numberOfBars) * (i - 1) + scaleX.bandwidth() * 0.05 * (i - 1); } const eachBar = barWrappers._add({ tag: 'path', className: `bars-${i}`, data: d => d[`values${i === 1 ? '' : i}`] }) .attr('fill', d => d.color) .attr('stroke', () => data.hasStroke ? 'white' : '') .attr('stroke-width', () => data.hasStroke ? 1 : 0) .on('mouseenter', function (e, d) { d3.select(this).attr('fill', 'black'); }) .on('mouseleave', function (e, d) { d3.select(this).attr('fill', d.color); }); eachBar.each(function (d, i, arr) { if (this._tippy) this._tippy.destroy(); console.log('setting') this._tippy = tippy(this, { allowHTML: true, content: `

${d.name}
${d.value.toLocaleString()} ${data.unit ? data.unit : ''}

` }); }); eachBar .transition() .duration(duration) .attr('d', (d, i, arr) => { let margin = 3; const height = scaleY(0) - scaleY(d.value); const y = chartHeight - scaleY(d.cumsum); let roundness = 0; if (height < roundness) { roundness = height; } let startY = chartHeight - y + roundness; let roundnessDiff = 0; if (startY > chartHeight) { roundnessDiff = startY - chartHeight; startY = chartHeight; } let endY = startY - height - roundnessDiff - roundness; if (grouped) { let gStartX = i * (barWidth + margin); let gStartY = chartHeight; let gBarHeight = chartHeight - scaleY(d.value); return `M ${gStartX}, ${gStartY} v -${gBarHeight} h ${barWidth} v ${gBarHeight}, z`; } else { return `M ${offsetX} ${startY} V${endY + roundness} Q${offsetX} ${endY} ${offsetX + roundness} ${endY} H${offsetX + barWidth - roundness} Q${offsetX + barWidth} ${endY} ${offsetX + barWidth} ${endY + roundness} V${startY}z`; } }) .each(function () { d3.select(this).lower(); }); } barBackground.lower(); /* LINE CHART */ const lineLayout = d3.line() .x(d => scaleX(d.name + "") + scaleX.bandwidth() / 2) .y(d => d.axis == 'right' ? scaleRightY(d.value) : scaleY(d.value)); const lineData = data.lines || []; lineData.forEach(line => { line.values.forEach(v => { v.axis = line.axis; }); }); const linesWrap = chart._add({ tag: 'g', className: 'lines-wrap' }); linesWrap._add({ tag: 'path', className: 'line-items', data: lineData }) .attr('d', (d) => { return lineLayout(d.values); }) .attr('stroke-dasharray', d => d.dashed ? '5,5' : '') .attr('fill', 'none') .attr('stroke-width', '3px') .attr('stroke', d => d.color || 'gray'); } drawSvgAndWrappers() { const { d3Container, svgWidth, svgHeight, defaultFont, calc, data, chartWidth, chartHeight } = this.getState(); // Draw SVG const svg = d3Container ._add({ tag: "svg", className: "svg-chart-container" }) .style('overflow', 'visible') .attr("width", svgWidth) .attr("height", svgHeight) .attr("font-family", defaultFont); //Add container g element var chart = svg ._add({ tag: "g", className: "chart" }) .attr( "transform", "translate(" + calc.chartLeftMargin + "," + calc.chartTopMargin + ")" ); this.setState({ chart, svg }); } initializeEnterExitUpdatePattern() { d3.selection.prototype._add = function (params) { var container = this; var className = params.className; var elementTag = params.tag; var data = params.data || [className]; var exitTransition = params.exitTransition || null; var enterTransition = params.enterTransition || null; // Pattern in action var selection = container.selectAll("." + className).data(data, (d, i) => { if (typeof d === "object") { if (d.id) { return d.id; } } return i; }); if (exitTransition) { exitTransition(selection); } else { selection.exit().remove(); } const enterSelection = selection.enter().append(elementTag); if (enterTransition) { enterTransition(enterSelection); } selection = enterSelection.merge(selection); selection.attr("class", className); return selection; }; } setDynamicContainer() { const attrs = this.getState(); //Drawing containers var d3Container = d3.select(attrs.container); var containerRect = d3Container.node().getBoundingClientRect(); if (containerRect.width > 0) attrs.svgWidth = containerRect.width; let resize = () => { var containerRect = d3Container.node().getBoundingClientRect(); if (containerRect.width > 0) attrs.svgWidth = containerRect.width; this.render(); } d3.select(window).on("resize." + attrs.id, () => { resize() }); if (!attrs.resized && attrs.data) { setTimeout(() => { resize() }, 500) } if (attrs.data) { attrs.resized = true; } this.setState({ d3Container }); } }4a:[] 45:{"id":"9d717852b9ae01cf","slug":null,"title":"Simple stacked bar chart","thumbnail":"dfbf360e37c4c576d1e49d3921f1ea585a361ed071f37fffe120236a63ef6ebf","access_level":"public","create_time":"$D2024-10-08T19:11:34.210Z","update_time":"$D2024-10-08T19:15:08.288Z","view_time":null,"first_public_time":"$D2024-10-08T19:14:20.015Z","has_unpublished_edits":null,"fork":{"id":"62502b8a3ca4dbf2","slug":null,"title":"Simple stacked bar chart","owner":{"id":"fcd7e4188e1df970","login":"bumbeishvili","name":"David B."}},"stars":0,"starred":false,"owner":{"type":"team","id":"620d4e98e45cb6cb","login":"lashapor","name":"Lasha","avatar_url":"https://avatars-next.observableusercontent.com/bb3207c31c039b4f8fe79b3213f2b8359afaabee593ca4ef5089eabba46fce9b","tier":"starter_2024","bio":"","following":false},"version":131,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"a542e9c8821cfd4b","login":"lashapor","name":"Lasha","avatar_url":"https://avatars-next.observableusercontent.com/bb3207c31c039b4f8fe79b3213f2b8359afaabee593ca4ef5089eabba46fce9b","tier":null,"bio":"","following":false}],"members":[{"type":"team","id":"620d4e98e45cb6cb","login":"lashapor","name":"Lasha","avatar_url":"https://avatars-next.observableusercontent.com/bb3207c31c039b4f8fe79b3213f2b8359afaabee593ca4ef5089eabba46fce9b","tier":"starter_2024","role":"editor"},{"type":"individual","id":"a542e9c8821cfd4b","login":"lashapor","name":"Lasha","avatar_url":"https://avatars-next.observableusercontent.com/bb3207c31c039b4f8fe79b3213f2b8359afaabee593ca4ef5089eabba46fce9b","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Simple stacked bar chart","cells":[{"id":0,"value":"# Simple stacked bar chart","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":34,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"data = JSON.parse(dataStr)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"$48","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"chart = {\n const legendsHtml = generateLegendsHtml(\n JSON.parse(JSON.stringify(data)).legends\n );\n const container = html`

\n\n${legendsHtml || \"\"}\n

`;\n yield container;\n return new StackedBarChart()\n .container(container)\n .svgHeight(400)\n .data(JSON.parse(JSON.stringify(data)))\n .render();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"tippy = require(\"tippy.js@6.3.7\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4a","stdlib":"1"}} 46:"$45:body"