From 27d80bef729129cbbeec636a2a9e49a1dab8ac9c Mon Sep 17 00:00:00 2001 From: michaelbabyn Date: Tue, 2 Oct 2018 15:24:12 -0400 Subject: [PATCH 1/3] explain grid subplots and add examples in pie charts examples --- .../basic/pie/2015-08-10-donut-chart.html | 12 +++++------ .../pie/2015-08-10-pie-chart-subplots.html | 21 ++++++++++--------- 2 files changed, 17 insertions(+), 16 deletions(-) diff --git a/_posts/plotly_js/basic/pie/2015-08-10-donut-chart.html b/_posts/plotly_js/basic/pie/2015-08-10-donut-chart.html index d6d7da7329e4..525c4ee1ed15 100644 --- a/_posts/plotly_js/basic/pie/2015-08-10-donut-chart.html +++ b/_posts/plotly_js/basic/pie/2015-08-10-donut-chart.html @@ -11,9 +11,7 @@ var data = [{ values: [16, 15, 12, 6, 5, 4, 42], labels: ['US', 'China', 'European Union', 'Russian Federation', 'Brazil', 'India', 'Rest of World' ], - domain: { - x: [0, .48] - }, + domain: {column: 0}, name: 'GHG Emissions', hoverinfo: 'label+percent+name', hole: .4, @@ -23,7 +21,7 @@ labels: ['US', 'China', 'European Union', 'Russian Federation', 'Brazil', 'India', 'Rest of World' ], text: 'CO2', textposition: 'inside', - domain: {x: [.52, 1]}, + domain: {column: 1}, name: 'CO2 Emissions', hoverinfo: 'label+percent+name', hole: .4, @@ -52,8 +50,10 @@ y: 0.5 } ], - height: 600, - width: 600 + height: 400, + width: 600, + showlegend: false, + grid: {rows: 1, columns: 2} }; Plotly.newPlot('myDiv', data, layout); diff --git a/_posts/plotly_js/basic/pie/2015-08-10-pie-chart-subplots.html b/_posts/plotly_js/basic/pie/2015-08-10-pie-chart-subplots.html index 6fbc4a88876f..f451c7f5eed8 100644 --- a/_posts/plotly_js/basic/pie/2015-08-10-pie-chart-subplots.html +++ b/_posts/plotly_js/basic/pie/2015-08-10-pie-chart-subplots.html @@ -7,7 +7,7 @@ sitemap: false arrangement: horizontal markdown_content: | - In order to create pie chart subplots, you need to use the [domain](https://plot.ly/javascript/reference/#pie-domain) attribute. It is important to note, that the `X` array sets the horizontal position whilst the `Y` array sets the vertical. For example, `x: [0,0.5], y : [0,0.5]` would mean the bottom left position of the plot. + In order to create pie chart subplots, you need to use the [domain](https://plot.ly/javascript/reference/#pie-domain) attribute. `domain` allows you to place each trace on a `grid` of rows and columns defined in the layout or within a rectangle defined by `X` and `Y` arrays. The example below uses the `grid` method (with a 2 x 2 grid defined in the layout) for the first three traces and the X and Y method for the fourth trace. --- var allLabels = ['1st', '2nd', '3rd', '4th', '5th']; @@ -35,8 +35,8 @@ colors: ultimateColors[0] }, domain: { - x: [0, .48], - y: [0, .49] + row: 0, + column: 0 }, hoverinfo: 'label+percent+name', textinfo: 'none' @@ -49,8 +49,8 @@ colors: ultimateColors[1] }, domain: { - x: [0.52, 1], - y: [0, .49] + row: 1, + column: 0 }, hoverinfo: 'label+percent+name', textinfo: 'none' @@ -63,8 +63,8 @@ colors: ultimateColors[2] }, domain: { - x: [0, .48], - y: [.51, 1] + row: 0, + column: 1 }, hoverinfo: 'label+percent+name', textinfo: 'none' @@ -77,8 +77,8 @@ colors: ultimateColors[3] }, domain: { - x: [0.52, 1], - y: [0.52, 1] + x: [0.52,1], + y: [0, 0.48] }, hoverinfo: 'label+percent+name', textinfo: 'none' @@ -86,7 +86,8 @@ var layout = { height: 400, - width: 500 + width: 500, + grid: {rows: 2, columns: 2} }; Plotly.newPlot('myDiv', data, layout); From 10a2f40215b8a9380a9eec619db568792a3cb003 Mon Sep 17 00:00:00 2001 From: michaelbabyn Date: Tue, 2 Oct 2018 17:21:54 -0400 Subject: [PATCH 2/3] use grid method in more of the examples from js subplots --- .../pie/2015-08-10-pie-chart-subplots.html | 2 +- .../2015-04-09-multiple-subplots.html | 21 +------------------ .../2015-04-09-shared-axes-subplots.html | 16 +++++--------- .../subplots/2015-04-09-simple-subplot.html | 4 +--- .../subplots/2015-04-09-stacked-subplots.html | 11 +++++----- 5 files changed, 13 insertions(+), 41 deletions(-) diff --git a/_posts/plotly_js/basic/pie/2015-08-10-pie-chart-subplots.html b/_posts/plotly_js/basic/pie/2015-08-10-pie-chart-subplots.html index f451c7f5eed8..69e0ef3f0f15 100644 --- a/_posts/plotly_js/basic/pie/2015-08-10-pie-chart-subplots.html +++ b/_posts/plotly_js/basic/pie/2015-08-10-pie-chart-subplots.html @@ -7,7 +7,7 @@ sitemap: false arrangement: horizontal markdown_content: | - In order to create pie chart subplots, you need to use the [domain](https://plot.ly/javascript/reference/#pie-domain) attribute. `domain` allows you to place each trace on a `grid` of rows and columns defined in the layout or within a rectangle defined by `X` and `Y` arrays. The example below uses the `grid` method (with a 2 x 2 grid defined in the layout) for the first three traces and the X and Y method for the fourth trace. + In order to create pie chart subplots, you need to use the [domain](https://plot.ly/javascript/reference/#pie-domain) attribute. `domain` allows you to place each trace on a [grid](https://plot.ly/javascript/reference/#layout-grid) of rows and columns defined in the layout or within a rectangle defined by `X` and `Y` arrays. The example below uses the `grid` method (with a 2 x 2 grid defined in the layout) for the first three traces and the X and Y method for the fourth trace. --- var allLabels = ['1st', '2nd', '3rd', '4th', '5th']; diff --git a/_posts/plotly_js/subplot/subplots/2015-04-09-multiple-subplots.html b/_posts/plotly_js/subplot/subplots/2015-04-09-multiple-subplots.html index 56a33bb21461..06613633ae95 100755 --- a/_posts/plotly_js/subplot/subplots/2015-04-09-multiple-subplots.html +++ b/_posts/plotly_js/subplot/subplots/2015-04-09-multiple-subplots.html @@ -40,26 +40,7 @@ var data = [trace1, trace2, trace3, trace4]; var layout = { - xaxis: {domain: [0, 0.45]}, - yaxis: {domain: [0, 0.45]}, - xaxis4: { - domain: [0.55, 1], - anchor: 'y4' - }, - xaxis3: { - domain: [0, 0.45], - anchor: 'y3' - }, - xaxis2: {domain: [0.55, 1]}, - yaxis2: { - domain: [0, 0.45], - anchor: 'x2' - }, - yaxis3: {domain: [0.55, 1]}, - yaxis4: { - domain: [0.55, 1], - anchor: 'x4' - } + grid: {rows: 2, columns: 2, pattern: 'independent'}, }; Plotly.newPlot('myDiv', data, layout); diff --git a/_posts/plotly_js/subplot/subplots/2015-04-09-shared-axes-subplots.html b/_posts/plotly_js/subplot/subplots/2015-04-09-shared-axes-subplots.html index 780dfaa62093..7ade6454758a 100755 --- a/_posts/plotly_js/subplot/subplots/2015-04-09-shared-axes-subplots.html +++ b/_posts/plotly_js/subplot/subplots/2015-04-09-shared-axes-subplots.html @@ -41,17 +41,11 @@ var data = [trace1, trace2, trace3, trace4]; var layout = { - xaxis: {domain: [0, 0.45]}, - yaxis: {domain: [0, 0.45]}, - xaxis4: { - domain: [0.55, 1], - anchor: 'y4' - }, - xaxis2: {domain: [0.55, 1]}, - yaxis3: {domain: [0.55, 1]}, - yaxis4: { - domain: [0.55, 1], - anchor: 'x4' + grid: { + rows: 2, + columns: 2, + subplots:[['xy','x2y'], ['xy3','x4y4']], + roworder:'bottom to top' } }; diff --git a/_posts/plotly_js/subplot/subplots/2015-04-09-simple-subplot.html b/_posts/plotly_js/subplot/subplots/2015-04-09-simple-subplot.html index 4a1a21fe0004..f67bceb382a7 100755 --- a/_posts/plotly_js/subplot/subplots/2015-04-09-simple-subplot.html +++ b/_posts/plotly_js/subplot/subplots/2015-04-09-simple-subplot.html @@ -25,9 +25,7 @@ var data = [trace1, trace2]; var layout = { - xaxis: {domain: [0, 0.45]}, - yaxis2: {anchor: 'x2'}, - xaxis2: {domain: [0.55, 1]} + grid: {rows: 1, columns: 2, pattern: 'independent'}, }; Plotly.newPlot('myDiv', data, layout); diff --git a/_posts/plotly_js/subplot/subplots/2015-04-09-stacked-subplots.html b/_posts/plotly_js/subplot/subplots/2015-04-09-stacked-subplots.html index 9856c7183e60..7a9cee35404b 100755 --- a/_posts/plotly_js/subplot/subplots/2015-04-09-stacked-subplots.html +++ b/_posts/plotly_js/subplot/subplots/2015-04-09-stacked-subplots.html @@ -32,12 +32,11 @@ var data = [trace1, trace2, trace3]; var layout = { - yaxis: {domain: [0, 0.266]}, - legend: {traceorder: 'reversed'}, - xaxis3: {anchor: 'y3'}, - xaxis2: {anchor: 'y2'}, - yaxis2: {domain: [0.366, 0.633]}, - yaxis3: {domain: [0.733, 1]} +grid: { + rows: 3, + columns: 1, + pattern: 'independent', + roworder: 'bottom to top'} }; Plotly.newPlot('myDiv', data, layout); From e5a98e1de2339e235704e91bbd4d07a9c8d60504 Mon Sep 17 00:00:00 2001 From: michaelbabyn Date: Tue, 2 Oct 2018 17:33:48 -0400 Subject: [PATCH 3/3] add redirect from javascript/subplot-charts/ to javascript/#multiple-axes-subplots-and-insets --- _posts/plotly_js/redirects/2018-10-02-js-subplots.html | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 _posts/plotly_js/redirects/2018-10-02-js-subplots.html diff --git a/_posts/plotly_js/redirects/2018-10-02-js-subplots.html b/_posts/plotly_js/redirects/2018-10-02-js-subplots.html new file mode 100644 index 000000000000..3fa21a845af3 --- /dev/null +++ b/_posts/plotly_js/redirects/2018-10-02-js-subplots.html @@ -0,0 +1,6 @@ +--- +permalink: javascript/subplot-charts/ +redirect_to: javascript/#multiple-axes-subplots-and-insets +sitemap: false +--- +