[JAVA] What is the domain attribute written in Plotly's Layout?

On this subject, the English documentation only contains code and execution results, It was a little difficult to understand, so I will leave the explanation.

How to use the domain attribute
  1. Position specification when you want to place multiple graphs on one image
  2. (Sharing x-axis or y-axis) Position specification when you want to overlay multiple data in the same graph. This requires setting and adjusting axes in addition to domain, so explanations are omitted.
  3. Please let me know if you have any other ideas to use at such times!

Reference document https://plotly.com/javascript/subplots/#multiple-custom-sized-subplots

This is a JavaScript document, but you can use it as a reference when writing in Python.

In this multiple-custom-sized-subplots </ b> item When displaying a plurality of graphs in one given area of the above-mentioned use 1. Arrangement and size </ b> are set.

You can check the drawing of JS and HTML code with CodePen immediately, so please give it a try.

Actual code (JS) 
var plot1 = {
  x: [1, 2],
  y: [1, 2],
  type: 'scatter',
  name: '(plot1)'
};

var plot2 = {
  x: [1, 2],
  y: [1, 2],
  type: 'scatter',
  name: '(plot2)',
  xaxis: 'x2',
  yaxis: 'y2'
};

var plot3 = {
  x: [1, 2],
  y: [1, 2],
  type: 'scatter',
  name: '(plot3)',
  xaxis: 'x3',
  yaxis: 'y3'
};

var data = [plot1, plot2, plot3];

var layout = {
  title: 'Customize the size of multiple plots',
  xaxis: {
    domain: [0, 0.45],
    anchor: 'y1'
  },
  yaxis: {
    domain: [0, 1],
    anchor: 'x1'
  },
  xaxis2: {
    domain: [0.55, 1],
    anchor: 'y2'
  },
  yaxis2: {
    domain: [0.55, 1],
    anchor: 'x2'
  },
  xaxis3: {
    domain: [0.75, 1],
    anchor: 'y3'
  },
  yaxis3: {
    domain: [0, 0.45],
    anchor: 'x3'
  },
};

Plotly.newPlot('myDiv', data, layout);

Actual code (HTML) ```
```

Drawing result It is arranged like this. ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/462013/2a4bcb59-2fcb-8e83-5306-06f652f73956.png)

Explanation of the value specified by domain domain means domain. You can see that both xaxis: and yaxis: have the domain attribute. Set the coordinate range in each of these domains.

Description in Layout below

  xaxis: {
    domain: [0, 0.45],
    anchor: 'y1'
  },
  yaxis: {
    domain: [0, 1],
    anchor: 'x1'
  },

When the longest of each of the horizontal (x) and vertical (y) of the given drawing area is 1 </ b> Specify as a decimal value.

In the plot1 example above, The x-axis domain: [0, 0.45] </ b> is in the range 0 to 0.45 </ b> The y-axis domain: [0, 1] </ b> is supposed to be in the range 0 to 1 </ b>. スクリーンショット 2020-11-08 7.54.13.png

  • Since the size of the drawn window has changed, this image looks like it has been stretched a little horizontally.

By the way When I first looked at the docs, numbers like 0.55 and 0.75 were confusing, so I set them to 0.5 and 1. Then, as shown below, the end of the graph and the start of another axis are covered. It seems that it is standard to leave about 10% between graphs.

image.png

Finally Some people may have understood it just by looking at the code and drawing results, At first glance, I was confused because [0.55, 1] looked like a magic number. The basics of mathematics are important!

Note: If you have any questions about how to handle multiple graphs, see here in Plotly's JavaScript documentation [Try It On Code Pen]. It is recommended to check the operation.

Recommended Posts