Plotly domain variable explained (Multiple graphs)

Question

I am looking at the 'Pie Chart Subplots' section (last one on page) of the following tutorial https://plot.ly/python/pie-charts/.

I cant figure out how to understand the domain variable when it comes to plotting multiple graphs at once. For instance:

        {
        'labels': ['1st', '2nd', '3rd', '4th', '5th'],
        'values': [38, 27, 18, 10, 7],
        'type': 'pie',
        'name': 'Starry Night',
        'marker': {'colors': ['rgb(56, 75, 126)',
                              'rgb(18, 36, 37)',
                              'rgb(34, 53, 101)',
                              'rgb(36, 55, 57)',
                              'rgb(6, 4, 4)']},
        'domain': {'x': [0, .48],
                   'y': [0, .49]},
        'hoverinfo':'label+percent+name',
        'textinfo':'none'
    },

will plot a pie chart in the bottom left coordinates.

Can someone explain how the domain variable (and its x and y components) works in practice in plotly?

Answer 1

Let's just use Javascript because it can be executed here. The domain attribute is identical in Python and Javascript.

From the documentation:

domain

x (array)

default: [0, 1]

Sets the horizontal domain of this pie trace (in plot fraction). Each object has one or more of the keys listed below.

The first member of the array is the start position and the 2nd member is the end position.

For x 0 means all the way to the left and 1 is all the way to right.

For y 0 is top and 1 is bottom.

e.g. the upper left quadrant would be x = [0, 0.5] and y = [0, 0.5]

---

If you have multiple plots, e.g. in the example below there are two divs with 4 plots each, the domain of each plot specifies which space is occupied by it. In the first example each plot gets a quarter of the available space (i.e. x and y are set to 0 to 0.5 resp. 0.5 to 1).

In the second example the domain of the last plot overlaps with the other domains (0.25 to 0.75).

In the third example the domain of the last plot is bigger and overlaps with the rest (0 to 0.75).

In short, domain just specifies which space of the total plot area is occupied by the subplot.

var allValues = [
  [50, 30, 20],
  [45, 30, 25],
  [55, 25, 20],
  [50, 15, 35]
];

var data = [{
  values: allValues[0],
  type: 'pie',
  domain: {
    x: [0, .5],
    y: [0, .5]
  },
}, {
  values: allValues[1],
  type: 'pie',
  domain: {
    x: [0.5, 1],
    y: [0, .5]
  }
}, {
  values: allValues[2],
  type: 'pie',
  domain: {
    x: [0, .5],
    y: [.5, 1]
  }
}, {
  values: allValues[3],
  type: 'pie',
  domain: {
    x: [0.5, 1],
    y: [0.5, 1]
  },
}];



Plotly.newPlot('myDiv', data);
data[3].domain.x = [0.25, 0.75];
data[3].domain.y = [0.25, 0.75];

Plotly.newPlot('myDiv2', data);

data[3].domain.x = [0.0, 0.75];
data[3].domain.y = [0.0, 0.75];
Plotly.newPlot('myDiv3', data);

<div id='myDiv'></div>
<div id='myDiv2'></div>
<div id='myDiv3'></div>

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>