explain grid subplots and add examples in pie charts examples

Author: michaelbabyn

_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);

_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,16 +77,17 @@
     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'
 }];
 
 var layout = {
   height: 400,
-  width: 500
+  width: 500,
+  grid: {rows: 2, columns: 2}
 };
 
 Plotly.newPlot('myDiv', data, layout);