docs: update README and add figure generation script

lib/node_modules/@stdlib/plot/vega/padding/ctor/README.md

@@ -26,6 +26,8 @@ limitations under the License.
 
 <section class="intro">
 
+A padding configuration defines the spacing (in pixels) around the main chart group area. It determines the gap between the boundaries of the root visualization area and the inner rendering layout.
+
 </section>
 
 <!-- /.intro -->
@@ -47,28 +49,32 @@ Returns a padding instance.
 ```javascript
 var padding = new Padding();
 // returns <Padding>
+
+padding = new Padding({
+    'left': 80,
+    'right': 80,
+    'top': 80,
+    'bottom': 80
+});
+// returns <Padding>
 ```
 
-The constructor accepts the following `options`:
+<!-- <figure class="figure" align="center" label="fig:padding" src="./docs/img/figure_padding.svg" alt="A visualization showing padding margins around the main chart area."> -->
+
+<div class="figure" align="center" data-figure="fig:padding">
+    <img src="https://cdn.jsdelivr.net/gh/gururaj1512/stdlib@eb64ecc323cbaabf1a0191aea50fcb6ab65e750e/lib/node_modules/@stdlib/plot/vega/padding/ctor/docs/img/figure_padding.svg" alt="A visualization showing padding margins around the main chart area.">
+    <br>
+</div>
+
+<!-- </figure> -->
+
+The constructor accepts the following options:
 
 -   **bottom**: bottom padding (in pixels). Default: `0`.
 -   **left**: left padding (in pixels). Default: `0`.
 -   **right**: right padding (in pixels). Default: `0`.
 -   **top**: top padding (in pixels). Default: `0`.
 
-```javascript
-var padding = new Padding({
-    'bottom': 10,
-    'left': 20,
-    'right': 30,
-    'top': 40
-});
-// returns <Padding>
-
-var v = padding.top;
-// returns 40
-```
-
 * * *
 
 ### Writable Properties
@@ -77,70 +83,166 @@ var v = padding.top;
 
 #### Padding.prototype.bottom
 
-Bottom padding (in pixels). Default: `0`.
+Bottom padding (in pixels).
 
 ```javascript
-var padding = new Padding();
-
-// Set:
-padding.bottom = 10;
+var padding = new Padding({
+    'left': 80,
+    'right': 80,
+    'top': 80,
+    'bottom': 0
+});
 
-// Get:
 var v = padding.bottom;
-// returns 10
+// returns 0
+
+padding.bottom = 100;
+
+v = padding.bottom;
+// returns 100
 ```
 
+<!-- <figure class="figure" align="center" label="fig:padding_bottom_0" src="./docs/img/figure_padding_bottom_0.svg" alt="Padding with bottom set to 0."> -->
+
+<div class="figure" align="center" data-figure="fig:padding_bottom_0">
+    <img src="https://cdn.jsdelivr.net/gh/gururaj1512/stdlib@eb64ecc323cbaabf1a0191aea50fcb6ab65e750e/lib/node_modules/@stdlib/plot/vega/padding/ctor/docs/img/figure_padding_bottom_0.svg" alt="Padding with bottom set to 0.">
+    <br>
+</div>
+
+<!-- </figure> -->
+
+<!-- <figure class="figure" align="center" label="fig:padding_bottom_100" src="./docs/img/figure_padding_bottom_100.svg" alt="Padding with bottom set to 100."> -->
+
+<div class="figure" align="center" data-figure="fig:padding_bottom_100">
+    <img src="https://cdn.jsdelivr.net/gh/gururaj1512/stdlib@eb64ecc323cbaabf1a0191aea50fcb6ab65e750e/lib/node_modules/@stdlib/plot/vega/padding/ctor/docs/img/figure_padding_bottom_100.svg" alt="Padding with bottom set to 100.">
+    <br>
+</div>
+
+<!-- </figure> -->
+
 <a name="prop-left"></a>
 
 #### Padding.prototype.left
 
-Left padding (in pixels). Default: `0`.
+Left padding (in pixels).
 
 ```javascript
-var padding = new Padding();
-
-// Set:
-padding.left = 10;
+var padding = new Padding({
+    'left': 0,
+    'right': 80,
+    'top': 80,
+    'bottom': 80
+});
 
-// Get:
 var v = padding.left;
-// returns 10
+// returns 0
+
+padding.left = 130;
+
+v = padding.left;
+// returns 130
 ```
 
+<!-- <figure class="figure" align="center" label="fig:padding_left_0" src="./docs/img/figure_padding_left_0.svg" alt="Padding with left set to 0."> -->
+
+<div class="figure" align="center" data-figure="fig:padding_left_0">
+    <img src="https://cdn.jsdelivr.net/gh/gururaj1512/stdlib@eb64ecc323cbaabf1a0191aea50fcb6ab65e750e/lib/node_modules/@stdlib/plot/vega/padding/ctor/docs/img/figure_padding_left_0.svg" alt="Padding with left set to 0.">
+    <br>
+</div>
+
+<!-- </figure> -->
+
+<!-- <figure class="figure" align="center" label="fig:padding_left_130" src="./docs/img/figure_padding_left_130.svg" alt="Padding with left set to 130."> -->
+
+<div class="figure" align="center" data-figure="fig:padding_left_130">
+    <img src="https://cdn.jsdelivr.net/gh/gururaj1512/stdlib@eb64ecc323cbaabf1a0191aea50fcb6ab65e750e/lib/node_modules/@stdlib/plot/vega/padding/ctor/docs/img/figure_padding_left_130.svg" alt="Padding with left set to 130.">
+    <br>
+</div>
+
+<!-- </figure> -->
+
 <a name="prop-right"></a>
 
 #### Padding.prototype.right
 
-Right padding (in pixels). Default: `0`.
+Right padding (in pixels).
 
 ```javascript
-var padding = new Padding();
-
-// Set:
-padding.right = 10;
+var padding = new Padding({
+    'left': 80,
+    'right': 0,
+    'top': 80,
+    'bottom': 80
+});
 
-// Get:
 var v = padding.right;
-// returns 10
+// returns 0
+
+padding.right = 130;
+
+v = padding.right;
+// returns 130
 ```
 
+<!-- <figure class="figure" align="center" label="fig:padding_right_0" src="./docs/img/figure_padding_right_0.svg" alt="Padding with right set to 0."> -->
+
+<div class="figure" align="center" data-figure="fig:padding_right_0">
+    <img src="https://cdn.jsdelivr.net/gh/gururaj1512/stdlib@eb64ecc323cbaabf1a0191aea50fcb6ab65e750e/lib/node_modules/@stdlib/plot/vega/padding/ctor/docs/img/figure_padding_right_0.svg" alt="Padding with right set to 0.">
+    <br>
+</div>
+
+<!-- </figure> -->
+
+<!-- <figure class="figure" align="center" label="fig:padding_right_130" src="./docs/img/figure_padding_right_130.svg" alt="Padding with right set to 130."> -->
+
+<div class="figure" align="center" data-figure="fig:padding_right_130">
+    <img src="https://cdn.jsdelivr.net/gh/gururaj1512/stdlib@eb64ecc323cbaabf1a0191aea50fcb6ab65e750e/lib/node_modules/@stdlib/plot/vega/padding/ctor/docs/img/figure_padding_right_130.svg" alt="Padding with right set to 130.">
+    <br>
+</div>
+
+<!-- </figure> -->
+
 <a name="prop-top"></a>
 
 #### Padding.prototype.top
 
-Top padding (in pixels). Default: `0`.
+Top padding (in pixels).
 
 ```javascript
-var padding = new Padding();
-
-// Set:
-padding.top = 10;
+var padding = new Padding({
+    'left': 80,
+    'right': 80,
+    'top': 0,
+    'bottom': 80
+});
 
-// Get:
 var v = padding.top;
-// returns 10
+// returns 0
+
+padding.top = 100;
+
+v = padding.top;
+// returns 100
 ```
 
+<!-- <figure class="figure" align="center" label="fig:padding_top_0" src="./docs/img/figure_padding_top_0.svg" alt="Padding with top set to 0."> -->
+
+<div class="figure" align="center" data-figure="fig:padding_top_0">
+    <img src="https://cdn.jsdelivr.net/gh/gururaj1512/stdlib@eb64ecc323cbaabf1a0191aea50fcb6ab65e750e/lib/node_modules/@stdlib/plot/vega/padding/ctor/docs/img/figure_padding_top_0.svg" alt="Padding with top set to 0.">
+    <br>
+</div>
+
+<!-- </figure> -->
+
+<!-- <figure class="figure" align="center" label="fig:padding_top_100" src="./docs/img/figure_padding_top_100.svg" alt="Padding with top set to 100."> -->
+
+<div class="figure" align="center" data-figure="fig:padding_top_100">
+    <img src="https://cdn.jsdelivr.net/gh/gururaj1512/stdlib@eb64ecc323cbaabf1a0191aea50fcb6ab65e750e/lib/node_modules/@stdlib/plot/vega/padding/ctor/docs/img/figure_padding_top_100.svg" alt="Padding with top set to 100.">
+    <br>
+</div>
+
+<!-- </figure> -->
+
 * * *
 
 ### Read-only Properties
@@ -166,15 +268,18 @@ var v = padding.properties;
 
 #### Padding.prototype.toJSON()
 
-Serializes a padding instance to a JSON object.
+Serializes an instance to a JSON representation.
 
 ```javascript
 var padding = new Padding({
-    'top': 10
+    'left': 80,
+    'right': 80,
+    'top': 80,
+    'bottom': 80
 });
 
 var v = padding.toJSON();
-// returns { 'bottom': 0, 'left': 0, 'right': 0, 'top': 10 }
+// returns { 'bottom': 80, 'left': 80, 'right': 80, 'top': 80 }
 ```
 
 This method is implicitly invoked by `JSON.stringify`.
@@ -184,7 +289,7 @@ var padding = new Padding({
     'top': 10
 });
 
-var str = JSON.stringify( padding );
+var v = JSON.stringify( padding );
 // returns '{"bottom":0,"left":0,"right":0,"top":10}'
 ```