option to force scales of bar charts on left and top to the same sizes

[trebor]

currently the scale on the left bar chart is not the same as the scale on the top. in cases where these bar charts show the same unit, it would be great to be able to coordinate these scales such that a bar of some size on the left has the same numeric value for a bar of the same size on the top.

this has been confusing for my users and specifically caused key insights to be overlooked.

one simple implementation would be to set the height, in pixels, of the top bar chart to be the width, in pixels, of the left bar chart. however this risks rather a lot of wasted white space if these two scales are significantly different. a more sophisticated approach would be to compute the .domains() of these two scales, and the .range() of the scale on the left in the same way you are currently, but set the .range() on the top scales such that equal values show up as the same size on both charts.

please forgive me if an option like this already exists. i've not been able to find an exhaustive list of options anywhere in the doc, and currently hunt through the story book for options. if that list is somewhere, even if it is in code, i'd love to see it.

thank you! :)

[trebor]

i found heightRatios but i can't for the life of me figure out how to compute ratios that fix this problem. i tried this:

computeChartHeightRatios = (
  sets,
  minCombinations = 2,
) => {
  const leftMax = d3.max(sets, d => d.cardinality);
  const topMax = d3.max(
    UpSetJS.generateCombinations(sets)
      .filter(d => d.sets.size >= minCombinations)
      .map(d => d.cardinality)
  );
  const ratio = (topMax / leftMax);
  return [ratio, 1 - ratio];
}

and many many different versions of this. even if i drop in magic numbers, they don't work as soon as the chart height changes. sadly for my uses case i can't really use the chart without aligning these scales. :\

[sgratzl]

can you create a sketch of what you wanna achieve and how it relates to the chart dimension

[trebor]

sure!

i need to ensure that distance A (0 to 5 on "Set Size" scale) is the exact same number of pixels as distance B (0 to 5 on the "Intersection Size" scale).

[sgratzl]

isn't it in the end just enforcing special ratios or setting the width/height such that the constraint:

(width - padding*2) * wRatio == (height - padding*2) * hRatio

is fulfilled

e.g., https://codepen.io/sgratzl/pen/MWeVBKg?editors=0010

[trebor]

so yes you have solved this problem for one static case. i don't know where you got the values for:

  const widthRatios = [0.18, 0.12, 0.7];
  const heightRatios = [0.6, 0.4];

and i don't know how i would figure any of this out from the documentation.

but all of that aside, this is a fundamental data visualization issue. surely you get that?

i'll see if i can generalize your solution and plug it into my code, but gosh it seems like having this logic built in would make sense.

[sgratzl]

v1.7.0 allows to specify both the maximal scale value as well as the precise pixel values for the set/combination areas. Thus, with e.g.

https://codepen.io/sgratzl/pen/PoGbLOz?editors=0010

[trebor]

this is really great! thank you! 🙏🏻