Subplot/Grid of charts in a table

[AbdealiLoKo]

I was looking at the documentation at https://plot.ly/javascript/subplots/
And wanted to create a table of charts, something like:

Where I have multiple charts which describe an item that I have. And then I want to show each row by going through the items.

I tried implementing that with subplots/layout.grid, and first created some traces:

Here are the traces I defined fro both my rows (just dummy data):

Click to view the trace definitions

var row1 = {
  scatter: {
    type: 'scatter',
    x: [1, 2, 3],
    y: [4, 5, 6],
    xaxis: 'x1',
    yaxis: 'y1'
  }, bar: {
    type: 'bar',
    x: ['giraffes', 'orangutans', 'monkeys'],
    y: [20, 14, 23],
    xaxis: 'x2',
    yaxis: 'y2'
  }, table: {
    type: 'table',
    cells: {values: [20, 30, 40]},
    header: {values: [50, 60, 70]},
    xaxis: 'x3',
    yaxis: 'y3'
  }, pie: {
    type: 'pie',
    values: [19, 26, 55],
    labels: ['Residential', 'Non-Residential', 'Utility'],
    xaxis: 'x4',
    yaxis: 'y4'
  }
}

var row2 = {
  scatter: {
    type: 'scatter',
    x: [3, 4, 1],
    y: [2, 5, 9],
    xaxis: 'x5',
    yaxis: 'y5'
  }, bar: {
    type: 'bar',
    x: ['giraffes', 'orangutans', 'monkeys'],
    y: [30, 12, 34],
    xaxis: 'x6',
    yaxis: 'y6'
  }, table: {
    type: 'table',
    cells: {values: [10, 50, 20]},
    header: {values: [30, 40, 40]},
    xaxis: 'x7',
    yaxis: 'y7'
  }, pie: {
    type: 'pie',
    values: [4, 6, 9],
    labels: ['Residential', 'Non-Residential', 'Utility'],
    xaxis: 'x8',
    yaxis: 'y8'
  }
}

Now ....

Doing:

Plotly.newPlot(
  gd,
  [row1.scatter, row1.bar, row2.scatter, row2.bar],
  {
    grid: {rows: 2, columns: 2, pattern: 'independent'},
    showlegend: false
  });

just breaks the view.

Doing:

Plotly.newPlot(
  gd,
  [row1.scatter, row1.bar, row2.scatter, row2.bar],
  {
    grid: {rows: 2, columns: 4, pattern: 'independent'},
    showlegend: false
  });

It seems to work, but shows a 2x2 grid on the left side of the screen (with the latter 2 columns empty)

I don't fully understand the behavior here and what it is doing.
Maybe this is just cause I don't understand what the configs I need to provide exactly are?

You can check out my trials at:
https://codepen.io/AbdealiJK/pen/EBXBzO

[etpinard]

Hi @AbdealiJK - please see https://codepen.io/etpinard/pen/PrKpBj

A few take-home points:

• Setting a layout.grid creates placeholders for cartesian axes starting from xy at the top-left of the plot area to then x2y2 left of that and down to xNyN at the bottom-right
• Simultaneously, layout.grid creates domain placeholders for non-cartesian subplots as well as for subplot-less traces that set their own domain (e.g. table and pie)
• Setting xaxis and yaxis in table and pie traces has no effect, to incorporate them into the grid, set domain: {row: n, column: m}

[AbdealiLoKo]

I see, that clarifies it a lot better. I got very confused with the difference in behavior of the xaxis/yaxis and row/column specification - but I understand now that one is for traces with cartesian and the other is for non-cartesian.

It would be awesome if this was documented more explicitly somewhere!
Or maybe if something can be though of to respect domain: {row: R, column: C} for cartesian too and internally convert them to xaxis: x${R * layout.grid.columns + C} and yaxis: y${R * layout.grid.columns + C}

That way to setup a grid/table view using subplots, someone needs to just set the domain correctly.
And is they want shared axes and so on for cartesian they can use xaxis/yaxis themselves ?

Edit: Note, that I got quite confused with the difference between FunnelArea and Funnel. Funnel is cartesian based and FunnelArea is not (but that just seems to be an implementation detail?).
My code for subplots was working fine with FunnelArea (using domain row/col) and stopped working when I switched to Funnel

[etpinard]

@AbdealiJK you might be interested in commenting on #3507 - where we're planning out potential layout.grid improvements. As your ticket won't result in a PR, I'll merge it with #3507

---

FunnelArea and Funnel.

Here's some relevant info:

plotly.js/src/traces/funnel/index.js

Lines 31 to 37 in a6393bc

	description: [
	'Visualize stages in a process using length-encoded bars. This trace can be used',
	'to show data in either a part-to-whole representation wherein each item appears',
	'in a single stage, or in a "drop-off" representation wherein each item appears in',
	'each stage it traversed. See also the "funnelarea" trace type for a different',
	'approach to visualizing funnel data.'
	].join(' ')

plotly.js/src/traces/funnelarea/index.js

Lines 30 to 35 in a6393bc

	description: [
	'Visualize stages in a process using area-encoded trapezoids. This trace can be used',
	'to show data in a part-to-whole representation similar to a "pie" trace, wherein',
	'each item appears in a single stage. See also the "funnel" trace type for a different',
	'approach to visualizing funnel data.'
	].join(' ')