visualifyjs 2.5.3 → 3.0.0

package/docs/docs/Rechart/scatter.md

@@ -0,0 +1,298 @@
+<script defers>
+
+function rangeRandom(min, max, precision) {
+    return (Math.random() * (max - min) + min).toFixed(precision)
+}
+
+const randomData = []
+
+for (let i = 0; i < 50; i++) {
+    randomData.push([
+        rangeRandom(20, 200, 2), rangeRandom(10, 100, 2)
+    ])
+}
+
+const Basic_Scatter = {
+    code: 
+`const getOption = () => {
+    return {
+        type: 'scatter',
+        data: {
+            'random': ${JSON.stringify(randomData)},
+        },
+	}
+};
+return getOption;`
+};
+
+const Grouped_Scatter = {
+    code: `const getOption = () => {
+    return {
+        type: 'scatter',
+        data: {
+            'female': [
+                [161.2, 51.6], [167.5, 59.0], [159.5, 49.2], [157.0, 63.0], [155.8, 53.6],
+                [170.0, 59.0], [159.1, 47.6], [166.0, 69.8], [176.2, 66.8], [160.2, 75.2],
+                [172.5, 55.2], [170.9, 54.2], [172.9, 62.5], [153.4, 42.0], [160.0, 50.0],
+                [147.2, 49.8], [168.2, 49.2], [175.0, 73.2], [157.0, 47.8], [167.6, 68.8],
+                [159.5, 50.6], [175.0, 82.5], [166.8, 57.2], [176.5, 87.8], [170.2, 72.8],
+                [174.0, 54.5], [173.0, 59.8], [179.9, 67.3], [170.5, 67.8], [160.0, 47.0],
+                [154.4, 46.2], [162.0, 55.0], [176.5, 83.0], [160.0, 54.4], [152.0, 45.8],
+                [162.1, 53.6], [170.0, 73.2], [160.2, 52.1], [161.3, 67.9], [166.4, 56.6],
+                [168.9, 62.3], [163.8, 58.5], [167.6, 54.5], [160.0, 50.2], [161.3, 60.3],
+                [167.6, 58.3], [165.1, 56.2], [160.0, 50.2], [170.0, 72.9], [157.5, 59.8],
+                [167.6, 61.0], [160.7, 69.1], [163.2, 55.9], [152.4, 46.5], [157.5, 54.3],
+                [168.3, 54.8], [180.3, 60.7], [165.5, 60.0], [165.0, 62.0], [164.5, 60.3],
+                [156.0, 52.7], [160.0, 74.3], [163.0, 62.0], [165.7, 73.1], [161.0, 80.0],
+                [162.0, 54.7], [166.0, 53.2], [174.0, 75.7], [172.7, 61.1], [167.6, 55.7],
+                [151.1, 48.7], [164.5, 52.3], [163.5, 50.0], [152.0, 59.3], [169.0, 62.5],
+                [164.0, 55.7], [161.2, 54.8], [155.0, 45.9], [170.0, 70.6], [176.2, 67.2],
+                [170.0, 69.4], [162.5, 58.2], [170.3, 64.8], [164.1, 71.6], [169.5, 52.8],
+                [163.2, 59.8], [154.5, 49.0], [159.8, 50.0], [173.2, 69.2], [170.0, 55.9],
+                [161.4, 63.4], [169.0, 58.2], [166.2, 58.6], [159.4, 45.7], [162.5, 52.2],
+                [159.0, 48.6], [162.8, 57.8], [159.0, 55.6], [179.8, 66.8], [162.9, 59.4],
+                [161.0, 53.6], [151.1, 73.2], [168.2, 53.4], [168.9, 69.0], [173.2, 58.4],
+                [171.8, 56.2], [178.0, 70.6], [164.3, 59.8], [163.0, 72.0], [168.5, 65.2],
+                [166.8, 56.6], [172.7, 105.2], [163.5, 51.8], [169.4, 63.4], [167.8, 59.0],
+                [159.5, 47.6], [167.6, 63.0], [161.2, 55.2], [160.0, 45.0], [163.2, 54.0],
+                [162.2, 50.2], [161.3, 60.2], [149.5, 44.8], [157.5, 58.8], [163.2, 56.4],
+                [172.7, 62.0], [155.0, 49.2], [156.5, 67.2], [164.0, 53.8], [160.9, 54.4],
+                [162.8, 58.0], [167.0, 59.8], [160.0, 54.8], [160.0, 43.2], [168.9, 60.5],
+                [158.2, 46.4], [156.0, 64.4], [160.0, 48.8], [167.1, 62.2], [158.0, 55.5],
+                [167.6, 57.8], [156.0, 54.6], [162.1, 59.2], [173.4, 52.7], [159.8, 53.2],
+                [170.5, 64.5], [159.2, 51.8], [157.5, 56.0], [161.3, 63.6], [162.6, 63.2],
+                [160.0, 59.5], [168.9, 56.8], [165.1, 64.1], [162.6, 50.0], [165.1, 72.3],
+                [166.4, 55.0], [160.0, 55.9], [152.4, 60.4], [170.2, 69.1], [162.6, 84.5],
+                [170.2, 55.9], [158.8, 55.5], [172.7, 69.5], [167.6, 76.4], [162.6, 61.4],
+                [167.6, 65.9], [156.2, 58.6], [175.2, 66.8], [172.1, 56.6], [162.6, 58.6],
+                [160.0, 55.9], [165.1, 59.1], [182.9, 81.8], [166.4, 70.7], [165.1, 56.8],
+                [177.8, 60.0], [165.1, 58.2], [175.3, 72.7], [154.9, 54.1], [158.8, 49.1],
+                [172.7, 75.9], [168.9, 55.0], [161.3, 57.3], [167.6, 55.0], [165.1, 65.5],
+                [175.3, 65.5], [157.5, 48.6], [163.8, 58.6], [167.6, 63.6], [165.1, 55.2],
+                [165.1, 62.7], [168.9, 56.6], [162.6, 53.9], [164.5, 63.2], [176.5, 73.6],
+                [168.9, 62.0], [175.3, 63.6], [159.4, 53.2], [160.0, 53.4], [170.2, 55.0],
+                [162.6, 70.5], [167.6, 54.5], [162.6, 54.5], [160.7, 55.9], [160.0, 59.0],
+                [157.5, 63.6], [162.6, 54.5], [152.4, 47.3], [170.2, 67.7], [165.1, 80.9],
+                [172.7, 70.5], [165.1, 60.9], [170.2, 63.6], [170.2, 54.5], [170.2, 59.1],
+                [161.3, 70.5], [167.6, 52.7], [167.6, 62.7], [165.1, 86.3], [162.6, 66.4],
+                [152.4, 67.3], [168.9, 63.0], [170.2, 73.6], [175.2, 62.3], [175.2, 57.7],
+                [160.0, 55.4], [165.1, 104.1], [174.0, 55.5], [170.2, 77.3], [160.0, 80.5],
+                [167.6, 64.5], [167.6, 72.3], [167.6, 61.4], [154.9, 58.2], [162.6, 81.8],
+                [175.3, 63.6], [171.4, 53.4], [157.5, 54.5], [165.1, 53.6], [160.0, 60.0],
+                [174.0, 73.6], [162.6, 61.4], [174.0, 55.5], [162.6, 63.6], [161.3, 60.9],
+                [156.2, 60.0], [149.9, 46.8], [169.5, 57.3], [160.0, 64.1], [175.3, 63.6],
+                [169.5, 67.3], [160.0, 75.5], [172.7, 68.2], [162.6, 61.4], [157.5, 76.8],
+                [176.5, 71.8], [164.4, 55.5], [160.7, 48.6], [174.0, 66.4], [163.8, 67.3]
+            ],
+            "male": [
+            [174.0, 65.6], [175.3, 71.8], [193.5, 80.7], [186.5, 72.6], [187.2, 78.8],
+            [181.5, 74.8], [184.0, 86.4], [184.5, 78.4], [175.0, 62.0], [184.0, 81.6],
+            [180.0, 76.6], [177.8, 83.6], [192.0, 90.0], [176.0, 74.6], [174.0, 71.0],
+            [184.0, 79.6], [192.7, 93.8], [171.5, 70.0], [173.0, 72.4], [176.0, 85.9],
+            [176.0, 78.8], [180.5, 77.8], [172.7, 66.2], [176.0, 86.4], [173.5, 81.8],
+            [178.0, 89.6], [180.3, 82.8], [180.3, 76.4], [164.5, 63.2], [173.0, 60.9],
+            [183.5, 74.8], [175.5, 70.0], [188.0, 72.4], [189.2, 84.1], [172.8, 69.1],
+            [170.0, 59.5], [182.0, 67.2], [170.0, 61.3], [177.8, 68.6], [184.2, 80.1],
+            [186.7, 87.8], [171.4, 84.7], [172.7, 73.4], [175.3, 72.1], [180.3, 82.6],
+            [182.9, 88.7], [188.0, 84.1], [177.2, 94.1], [172.1, 74.9], [167.0, 59.1],
+            [169.5, 75.6], [174.0, 86.2], [172.7, 75.3], [182.2, 87.1], [164.1, 55.2],
+            [163.0, 57.0], [171.5, 61.4], [184.2, 76.8], [174.0, 86.8], [174.0, 72.2],
+            [177.0, 71.6], [186.0, 84.8], [167.0, 68.2], [171.8, 66.1], [182.0, 72.0],
+            [167.0, 64.6], [177.8, 74.8], [164.5, 70.0], [192.0, 101.6], [175.5, 63.2],
+            [171.2, 79.1], [181.6, 78.9], [167.4, 67.7], [181.1, 66.0], [177.0, 68.2],
+            [174.5, 63.9], [177.5, 72.0], [170.5, 56.8], [182.4, 74.5], [197.1, 90.9],
+            [180.1, 93.0], [175.5, 80.9], [180.6, 72.7], [184.4, 68.0], [175.5, 70.9],
+            [180.6, 72.5], [177.0, 72.5], [177.1, 83.4], [181.6, 75.5], [176.5, 73.0],
+            [175.0, 70.2], [174.0, 73.4], [165.1, 70.5], [177.0, 68.9], [192.0, 102.3],
+            [176.5, 68.4], [169.4, 65.9], [182.1, 75.7], [179.8, 84.5], [175.3, 87.7],
+            [184.9, 86.4], [177.3, 73.2], [167.4, 53.9], [178.1, 72.0], [168.9, 55.5],
+            [157.2, 58.4], [180.3, 83.2], [170.2, 72.7], [177.8, 64.1], [172.7, 72.3],
+            [165.1, 65.0], [186.7, 86.4], [165.1, 65.0], [174.0, 88.6], [175.3, 84.1],
+            [185.4, 66.8], [177.8, 75.5], [180.3, 93.2], [180.3, 82.7], [177.8, 58.0],
+            [177.8, 79.5], [177.8, 78.6], [177.8, 71.8], [177.8, 116.4], [163.8, 72.2],
+            [188.0, 83.6], [198.1, 85.5], [175.3, 90.9], [166.4, 85.9], [190.5, 89.1],
+            [166.4, 75.0], [177.8, 77.7], [179.7, 86.4], [172.7, 90.9], [190.5, 73.6],
+            [185.4, 76.4], [168.9, 69.1], [167.6, 84.5], [175.3, 64.5], [170.2, 69.1],
+            [190.5, 108.6], [177.8, 86.4], [190.5, 80.9], [177.8, 87.7], [184.2, 94.5],
+            [176.5, 80.2], [177.8, 72.0], [180.3, 71.4], [171.4, 72.7], [172.7, 84.1],
+            [172.7, 76.8], [177.8, 63.6], [177.8, 80.9], [182.9, 80.9], [170.2, 85.5],
+            [167.6, 68.6], [175.3, 67.7], [165.1, 66.4], [185.4, 102.3], [181.6, 70.5],
+            [172.7, 95.9], [190.5, 84.1], [179.1, 87.3], [175.3, 71.8], [170.2, 65.9],
+            [193.0, 95.9], [171.4, 91.4], [177.8, 81.8], [177.8, 96.8], [167.6, 69.1],
+            [167.6, 82.7], [180.3, 75.5], [182.9, 79.5], [176.5, 73.6], [186.7, 91.8],
+            [188.0, 84.1], [188.0, 85.9], [177.8, 81.8], [174.0, 82.5], [177.8, 80.5],
+            [171.4, 70.0], [185.4, 81.8], [185.4, 84.1], [188.0, 90.5], [188.0, 91.4],
+            [182.9, 89.1], [176.5, 85.0], [175.3, 69.1], [175.3, 73.6], [188.0, 80.5],
+            [188.0, 82.7], [175.3, 86.4], [170.5, 67.7], [179.1, 92.7], [177.8, 93.6],
+            [175.3, 70.9], [182.9, 75.0], [170.8, 93.2], [188.0, 93.2], [180.3, 77.7],
+            [177.8, 61.4], [185.4, 94.1], [168.9, 75.0], [185.4, 83.6], [180.3, 85.5],
+            [174.0, 73.9], [167.6, 66.8], [182.9, 87.3], [160.0, 72.3], [180.3, 88.6],
+            [167.6, 75.5], [186.7, 101.4], [175.3, 91.1], [175.3, 67.3], [175.9, 77.7],
+            [175.3, 81.8], [179.1, 75.5], [181.6, 84.5], [177.8, 76.6], [182.9, 85.0],
+            [177.8, 102.5], [184.2, 77.3], [179.1, 71.8], [176.5, 87.9], [188.0, 94.3],
+            [174.0, 70.9], [167.6, 64.5], [170.2, 77.3], [167.6, 72.3], [188.0, 87.3],
+            [174.0, 80.0], [176.5, 82.3], [180.3, 73.6], [167.6, 74.1], [188.0, 85.9],
+            [180.3, 73.2], [167.6, 76.3], [183.0, 65.9], [183.0, 90.9], [179.1, 89.1],
+            [170.2, 62.3], [177.8, 82.7], [179.1, 79.1], [190.5, 98.2], [177.8, 84.1],
+            [180.3, 83.2], [180.3, 83.2]
+          ]
+        },
+        xAxis:{
+            min: 140,
+            max: 200,
+        },
+        yAxis:{
+            min: 40,
+            max: 120,
+        },
+        xAxisLabel: 'Height',
+        yAxisLabel: 'Weight',
+        xAxisNameGap: 5,
+        yAxisNameGap: 5,
+        tooltip: {
+            axisPointer: {
+                type: 'cross'
+            }
+        }
+	}
+};
+return getOption;`
+};
+
+const Quadrant = {
+    code: `const getOption = () => {
+    return {
+        type: 'scatter',
+        data: {
+            'Data': 
+                [{
+                    value: [1, 1],
+                    symbol: 'none',
+                }, {
+                    value: [0, -1],
+                    symbol: 'none',
+                },
+                [0.35, 0.18],
+                [0.55, 0.77],
+                [0.88, 0.23],
+                [0.23, -0.25],
+                [0.65, -0.66]
+                ],
+        },
+        markArea: {
+          itemStyle: {
+            color: '#FFFAFA',
+            opacity: '0.7'
+          },
+          emphasis: {
+            itemStyle: {
+              color: '#FFFAFA',
+              opacity: '0.7'
+            },
+          },
+          data: [
+            [{
+              coord: [0.5, 0]
+            }, {
+              coord: [1, 1]
+            }],
+            [{
+              coord: [0.5, 0]
+            }, {
+              coord: [0, -1]
+            }]
+          ]
+        },
+        markLine: {
+          symbol: 'none',
+          data: [
+            [{
+              value: 0.5,
+              coord: [0.5, -1]
+            }, {
+              coord: [0.5, 1]
+            }]
+          ]
+        },
+        legend: false,
+	}
+};
+return getOption;`
+};
+
+const Bubble = {
+    code: `const getOption = () => {
+    return {
+        type: 'scatter',
+        data: {
+            'bubble': ${JSON.stringify(randomData)},
+        },
+        itemStyle: {
+          normal: {
+            opacity: 0.8
+          }
+        },
+        symbolSize: function(val) {
+          const [a, b] = val
+          return Math.abs(a - b) / 2
+        },
+    }
+};
+return getOption;`
+};
+
+const ex1 = new $visualify.LiveEditor(Basic_Scatter).mount('#ex1');
+const ex2 = new $visualify.LiveEditor(Grouped_Scatter).mount('#ex2');
+const ex3 = new $visualify.LiveEditor(Quadrant).mount('#ex3');
+const ex4 = new $visualify.LiveEditor(Bubble).mount('#ex4');
+</script>
+
+# Scatter Chart
+
+## Basic Scatter Chart
+
+<div id="ex1"></div>
+
+## Grouped Scatter Chart
+
+<div id="ex2"></div>
+
+## Quadrant Scatter Chart
+
+<div id="ex3"></div>
+
+## Bubble Scatter Chart
+
+<div id="ex4"></div>
+
+## Overall Configuration
+
+### Basic Configuration
+
+The basic configuration includes:
+
+| Attribute       | Type        | Description             | Choice                     | Default |
+| --------------- | ----------- | ----------------------- | -------------------------- | ------- |
+| title           | string      | The main title          | User-defined title         | -       |
+| subtitle        | string      | A secondary title       | User-defined subtitle      | -       |
+| width           | string      | The width dimension     | Any valid CSS width value  | -       |
+| height          | string      | The height dimension    | Any valid CSS height value | 400px   |
+| legend          | bool/object | show or hide legend     | False, User-defined legend | {}      |
+| xAxis           | array/false | The xAxis               | User-defined xAxis Data    | []      |
+| yAxis           | array/false | The yAxis               | User-defined yAxis Data    | []      |
+| label           | object      | The label               | User-defined label         | {}      |
+| labelLine       | object      | The labelLine           | User-defined labelLine     | {}      |
+| tooltip         | object      | The tooltip             | User-defined tooltip       | {}      |
+| xAxisLineshow   | bool        | show or hide xAxisLines | True, False                | true    |
+| yAxisLineshow   | bool        | show or hide yAxisLines | True, False                | true    |
+| xAxisLabelShow  | bool        | show or hide xAxisLabel | True, False                | true    |
+| yAxisLabelShow  | bool        | show or hide yAxisLabel | True, False                | true    |
+| xAxisLabelColor | string      | The xAxisLabelColor     | Any valid CSS color value  | -       |
+| yAxisLabelColor | string      | The yAxisLabelColor     | Any valid CSS color value  | -       |
+
+### Data Configuration
+
+| Attribute | Type         | Description | Choice            | Default   |
+| --------- | ------------ | ----------- | ----------------- | --------- |
+| data      | string       | The data    | User-defined data | {}        |
+| type      | string/array | The type    | 'line', 'bar'     | undefined |

package/docs/docs/_404.md

@@ -1,52 +1,52 @@
-<style>
-    body {
-      font-family: Arial, sans-serif;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      height: 100vh;
-      margin: 0;
-    }
-    
-    .container {
-      text-align: center;
-      background-color: #ffffff;
-      padding: 50px;
-      margin-top: 5vh;
-      border-radius: 10px;
-      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
-    }
-    
-    .container h1 {
-      font-size: 72px;
-      margin-bottom: 20px;
-      color: #ff5252;
-    }
-    
-    .container p {
-      font-size: 24px;
-      margin-bottom: 30px;
-    }
-    
-    .container a {
-      font-size: 18px;
-      text-decoration: none;
-      color: #2196f3;
-      border: 1px solid #2196f3;
-      padding: 10px 15px;
-      border-radius: 5px;
-      transition: background-color 0.3s, color 0.3s;
-    }
-    
-    .container a:hover {
-      background-color: #2196f3;
-      color: #ffffff;
-    }
-
-</style>
-
-<div class="container">
-    <h1>404</h1>
-    <p>Oops! The page you're looking for doesn't exist.</p>
-    <a href="/">Go Home</a>
+<style>
+    body {
+      font-family: Arial, sans-serif;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 100vh;
+      margin: 0;
+    }
+    
+    .container {
+      text-align: center;
+      background-color: #ffffff;
+      padding: 50px;
+      margin-top: 5vh;
+      border-radius: 10px;
+      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+    }
+    
+    .container h1 {
+      font-size: 72px;
+      margin-bottom: 20px;
+      color: #ff5252;
+    }
+    
+    .container p {
+      font-size: 24px;
+      margin-bottom: 30px;
+    }
+    
+    .container a {
+      font-size: 18px;
+      text-decoration: none;
+      color: #2196f3;
+      border: 1px solid #2196f3;
+      padding: 10px 15px;
+      border-radius: 5px;
+      transition: background-color 0.3s, color 0.3s;
+    }
+    
+    .container a:hover {
+      background-color: #2196f3;
+      color: #ffffff;
+    }
+
+</style>
+
+<div class="container">
+    <h1>404</h1>
+    <p>Oops! The page you're looking for doesn't exist.</p>
+    <a href="/">Go Home</a>
 </div>

package/docs/docs/_coverpage.md

@@ -1,11 +1,11 @@
-<!-- _coverpage.md -->
-
-![logo](./static/logo/logo_256x256.png)
-
-# visualify.js <small>2.5.3</small>
-
-> A magical data portal generator
-
-[GitHub](https://github.com/usleolihao)
-[Getting Started](#visualify)
-
+<!-- _coverpage.md -->
+
+![logo](./static/logo/logo_256x256.png)
+
+# visualify.js <small>3.0.0</small>
+
+> A magical data portal generator
+
+[GitHub](https://github.com/visualify)
+[Getting Started](#visualify)
+

package/docs/docs/_sidebar.md

@@ -1,43 +1,54 @@
--   Getting started
-
-    -   [Introduction](/README.md)
-    -   [Quick start](/quickstart.md)
-    -   [More pages](/more-pages.md)
-
--   Visualify.Recharts
-    
-    -   [Usage](/rechart-basic-usage.md)
-    -   [Attributes](/rechart-attributes.md)
-    -   [Line Chart](/Rechart/line.md)
-    -   [Bar Chart](/Rechart/bar.md)
-    -   [Pie Chart](/Rechart/pie.md)
-    -   [Radar Chart](/Rechart/radar.md)
-    -   [Funnel Chart](/Rechart/funnel.md)
-    
-  
--   Page Mode
-
-    -   [ScatterL](/components/scatterL.md)
-    -   [Visium](/components/visium.md)
-    -   [DotBio](/components/dotBio.md)
-    -   [Echart](/components/echart.md)
-    -   [Plotly](/components/plotly.md)
-    -   [Macaron](/components/macaron.md)
-    -   [More...](/components/more.md)
-
--   Customization
-
-    -   [Configuration](/configuration.md)
-    -   [Theme](/theme.md)
-
--   Guide
-
-    -   [CLI](/CLI.md)
-    -   [Deploy](/deploy.md)
-
--   Showcase
-
-    -   [MmTrBC](https://visualify.pharmacy.arizona.edu/MmTrBC/)
-    -   [EsoDev](https://visualify.pharmacy.arizona.edu/EsoDev/)
-
--   [UpdateLog](/log.md)
+-   Getting Started
+
+    -   [Introduction](/README.md)
+    -   [Quick Start](/quickstart.md)
+    -   [Docsify Plugin](/docsify-plugin.md)
+
+-   Charts (2D)
+
+    -   [Usage](/rechart-basic-usage.md)
+    -   [Attributes](/rechart-attributes.md)
+    -   [Line Chart](/Rechart/line.md)
+    -   [Bar Chart](/Rechart/bar.md)
+    -   [Pie Chart](/Rechart/pie.md)
+    -   [Radar Chart](/Rechart/radar.md)
+    -   [Funnel Chart](/Rechart/funnel.md)
+    -   [Scatter Chart](/Rechart/scatter.md)
+
+-   Charts (3D)
+
+    -   [3D Visualization](/3d-visualization.md)
+
+-   Page Mode
+
+    -   [ScatterL](/components/scatterL.md)
+    -   [Visium](/components/visium.md)
+    -   [DotBio](/components/dotBio.md)
+    -   [Echart](/components/echart.md)
+    -   [Plotly](/components/plotly.md)
+    -   [Macaron](/components/macaron.md)
+    -   [More...](/components/more.md)
+
+-   Customization
+
+    -   [Configuration](/configuration.md)
+    -   [Theme](/theme.md)
+
+-   Developer Experience
+
+    -   [Hot Module Replacement](/hmr.md)
+    -   [TypeScript](/typescript.md)
+    -   [Visual Editor](/visual-editor.md)
+    -   [Internationalization](/i18n.md)
+
+-   Guide
+
+    -   [CLI](/CLI.md)
+    -   [Deploy](/deploy.md)
+
+-   Showcase
+
+    -   [MmTrBC](https://visualify.pharmacy.arizona.edu/MmTrBC/)
+    -   [EsoDev](https://visualify.pharmacy.arizona.edu/EsoDev/)
+
+-   [UpdateLog](/log.md)

package/docs/docs/components/dotBio.md

@@ -1,34 +1,87 @@
-# DotBio Component
-
-The DotBio component is a dot plot that
-displays the expression of genes in different cell types. 
-
-
-## Properties
-
-The DotBio component has the following properties:
-
--   `type` (string): The type of the component, in this case `DotBio`.
--   `id` (string): The unique identifier of the component.
--   `row` (int): The row in which the component is to be displayed.
--   `col` (int): The column in which the component is to be displayed.
--   `rowspan` (int): The number of rows the component is to span.
--   `colspan` (int): The number of columns the component is to span.
--   `settings` (object): The settings of the component.
--   `meta` (object): The metadata API of the component.
-    -   `name` (string): The name of the metadata.
-    -   `url` (string): The URL of the metadata.
--   `exclude_celltype` (array): The cell types to be excluded.
--   `gene` (string): The gene API.
--   `genelist` (string): The genelist variable name we want to use.
-
-### settings Properties
-
-The `settings` object has the following properties:
-
--   `preset` (string): The preset of the component.
--   `ignoreEmptyData` (boolean): Whether to ignore empty data or not.
--   `showscale` (boolean): Whether to show the scale or not.
--   `showlegend` (boolean): Whether to show the legend or not.
-        
-
+# DotBio Component
+
+The DotBio component creates dot plots (also known as bubble plots) commonly used in bioinformatics to display gene expression patterns across cell types. Each dot represents the expression of a gene in a specific cell type, with size indicating the percentage of expressing cells and color indicating expression level.
+
+> **Note:** This component requires a backend API to supply gene expression and metadata. A live demo is not available in this documentation.
+
+## How It Works
+
+The DotBio component fetches cell-type metadata and gene expression data from backend APIs, then renders a matrix of dots where rows are cell types and columns are genes.
+
+```
+              Gene A   Gene B   Gene C   Gene D
+Cell Type 1    ●        ◉        ○        ●
+Cell Type 2    ○        ●        ◉        ○
+Cell Type 3    ◉        ○        ●        ◉
+Cell Type 4    ●        ●        ○        ○
+
+● = high expression (large, dark)
+◉ = medium expression
+○ = low expression (small, light)
+```
+
+The dot size encodes the percentage of cells expressing the gene, while the dot color encodes the average expression level. This dual encoding lets researchers quickly identify which genes are active in which cell populations.
+
+## Properties
+
+| Property | Type | Required | Description |
+|---|---|---|---|
+| `type` | string | Yes | Must be set to `"DotBio"`. |
+| `id` | string | Yes | A unique identifier for this component instance. Used for cross-component references and event targeting. |
+| `row` | int | No | The grid row position where the component is placed (1-based). |
+| `col` | int | No | The grid column position where the component is placed (1-based). |
+| `rowspan` | int | No | The number of grid rows this component spans. Defaults to 1. |
+| `colspan` | int | No | The number of grid columns this component spans. Defaults to 1. |
+| `settings` | object | No | Display and behavior settings. See the **Settings** table below. |
+| `meta` | object | Yes | Defines the metadata API endpoint that provides cell-type information. |
+| `meta.name` | string | Yes | A label for the metadata source (e.g., `"metadata"`). |
+| `meta.url` | string | Yes | The backend URL that returns cell-type metadata. |
+| `exclude_celltype` | array | No | An array of cell-type names to exclude from the plot. Useful for filtering out irrelevant or noisy populations. |
+| `gene` | string | Yes | The backend API URL that returns gene expression data for the selected genes. |
+| `genelist` | string | Yes | The name of the gene list variable to use. This should match a gene list defined elsewhere in the page configuration. |
+
+### Settings
+
+| Property | Type | Default | Description |
+|---|---|---|---|
+| `preset` | string | - | A named preset that applies predefined styling and layout options (e.g., `"mmtrbc"`). |
+| `ignoreEmptyData` | boolean | `false` | When `true`, the component will not render an error or placeholder if the API returns empty data. |
+| `showscale` | boolean | `true` | Whether to display the color scale legend alongside the plot. |
+| `showlegend` | boolean | `true` | Whether to display the size legend indicating percentage of expressing cells. |
+
+## Example
+
+```json
+{
+    "id": "dotbio_expression",
+    "type": "DotBio",
+    "col": 1,
+    "rowspan": 4,
+    "colspan": 2,
+    "settings": {
+        "preset": "mmtrbc",
+        "ignoreEmptyData": true,
+        "showscale": true,
+        "showlegend": true
+    },
+    "meta": {
+        // Label for this metadata source
+        "name": "metadata",
+        // Backend endpoint returning cell-type information
+        "url": "<your-backend-url>/api/metadata"
+    },
+    // Cell types to exclude from the visualization
+    "exclude_celltype": ["BC-Mes", "BC-NE"],
+    // Backend endpoint returning gene expression values
+    "gene": "<your-backend-url>/api/gene",
+    // References a gene list defined in the page configuration
+    "genelist": "selected_genes"
+}
+```
+
+## See Also
+
+- [Plotly Component](/components/plotly.md) - For scatter and violin plots of expression data
+- [Echart Component](/components/echart.md) - General-purpose chart component
+- [Configuration](/configuration.md) - How to set up page mode
+- [MmTrBC Showcase](https://visualify.pharmacy.arizona.edu/MmTrBC/) - Live project using DotBio and other components