What was the last time you tried to make a grouped column chart with variable number of categories in user selection? Im sure you have struggled with the scale calculations and with keeping the grouped columns centered on the ticks on the axis ?
I tried understanding what they say here : mbostock and also tried to make sense what they narrate here ordinal scales. You need not comprehend the entire linear mathematics to grasp the idea behind this diagram
Building the chart with fixed number of categories on the X-axis would be one time calculation. For variable number of categories each time your code then needs to adjust to changes and center the group of columns on the axis tick
We have a side panel that lets user select the skills needed to be analysed for the strength of facts (ex: count of resources, number of trainings, ..) with a limit of 5 categories that can be selected maximum at any time. For every selection the browser should redraw the graph and render the graphical facts.
While the above combination for padding did work out well for 4 / 4+ categories it seems to fail as the categories reduce. Like here for one category the column group is slightly offset and demands re-calculation for the padding and outer padding.
Change in the categories demands re-calculation of the outer padding. Rather even the padding can be adjusted and so can the bar width be , but that would mean we have too many moving parts here and hence an un-deterministic equation.
Lets keep the Range Interval, bar width , padding anchored to a constant value since changing them would mean we are changing the shape of diagram that may / may not be very appealing to the user.
(2*op)+[(n-1)*p]*rb + (n*rb) =extent
- op: outer padding
- p: padding
- rb: range band width
- n: number of categories
- extent: full usable width along with the geometry is rendered
Come to think of it , once you get your mind around this equation it would make sense to devise an equation to re-calculate the outer padding.
Snug fit the max case , reduce the moving parts further
Here is what I propose, for the max number of categories =5, lets snug fit without any outer padding, that gets ‘op’ out of the consideration to evaluate a ergonomic range band width.
Substituting op=0, n=5, extent = 770 is my case for the plot I have drawn.
rb = 132.7586… approximately ( to relate this to the linear diagram above, this is the step -padding , or the space for drawing the rectangle groups). I had chosen bar width = 20 with 5 subcategories again , I have 32.7586 to spare for each of groups.
Arriving at the equation for outer padding
op = ((extent – (n * rb) – ((n – 1) * padding * rb)) / 2)
Algebra 101 reveals the outer padding equation.
but wait you missed this , ain’t it ? – the outer padding is percentage of range band width . We further correct our equation here
percentOp = op / rb
And that would give you the custom scale to define the outer padding for each of the categories count.
Whats your view ? was this any useful ?
Would love to hear from you.