I am interested in creating a diverging stacked bar chart to visualize some survey data. I have attached a sample notebook with where I am at so far. What I would like to do is transform each bar to be aligned such that the “Neutral” category is centered on the x-axis about zero. I am using the Ro…

I’ve completely rewritten the notebook, with details for a better answer to this issue [image] Diverging Stacked Bars Our dataset contains hundreds of answers to a survey. There are five questions, and the answers rank from negative/red (“Strongly Disagree”, “Disagree”), then neutral/g…

I can’t think of an easy way to center the neutral category… but you can create diverging stacked bar charts by returning a negative value (e.g., a negative count) from the group reducer. For example: [Screen Shot 2022-01-03 at 8.17.39 AM] Plot.plot({ facet: { data: data, y: "Question" …

This is a common requirement, unfortunately quite difficult to address with the current stacking options. Here’s a suggestion: Diverging Stacked Bar Chart Help / Fil / Observable ; but it’s probably worth opening an issue to make this feasible as a stacking option?

I love your solution to this! - I had one question/difficulty with the solution - which is that if the questions are long, they are truncated in the plot so as to be unreadable. I’d love to be to able to show the question text, and ensure the order of the plot matches the order of the questions. I’…

Hello, I’d suggest: a larger left margin a larger width for the Plot a tickFormat that truncates labels that are too long: marginLeft: 300, width: 800, y: { tickSize: 0, tickFormat: d => d.length > 52 ? d.slice(0,48).trim().concat("…") : d },

“marginLeft” - OMG I spent so long trying to find out what that setting might be. I didn’t put it at the top level, though, I was putting margins, padding, width etc in the “y” section. Legend, thank you!

I wasn’t able to find a way to keep the order of the questions in the chart, but did a bodge, putting the question number at the start of the question text so that when sorted alphabetically it did the right thing. e.g. “01. blah”, “02. example”.

You might want to pass the list of questions (as an ordered array) as the domain of the y scale. (The default domain is computed from the values encountered, then sorted.)

I feel a bit bad asking one final thing - the labels are aligned right, but is it possible to have the y tick labels aligned neatly on the left? I tried “labelAnchor”, but that didn’t seem to work - it said “invalid labelAnchor: left” I was looking at the code here: plot/axis.js at 0df32cd992322619…

A bit of a hack, but you can do this with a “right” y-axis and some negative tickPadding. [image] Plot.plot({ marginLeft: 300, width: 900, x: { tickFormat: Math.abs, label: "# of answers" }, y: { axis: "right", tickSize: 0, tickPadding: -860, tickFormat: (d) => (d.length > …

Diverging Stacked Bar Chart in Plot

Help

Fil March 17, 2022, 2:11pm 5

~~I’ve completely rewritten the notebook, with details for a better answer to this issue~~

EDIT: now working towards an even better resolution.

Topic		Replies	Views
Label either side of origin in barchart at 0 Help	2	334	September 6, 2023
Custom tooltip label with stacked chart Help	4	182	October 7, 2024
Plot.text on Plot.stackX Introduce yourself	2	313	January 14, 2024
Some advice on learning how to dissect a chart's code Help	2	397	September 1, 2022
How to display text in each level of a stacked bar chart made with Plot Help	2	1365	May 7, 2022

Diverging Stacked Bar Chart in Plot

Related topics