diff --git a/public/examples/ts/archive/custom-aggregate-scatter-bar.js b/public/examples/ts/archive/custom-aggregate-scatter-bar.js
index 5f542f6..8ce0c80 100644
--- a/public/examples/ts/archive/custom-aggregate-scatter-bar.js
+++ b/public/examples/ts/archive/custom-aggregate-scatter-bar.js
@@ -5,205 +5,252 @@
 difficulty: 9
 */
 
-
 var SCATTER_COLORS = [
-    '#5470c6',
-    '#91cc75',
-    '#fac858',
-    '#ee6666',
-    '#73c0de',
-    '#3ba272',
-    '#fc8452',
-    '#9a60b4',
-    '#ea7ccc'
+  '#5470c6',
+  '#91cc75',
+  '#fac858',
+  '#ee6666',
+  '#73c0de',
+  '#3ba272',
+  '#fc8452',
+  '#9a60b4',
+  '#ea7ccc'
 ];
 var BAR_COLOR = '#37A2DA';
 var ANIMATION_DURATION_UPDATE = 1500;
 
-var RAW_DATA = [[1425139200000,34,0.13,2,"MD","ZD","P0"],[1425225600000,28,0.71,1.5,"MB","ZD","P1"],[1425312000000,23,0.9,2.8,"MA","ZC","P2"],[1425398400000,21,0.58,6,"MB","ZC","P3"],[1425484800000,14,0.1,1.6,"MC","ZA","P4"],[1425571200000,21,0.6,7.7,"MC","ZA","P5"],[1425657600000,23,0.31,2.6,"MC","ZC","P6"],[1425744000000,34,0.74,2.4,"MD","ZE","P7"],[1425830400000,14,0.59,2.3,"MB","ZD","P8"],[1425916800000,18,0.85,5.1,"MB","ZB","P9"],[1426003200000,36,0.96,1.2,"MC","ZC","P10"],[1426089600000,18,0.28,2.5,"MA","ZC","P11"],[1426176000000,20,0.62,6,"MB","ZD","P12"],[1426262400000,32,0.79,1.7,"MB","ZA","P13"],[1426348800000,17,0.58,4.4,"MD","ZB","P14"],[1426435200000,23,0.77,3,"MB","ZA","P15"],[1426521600000,39,0.87,4.6,"MC","ZA","P16"],[1426608000000,15,0.7,6,"MB","ZC","P17"],[1426694400000,21,0.94,2.7,"MB","ZD","P18"],[1426780800000,28,0.48,4.5,"MC","ZC","P19"],[1426867200000,31,0.49,9.8,"MA","ZC","P20"],[1426953600000,27,0.87,7.7,"MB","ZB","P21"],[1427040000000,27,0.82,5.5,"MC","ZB","P22"],[1427126400000,11,0.53,2.7,"MD","ZC","P23"],[1427212800000,13,0.7,7.6,"MB","ZD","P24"],[1427299200000,39,0.99,4.8,"MB","ZD","P25"],[1427385600000,32,0.91,2.1,"MB","ZE","P26"],[1427472000000,20,0.97,5,"MB","ZA","P27"],[1427558400000,36,0.01,8.9,"MB","ZD","P28"],[1427644800000,22,0.08,9.2,"MB","ZE","P29"],[1427731200000,21,0.36,3.1,"MD","ZC","P30"],[1427817600000,11,0.15,5.8,"MD","ZB","P31"],[1427904000000,39,0.02,1.4,"MC","ZD","P32"],[1427990400000,20,0.86,8.7,"MB","ZD","P33"],[1428076800000,23,0.24,7.2,"MD","ZB","P34"],[1428163200000,12,0.06,2,"MD","ZB","P35"],[1428249600000,36,0.42,8.2,"MA","ZB","P36"],[1428336000000,17,0.48,7.5,"MB","ZC","P37"],[1428422400000,19,0.12,6.6,"MB","ZB","P38"],[1428508800000,39,0.58,3.1,"MC","ZE","P39"],[1428595200000,10,0.18,6.6,"MC","ZD","P40"],[1428681600000,22,0.28,2.1,"MB","ZE","P41"],[1428768000000,27,0.33,1.9,"MC","ZB","P42"],[1428854400000,37,0.46,9.4,"MD","ZE","P43"],[1428940800000,18,0.96,5.5,"MB","ZA","P44"],[1429027200000,11,0.61,8.2,"MD","ZC","P45"],[1429113600000,15,0.88,4.6,"MD","ZA","P46"],[1429200000000,38,0.89,7.2,"MD","ZC","P47"],[1429286400000,20,0.39,5.4,"MB","ZB","P48"],[1429372800000,30,0.71,5.5,"MA","ZA","P49"]];
-
-
+var RAW_DATA = [
+  [1425139200000, 34, 0.13, 2, 'MD', 'ZD', 'P0'],
+  [1425225600000, 28, 0.71, 1.5, 'MB', 'ZD', 'P1'],
+  [1425312000000, 23, 0.9, 2.8, 'MA', 'ZC', 'P2'],
+  [1425398400000, 21, 0.58, 6, 'MB', 'ZC', 'P3'],
+  [1425484800000, 14, 0.1, 1.6, 'MC', 'ZA', 'P4'],
+  [1425571200000, 21, 0.6, 7.7, 'MC', 'ZA', 'P5'],
+  [1425657600000, 23, 0.31, 2.6, 'MC', 'ZC', 'P6'],
+  [1425744000000, 34, 0.74, 2.4, 'MD', 'ZE', 'P7'],
+  [1425830400000, 14, 0.59, 2.3, 'MB', 'ZD', 'P8'],
+  [1425916800000, 18, 0.85, 5.1, 'MB', 'ZB', 'P9'],
+  [1426003200000, 36, 0.96, 1.2, 'MC', 'ZC', 'P10'],
+  [1426089600000, 18, 0.28, 2.5, 'MA', 'ZC', 'P11'],
+  [1426176000000, 20, 0.62, 6, 'MB', 'ZD', 'P12'],
+  [1426262400000, 32, 0.79, 1.7, 'MB', 'ZA', 'P13'],
+  [1426348800000, 17, 0.58, 4.4, 'MD', 'ZB', 'P14'],
+  [1426435200000, 23, 0.77, 3, 'MB', 'ZA', 'P15'],
+  [1426521600000, 39, 0.87, 4.6, 'MC', 'ZA', 'P16'],
+  [1426608000000, 15, 0.7, 6, 'MB', 'ZC', 'P17'],
+  [1426694400000, 21, 0.94, 2.7, 'MB', 'ZD', 'P18'],
+  [1426780800000, 28, 0.48, 4.5, 'MC', 'ZC', 'P19'],
+  [1426867200000, 31, 0.49, 9.8, 'MA', 'ZC', 'P20'],
+  [1426953600000, 27, 0.87, 7.7, 'MB', 'ZB', 'P21'],
+  [1427040000000, 27, 0.82, 5.5, 'MC', 'ZB', 'P22'],
+  [1427126400000, 11, 0.53, 2.7, 'MD', 'ZC', 'P23'],
+  [1427212800000, 13, 0.7, 7.6, 'MB', 'ZD', 'P24'],
+  [1427299200000, 39, 0.99, 4.8, 'MB', 'ZD', 'P25'],
+  [1427385600000, 32, 0.91, 2.1, 'MB', 'ZE', 'P26'],
+  [1427472000000, 20, 0.97, 5, 'MB', 'ZA', 'P27'],
+  [1427558400000, 36, 0.01, 8.9, 'MB', 'ZD', 'P28'],
+  [1427644800000, 22, 0.08, 9.2, 'MB', 'ZE', 'P29'],
+  [1427731200000, 21, 0.36, 3.1, 'MD', 'ZC', 'P30'],
+  [1427817600000, 11, 0.15, 5.8, 'MD', 'ZB', 'P31'],
+  [1427904000000, 39, 0.02, 1.4, 'MC', 'ZD', 'P32'],
+  [1427990400000, 20, 0.86, 8.7, 'MB', 'ZD', 'P33'],
+  [1428076800000, 23, 0.24, 7.2, 'MD', 'ZB', 'P34'],
+  [1428163200000, 12, 0.06, 2, 'MD', 'ZB', 'P35'],
+  [1428249600000, 36, 0.42, 8.2, 'MA', 'ZB', 'P36'],
+  [1428336000000, 17, 0.48, 7.5, 'MB', 'ZC', 'P37'],
+  [1428422400000, 19, 0.12, 6.6, 'MB', 'ZB', 'P38'],
+  [1428508800000, 39, 0.58, 3.1, 'MC', 'ZE', 'P39'],
+  [1428595200000, 10, 0.18, 6.6, 'MC', 'ZD', 'P40'],
+  [1428681600000, 22, 0.28, 2.1, 'MB', 'ZE', 'P41'],
+  [1428768000000, 27, 0.33, 1.9, 'MC', 'ZB', 'P42'],
+  [1428854400000, 37, 0.46, 9.4, 'MD', 'ZE', 'P43'],
+  [1428940800000, 18, 0.96, 5.5, 'MB', 'ZA', 'P44'],
+  [1429027200000, 11, 0.61, 8.2, 'MD', 'ZC', 'P45'],
+  [1429113600000, 15, 0.88, 4.6, 'MD', 'ZA', 'P46'],
+  [1429200000000, 38, 0.89, 7.2, 'MD', 'ZC', 'P47'],
+  [1429286400000, 20, 0.39, 5.4, 'MB', 'ZB', 'P48'],
+  [1429372800000, 30, 0.71, 5.5, 'MA', 'ZA', 'P49']
+];
 
 $.when(
-    $.getScript('https://cdn.jsdelivr.net/npm/echarts-simple-transform@1.0.0/dist/ecSimpleTransform.min.js')
+  $.getScript(
+    'https://fastly.jsdelivr.net/npm/echarts-simple-transform@1.0.0/dist/ecSimpleTransform.min.js'
+  )
 ).done(function () {
+  init();
 
-    init();
+  var currentIsBar = false;
+  setScatterOption();
 
-    var currentIsBar = false;
-    setScatterOption();
-
-    setInterval(function () {
-        if (currentIsBar) {
-            currentIsBar = false;
-            setScatterOption();
-        }
-        else {
-            currentIsBar = true;
-            setBarOption();
-        }
-    }, 3000);
-
+  setInterval(function () {
+    if (currentIsBar) {
+      currentIsBar = false;
+      setScatterOption();
+    } else {
+      currentIsBar = true;
+      setBarOption();
+    }
+  }, 3000);
 });
 
-
-
 function init() {
+  echarts.registerTransform(ecSimpleTransform.aggregate);
 
-    echarts.registerTransform(ecSimpleTransform.aggregate);
+  var baseOption = {
+    dataset: [
+      {
+        id: 'raw_dataset',
+        dimensions: [
+          'DATE',
+          'COUNT',
+          'PRICE',
+          'WEIGHT',
+          'M_TAG',
+          'Z_TAG',
+          'ID'
+        ],
+        source: RAW_DATA
+      },
+      {
+        id: 'mTagSum_dataset',
+        fromDatasetId: 'raw_dataset',
+        transform: {
+          type: 'ecSimpleTransform:aggregate',
+          config: {
+            resultDimensions: [
+              { from: 'COUNT', method: 'sum' },
+              { from: 'PRICE', method: 'sum' },
+              { from: 'WEIGHT', method: 'sum' },
+              { from: 'M_TAG' }
+            ],
+            groupBy: 'M_TAG'
+          }
+        }
+      }
+    ],
+    tooltip: {}
+  };
 
-    var baseOption = {
-        dataset: [{
-            id: 'raw_dataset',
-            dimensions: ['DATE', 'COUNT', 'PRICE', 'WEIGHT', 'M_TAG', 'Z_TAG', 'ID'],
-            source: RAW_DATA
-        }, {
-            id: 'mTagSum_dataset',
-            fromDatasetId: 'raw_dataset',
-            transform: {
-                type: 'ecSimpleTransform:aggregate',
-                config: {
-                    resultDimensions: [
-                        { from: 'COUNT', method: 'sum' },
-                        { from: 'PRICE', method: 'sum' },
-                        { from: 'WEIGHT', method: 'sum' },
-                        { from: 'M_TAG' }
-                    ],
-                    groupBy: 'M_TAG'
-                }
-            }
-        }],
-        tooltip: {}
-    };
-
-    myChart.setOption(baseOption, { lazyUpdate: true });
+  myChart.setOption(baseOption, { lazyUpdate: true });
 }
 
 function setScatterOption() {
-    var option = {
-        grid: {
-            containLabel: true
-        },
-        xAxis: {
-            name: 'PRICE'
-        },
-        yAxis: {
-            name: 'COUNT'
-        },
-        series: {
-            type: 'custom',
-            coordinateSystem: 'cartesian2d',
-            animationDurationUpdate: ANIMATION_DURATION_UPDATE,
-            datasetId: 'raw_dataset',
-            encode: {
-                itemName: 'ID',
-                x: 'PRICE',
-                y: 'COUNT',
-                tooltip: ['PRICE', 'COUNT', 'WEIGHT']
-            },
-            renderItem: function (params, api) {
-                var pos = api.coord([
-                    api.value('PRICE'),
-                    api.value('COUNT')
-                ]);
-                var color = getFromPalette(
-                    api.value('Z_TAG'),
-                    SCATTER_COLORS
-                );
-                return {
-                    type: 'circle',
-                    morph: true,
-                    shape: {
-                        cx: pos[0],
-                        cy: pos[1],
-                        r: 10
-                    },
-                    style: {
-                        fill: color
-                    },
-                    transition: ['shape', 'style']
-                };
-            }
-        }
-    };
+  var option = {
+    grid: {
+      containLabel: true
+    },
+    xAxis: {
+      name: 'PRICE'
+    },
+    yAxis: {
+      name: 'COUNT'
+    },
+    series: {
+      type: 'custom',
+      coordinateSystem: 'cartesian2d',
+      animationDurationUpdate: ANIMATION_DURATION_UPDATE,
+      datasetId: 'raw_dataset',
+      encode: {
+        itemName: 'ID',
+        x: 'PRICE',
+        y: 'COUNT',
+        tooltip: ['PRICE', 'COUNT', 'WEIGHT']
+      },
+      renderItem: function (params, api) {
+        var pos = api.coord([api.value('PRICE'), api.value('COUNT')]);
+        var color = getFromPalette(api.value('Z_TAG'), SCATTER_COLORS);
+        return {
+          type: 'circle',
+          morph: true,
+          shape: {
+            cx: pos[0],
+            cy: pos[1],
+            r: 10
+          },
+          style: {
+            fill: color
+          },
+          transition: ['shape', 'style']
+        };
+      }
+    }
+  };
 
-    myChart.setOption(option, {
-        replaceMerge: ['xAxis', 'yAxis'],
-        transition: {
-            from: { seriesIndex: 0, dimension: 'M_TAG' },
-            to: { seriesIndex: 0, dimension: 'M_TAG' }
-        }
-    });
+  myChart.setOption(option, {
+    replaceMerge: ['xAxis', 'yAxis'],
+    transition: {
+      from: { seriesIndex: 0, dimension: 'M_TAG' },
+      to: { seriesIndex: 0, dimension: 'M_TAG' }
+    }
+  });
 }
 
 function setBarOption() {
-    var option = {
-        grid: {
-            containLabel: true
-        },
-        xAxis: {
-            type: 'category'
-        },
-        yAxis: {
-        },
-        series: {
-            type: 'custom',
-            coordinateSystem: 'cartesian2d',
-            animationDurationUpdate: ANIMATION_DURATION_UPDATE,
-            datasetId: 'mTagSum_dataset',
-            encode: {
-                x: 'M_TAG',
-                y: 'COUNT',
-                tooltip: ['M_TAG', 'COUNT', 'WEIGHT']
-            },
-            renderItem: function (params, api) {
-                var mTagVal = api.value('M_TAG');
-                var ataVal = api.value('COUNT');
-                var tarPos = api.coord([mTagVal, ataVal]);
-                var zeroPos = api.coord([mTagVal, 0]);
-                var size = api.size([mTagVal, ataVal]);
-                var width = size[0] * 0.4;
-                return {
-                    type: 'rect',
-                    morph: true,
-                    shape: {
-                        x: tarPos[0] - width / 2,
-                        y: tarPos[1],
-                        height: zeroPos[1] - tarPos[1],
-                        width: width,
-                    },
-                    style: {
-                        fill: BAR_COLOR
-                    },
-                    transition: ['shape', 'style']
-                };
-            }
-        }
-    };
+  var option = {
+    grid: {
+      containLabel: true
+    },
+    xAxis: {
+      type: 'category'
+    },
+    yAxis: {},
+    series: {
+      type: 'custom',
+      coordinateSystem: 'cartesian2d',
+      animationDurationUpdate: ANIMATION_DURATION_UPDATE,
+      datasetId: 'mTagSum_dataset',
+      encode: {
+        x: 'M_TAG',
+        y: 'COUNT',
+        tooltip: ['M_TAG', 'COUNT', 'WEIGHT']
+      },
+      renderItem: function (params, api) {
+        var mTagVal = api.value('M_TAG');
+        var ataVal = api.value('COUNT');
+        var tarPos = api.coord([mTagVal, ataVal]);
+        var zeroPos = api.coord([mTagVal, 0]);
+        var size = api.size([mTagVal, ataVal]);
+        var width = size[0] * 0.4;
+        return {
+          type: 'rect',
+          morph: true,
+          shape: {
+            x: tarPos[0] - width / 2,
+            y: tarPos[1],
+            height: zeroPos[1] - tarPos[1],
+            width: width
+          },
+          style: {
+            fill: BAR_COLOR
+          },
+          transition: ['shape', 'style']
+        };
+      }
+    }
+  };
 
-    myChart.setOption(option, {
-        replaceMerge: ['xAxis', 'yAxis', 'visualMap'],
-        transition: {
-            from: { seriesIndex: 0, dimension: 'M_TAG' },
-            to: { seriesIndex: 0, dimension: 'M_TAG' }
-        }
-    });
+  myChart.setOption(option, {
+    replaceMerge: ['xAxis', 'yAxis', 'visualMap'],
+    transition: {
+      from: { seriesIndex: 0, dimension: 'M_TAG' },
+      to: { seriesIndex: 0, dimension: 'M_TAG' }
+    }
+  });
 }
 
-
 function getFromPalette(value, palette) {
-    if (!palette.__colorMap) {
-        palette.__colorMap = {};
+  if (!palette.__colorMap) {
+    palette.__colorMap = {};
+  }
+  if (palette.__colorIdx == null) {
+    palette.__colorIdx = 0;
+  }
+  if (!palette.__colorMap[value]) {
+    palette.__colorMap[value] = palette[palette.__colorIdx];
+    palette.__colorIdx++;
+    if (palette.__colorIdx >= palette.length) {
+      palette.__colorIdx = 0;
     }
-    if (palette.__colorIdx == null) {
-        palette.__colorIdx = 0;
-    }
-    if (!palette.__colorMap[value]) {
-        palette.__colorMap[value] = palette[palette.__colorIdx];
-        palette.__colorIdx++;
-        if (palette.__colorIdx >= palette.length) {
-            palette.__colorIdx = 0;
-        }
-    }
-    return palette.__colorMap[value];
+  }
+  return palette.__colorMap[value];
 }
diff --git a/public/examples/ts/archive/custom-aggregate-scatter-cluster.js b/public/examples/ts/archive/custom-aggregate-scatter-cluster.js
index b44e6a0..6d136e6 100644
--- a/public/examples/ts/archive/custom-aggregate-scatter-cluster.js
+++ b/public/examples/ts/archive/custom-aggregate-scatter-cluster.js
@@ -5,210 +5,276 @@
 difficulty: 10
 */
 
-
 var CLUSTER_COLORS = [
-    '#cc5664', '#9bd6ec', '#ea946e', '#8acaaa', '#f1ec64', '#ee8686', '#a48dc1', '#5da6bc', '#b9dcae'
+  '#cc5664',
+  '#9bd6ec',
+  '#ea946e',
+  '#8acaaa',
+  '#f1ec64',
+  '#ee8686',
+  '#a48dc1',
+  '#5da6bc',
+  '#b9dcae'
 ];
 var ANIMATION_DURATION_UPDATE = 1500;
 
-var RAW_DATA = [[1425139200000,34,0.13,2,"MD","ZD","P0"],[1425225600000,28,0.71,1.5,"MB","ZD","P1"],[1425312000000,23,0.9,2.8,"MA","ZC","P2"],[1425398400000,21,0.58,6,"MB","ZC","P3"],[1425484800000,14,0.1,1.6,"MC","ZA","P4"],[1425571200000,21,0.6,7.7,"MC","ZA","P5"],[1425657600000,23,0.31,2.6,"MC","ZC","P6"],[1425744000000,34,0.74,2.4,"MD","ZE","P7"],[1425830400000,14,0.59,2.3,"MB","ZD","P8"],[1425916800000,18,0.85,5.1,"MB","ZB","P9"],[1426003200000,36,0.96,1.2,"MC","ZC","P10"],[1426089600000,18,0.28,2.5,"MA","ZC","P11"],[1426176000000,20,0.62,6,"MB","ZD","P12"],[1426262400000,32,0.79,1.7,"MB","ZA","P13"],[1426348800000,17,0.58,4.4,"MD","ZB","P14"],[1426435200000,23,0.77,3,"MB","ZA","P15"],[1426521600000,39,0.87,4.6,"MC","ZA","P16"],[1426608000000,15,0.7,6,"MB","ZC","P17"],[1426694400000,21,0.94,2.7,"MB","ZD","P18"],[1426780800000,28,0.48,4.5,"MC","ZC","P19"],[1426867200000,31,0.49,9.8,"MA","ZC","P20"],[1426953600000,27,0.87,7.7,"MB","ZB","P21"],[1427040000000,27,0.82,5.5,"MC","ZB","P22"],[1427126400000,11,0.53,2.7,"MD","ZC","P23"],[1427212800000,13,0.7,7.6,"MB","ZD","P24"],[1427299200000,39,0.99,4.8,"MB","ZD","P25"],[1427385600000,32,0.91,2.1,"MB","ZE","P26"],[1427472000000,20,0.97,5,"MB","ZA","P27"],[1427558400000,36,0.01,8.9,"MB","ZD","P28"],[1427644800000,22,0.08,9.2,"MB","ZE","P29"],[1427731200000,21,0.36,3.1,"MD","ZC","P30"],[1427817600000,11,0.15,5.8,"MD","ZB","P31"],[1427904000000,39,0.02,1.4,"MC","ZD","P32"],[1427990400000,20,0.86,8.7,"MB","ZD","P33"],[1428076800000,23,0.24,7.2,"MD","ZB","P34"],[1428163200000,12,0.06,2,"MD","ZB","P35"],[1428249600000,36,0.42,8.2,"MA","ZB","P36"],[1428336000000,17,0.48,7.5,"MB","ZC","P37"],[1428422400000,19,0.12,6.6,"MB","ZB","P38"],[1428508800000,39,0.58,3.1,"MC","ZE","P39"],[1428595200000,10,0.18,6.6,"MC","ZD","P40"],[1428681600000,22,0.28,2.1,"MB","ZE","P41"],[1428768000000,27,0.33,1.9,"MC","ZB","P42"],[1428854400000,37,0.46,9.4,"MD","ZE","P43"],[1428940800000,18,0.96,5.5,"MB","ZA","P44"],[1429027200000,11,0.61,8.2,"MD","ZC","P45"],[1429113600000,15,0.88,4.6,"MD","ZA","P46"],[1429200000000,38,0.89,7.2,"MD","ZC","P47"],[1429286400000,20,0.39,5.4,"MB","ZB","P48"],[1429372800000,30,0.71,5.5,"MA","ZA","P49"]];
-var RAW_DATA_DIMENSIONS = ['DATE', 'COUNT', 'PRICE', 'WEIGHT', 'M_TAG', 'Z_TAG', 'ID'];
-
-
+var RAW_DATA = [
+  [1425139200000, 34, 0.13, 2, 'MD', 'ZD', 'P0'],
+  [1425225600000, 28, 0.71, 1.5, 'MB', 'ZD', 'P1'],
+  [1425312000000, 23, 0.9, 2.8, 'MA', 'ZC', 'P2'],
+  [1425398400000, 21, 0.58, 6, 'MB', 'ZC', 'P3'],
+  [1425484800000, 14, 0.1, 1.6, 'MC', 'ZA', 'P4'],
+  [1425571200000, 21, 0.6, 7.7, 'MC', 'ZA', 'P5'],
+  [1425657600000, 23, 0.31, 2.6, 'MC', 'ZC', 'P6'],
+  [1425744000000, 34, 0.74, 2.4, 'MD', 'ZE', 'P7'],
+  [1425830400000, 14, 0.59, 2.3, 'MB', 'ZD', 'P8'],
+  [1425916800000, 18, 0.85, 5.1, 'MB', 'ZB', 'P9'],
+  [1426003200000, 36, 0.96, 1.2, 'MC', 'ZC', 'P10'],
+  [1426089600000, 18, 0.28, 2.5, 'MA', 'ZC', 'P11'],
+  [1426176000000, 20, 0.62, 6, 'MB', 'ZD', 'P12'],
+  [1426262400000, 32, 0.79, 1.7, 'MB', 'ZA', 'P13'],
+  [1426348800000, 17, 0.58, 4.4, 'MD', 'ZB', 'P14'],
+  [1426435200000, 23, 0.77, 3, 'MB', 'ZA', 'P15'],
+  [1426521600000, 39, 0.87, 4.6, 'MC', 'ZA', 'P16'],
+  [1426608000000, 15, 0.7, 6, 'MB', 'ZC', 'P17'],
+  [1426694400000, 21, 0.94, 2.7, 'MB', 'ZD', 'P18'],
+  [1426780800000, 28, 0.48, 4.5, 'MC', 'ZC', 'P19'],
+  [1426867200000, 31, 0.49, 9.8, 'MA', 'ZC', 'P20'],
+  [1426953600000, 27, 0.87, 7.7, 'MB', 'ZB', 'P21'],
+  [1427040000000, 27, 0.82, 5.5, 'MC', 'ZB', 'P22'],
+  [1427126400000, 11, 0.53, 2.7, 'MD', 'ZC', 'P23'],
+  [1427212800000, 13, 0.7, 7.6, 'MB', 'ZD', 'P24'],
+  [1427299200000, 39, 0.99, 4.8, 'MB', 'ZD', 'P25'],
+  [1427385600000, 32, 0.91, 2.1, 'MB', 'ZE', 'P26'],
+  [1427472000000, 20, 0.97, 5, 'MB', 'ZA', 'P27'],
+  [1427558400000, 36, 0.01, 8.9, 'MB', 'ZD', 'P28'],
+  [1427644800000, 22, 0.08, 9.2, 'MB', 'ZE', 'P29'],
+  [1427731200000, 21, 0.36, 3.1, 'MD', 'ZC', 'P30'],
+  [1427817600000, 11, 0.15, 5.8, 'MD', 'ZB', 'P31'],
+  [1427904000000, 39, 0.02, 1.4, 'MC', 'ZD', 'P32'],
+  [1427990400000, 20, 0.86, 8.7, 'MB', 'ZD', 'P33'],
+  [1428076800000, 23, 0.24, 7.2, 'MD', 'ZB', 'P34'],
+  [1428163200000, 12, 0.06, 2, 'MD', 'ZB', 'P35'],
+  [1428249600000, 36, 0.42, 8.2, 'MA', 'ZB', 'P36'],
+  [1428336000000, 17, 0.48, 7.5, 'MB', 'ZC', 'P37'],
+  [1428422400000, 19, 0.12, 6.6, 'MB', 'ZB', 'P38'],
+  [1428508800000, 39, 0.58, 3.1, 'MC', 'ZE', 'P39'],
+  [1428595200000, 10, 0.18, 6.6, 'MC', 'ZD', 'P40'],
+  [1428681600000, 22, 0.28, 2.1, 'MB', 'ZE', 'P41'],
+  [1428768000000, 27, 0.33, 1.9, 'MC', 'ZB', 'P42'],
+  [1428854400000, 37, 0.46, 9.4, 'MD', 'ZE', 'P43'],
+  [1428940800000, 18, 0.96, 5.5, 'MB', 'ZA', 'P44'],
+  [1429027200000, 11, 0.61, 8.2, 'MD', 'ZC', 'P45'],
+  [1429113600000, 15, 0.88, 4.6, 'MD', 'ZA', 'P46'],
+  [1429200000000, 38, 0.89, 7.2, 'MD', 'ZC', 'P47'],
+  [1429286400000, 20, 0.39, 5.4, 'MB', 'ZB', 'P48'],
+  [1429372800000, 30, 0.71, 5.5, 'MA', 'ZA', 'P49']
+];
+var RAW_DATA_DIMENSIONS = [
+  'DATE',
+  'COUNT',
+  'PRICE',
+  'WEIGHT',
+  'M_TAG',
+  'Z_TAG',
+  'ID'
+];
 
 $.when(
-    $.getScript('https://cdn.jsdelivr.net/npm/echarts-stat@1.2.0/dist/ecStat.min.js'),
-    $.getScript('https://cdn.jsdelivr.net/npm/echarts-simple-transform@1.0.0/dist/ecSimpleTransform.min.js')
+  $.getScript(
+    'https://fastly.jsdelivr.net/npm/echarts-stat@1.2.0/dist/ecStat.min.js'
+  ),
+  $.getScript(
+    'https://fastly.jsdelivr.net/npm/echarts-simple-transform@1.0.0/dist/ecSimpleTransform.min.js'
+  )
 ).done(function () {
+  init();
 
-    init();
+  var currentIsClustered = false;
+  setRawScatterOption();
 
-    var currentIsClustered = false;
-    setRawScatterOption();
-
-    setInterval(function () {
-        if (currentIsClustered) {
-            currentIsClustered = false;
-            setRawScatterOption();
-        }
-        else {
-            currentIsClustered = true;
-            setClusteredScatterOption();
-        }
-    }, 3000);
-
+  setInterval(function () {
+    if (currentIsClustered) {
+      currentIsClustered = false;
+      setRawScatterOption();
+    } else {
+      currentIsClustered = true;
+      setClusteredScatterOption();
+    }
+  }, 3000);
 });
 
-
-
 function init() {
+  echarts.registerTransform(ecSimpleTransform.aggregate);
+  echarts.registerTransform(ecStat.transform.clustering);
 
-    echarts.registerTransform(ecSimpleTransform.aggregate);
-    echarts.registerTransform(ecStat.transform.clustering);
+  var baseOption = {
+    dataset: [
+      {
+        id: 'raw_dataset',
+        dimensions: RAW_DATA_DIMENSIONS,
+        source: RAW_DATA
+      },
+      {
+        id: 'raw_clustered_dataset',
+        fromDatasetId: 'raw_dataset',
+        transform: {
+          type: 'ecStat:clustering',
+          print: true,
+          config: {
+            clusterCount: 4,
+            dimensions: ['COUNT', 'PRICE'],
+            outputClusterIndexDimension: {
+              index: RAW_DATA_DIMENSIONS.length,
+              name: 'CLUSTER_IDX'
+            },
+            outputCentroidDimensions: [
+              {
+                index: RAW_DATA_DIMENSIONS.length + 1,
+                name: 'CLUSTER_CENTER_COUNT'
+              },
+              {
+                index: RAW_DATA_DIMENSIONS.length + 2,
+                name: 'CLUSTER_CENTER_PRICE'
+              }
+            ]
+          }
+        }
+      },
+      {
+        id: 'raw_cluster_centers_dataset',
+        fromDatasetId: 'raw_clustered_dataset',
+        transform: {
+          type: 'ecSimpleTransform:aggregate',
+          print: true,
+          config: {
+            resultDimensions: [
+              { from: 'COUNT', method: 'count' },
+              { from: 'CLUSTER_CENTER_COUNT', method: 'first' },
+              { from: 'CLUSTER_CENTER_PRICE', method: 'first' },
+              { from: 'CLUSTER_IDX' }
+            ],
+            groupBy: 'CLUSTER_IDX'
+          }
+        }
+      }
+    ],
+    tooltip: {}
+  };
 
-    var baseOption = {
-        dataset: [{
-            id: 'raw_dataset',
-            dimensions: RAW_DATA_DIMENSIONS,
-            source: RAW_DATA
-        }, {
-            id: 'raw_clustered_dataset',
-            fromDatasetId: 'raw_dataset',
-            transform: {
-                type: 'ecStat:clustering',
-                print: true,
-                config: {
-                    clusterCount: 4,
-                    dimensions: ['COUNT', 'PRICE'],
-                    outputClusterIndexDimension: {
-                        index: RAW_DATA_DIMENSIONS.length,
-                        name: 'CLUSTER_IDX'
-                    },
-                    outputCentroidDimensions: [{
-                        index: RAW_DATA_DIMENSIONS.length + 1,
-                        name: 'CLUSTER_CENTER_COUNT'
-                    }, {
-                        index: RAW_DATA_DIMENSIONS.length + 2,
-                        name: 'CLUSTER_CENTER_PRICE'
-                    }]
-                }
-            }
-        }, {
-            id: 'raw_cluster_centers_dataset',
-            fromDatasetId: 'raw_clustered_dataset',
-            transform: {
-                type: 'ecSimpleTransform:aggregate',
-                print: true,
-                config: {
-                    resultDimensions: [
-                        { from: 'COUNT', method: 'count' },
-                        { from: 'CLUSTER_CENTER_COUNT', method: 'first' },
-                        { from: 'CLUSTER_CENTER_PRICE', method: 'first' },
-                        { from: 'CLUSTER_IDX' }
-                    ],
-                    groupBy: 'CLUSTER_IDX'
-                }
-            }
-        }],
-        tooltip: {}
-    };
-
-    myChart.setOption(baseOption, { lazyUpdate: true });
+  myChart.setOption(baseOption, { lazyUpdate: true });
 }
 
 function setRawScatterOption() {
-    var option = {
-        grid: {
-            containLabel: true
-        },
-        xAxis: {
-            name: 'PRICE'
-        },
-        yAxis: {
-            name: 'COUNT'
-        },
-        series: {
-            type: 'custom',
-            coordinateSystem: 'cartesian2d',
-            animationDurationUpdate: ANIMATION_DURATION_UPDATE,
-            datasetId: 'raw_clustered_dataset',
-            encode: {
-                itemName: 'ID',
-                x: 'PRICE',
-                y: 'COUNT',
-                tooltip: ['PRICE', 'COUNT', 'WEIGHT']
-            },
-            renderItem: function (params, api) {
-                var pos = api.coord([
-                    api.value('PRICE'),
-                    api.value('COUNT')
-                ]);
-                return {
-                    type: 'circle',
-                    morph: true,
-                    shape: {
-                        cx: pos[0],
-                        cy: pos[1],
-                        r: 10
-                    },
-                    style: {
-                        fill: '#5470c6'
-                    },
-                    transition: ['shape', 'style']
-                };
-            }
-        }
-    };
+  var option = {
+    grid: {
+      containLabel: true
+    },
+    xAxis: {
+      name: 'PRICE'
+    },
+    yAxis: {
+      name: 'COUNT'
+    },
+    series: {
+      type: 'custom',
+      coordinateSystem: 'cartesian2d',
+      animationDurationUpdate: ANIMATION_DURATION_UPDATE,
+      datasetId: 'raw_clustered_dataset',
+      encode: {
+        itemName: 'ID',
+        x: 'PRICE',
+        y: 'COUNT',
+        tooltip: ['PRICE', 'COUNT', 'WEIGHT']
+      },
+      renderItem: function (params, api) {
+        var pos = api.coord([api.value('PRICE'), api.value('COUNT')]);
+        return {
+          type: 'circle',
+          morph: true,
+          shape: {
+            cx: pos[0],
+            cy: pos[1],
+            r: 10
+          },
+          style: {
+            fill: '#5470c6'
+          },
+          transition: ['shape', 'style']
+        };
+      }
+    }
+  };
 
-    myChart.setOption(option, {
-        replaceMerge: ['xAxis', 'yAxis'],
-        transition: {
-            from: { seriesIndex: 0, dimension: 'CLUSTER_IDX' },
-            to: { seriesIndex: 0, dimension: 'CLUSTER_IDX' }
-        }
-    });
+  myChart.setOption(option, {
+    replaceMerge: ['xAxis', 'yAxis'],
+    transition: {
+      from: { seriesIndex: 0, dimension: 'CLUSTER_IDX' },
+      to: { seriesIndex: 0, dimension: 'CLUSTER_IDX' }
+    }
+  });
 }
 
 function setClusteredScatterOption() {
-    var option = {
-        grid: {
-            containLabel: true
-        },
-        xAxis: {
-            name: 'PRICE'
-        },
-        yAxis: {
-            name: 'COUNT'
-        },
-        series: {
-            type: 'custom',
-            coordinateSystem: 'cartesian2d',
-            animationDurationUpdate: ANIMATION_DURATION_UPDATE,
-            datasetId: 'raw_cluster_centers_dataset',
-            encode: {
-                x: 'CLUSTER_CENTER_PRICE',
-                y: 'CLUSTER_CENTER_COUNT',
-                tooltip: ['CLUSTER_CENTER_PRICE', 'CLUSTER_CENTER_COUNT']
-            },
-            renderItem: function (params, api) {
-                var context = params.context;
-                if (!context.layout) {
-                    context.layout = true;
-                    context.totalCount = 0;
-                    for (var i = 0; i < params.dataInsideLength; i++) {
-                        context.totalCount += api.value('COUNT', i);
-                    }
-                }
-
-                var pos = api.coord([
-                    api.value('CLUSTER_CENTER_PRICE'),
-                    api.value('CLUSTER_CENTER_COUNT')
-                ]);
-                var count = api.value('COUNT');
-                var radius = count / context.totalCount * 100 + 10;
-                return {
-                    type: 'circle',
-                    morph: true,
-                    shape: {
-                        cx: pos[0],
-                        cy: pos[1],
-                        r: radius,
-                    },
-                    style: {
-                        // fill: CONTENT_COLOR,
-                        fill: CLUSTER_COLORS[params.dataIndex]
-                    },
-                    transition: ['shape', 'style']
-                };
-            }
+  var option = {
+    grid: {
+      containLabel: true
+    },
+    xAxis: {
+      name: 'PRICE'
+    },
+    yAxis: {
+      name: 'COUNT'
+    },
+    series: {
+      type: 'custom',
+      coordinateSystem: 'cartesian2d',
+      animationDurationUpdate: ANIMATION_DURATION_UPDATE,
+      datasetId: 'raw_cluster_centers_dataset',
+      encode: {
+        x: 'CLUSTER_CENTER_PRICE',
+        y: 'CLUSTER_CENTER_COUNT',
+        tooltip: ['CLUSTER_CENTER_PRICE', 'CLUSTER_CENTER_COUNT']
+      },
+      renderItem: function (params, api) {
+        var context = params.context;
+        if (!context.layout) {
+          context.layout = true;
+          context.totalCount = 0;
+          for (var i = 0; i < params.dataInsideLength; i++) {
+            context.totalCount += api.value('COUNT', i);
+          }
         }
-    };
 
-    myChart.setOption(option, {
-        replaceMerge: ['xAxis', 'yAxis'],
-        transition: {
-            from: { seriesIndex: 0, dimension: 'CLUSTER_IDX' },
-            to: { seriesIndex: 0, dimension: 'CLUSTER_IDX' }
-        }
-    });
+        var pos = api.coord([
+          api.value('CLUSTER_CENTER_PRICE'),
+          api.value('CLUSTER_CENTER_COUNT')
+        ]);
+        var count = api.value('COUNT');
+        var radius = (count / context.totalCount) * 100 + 10;
+        return {
+          type: 'circle',
+          morph: true,
+          shape: {
+            cx: pos[0],
+            cy: pos[1],
+            r: radius
+          },
+          style: {
+            // fill: CONTENT_COLOR,
+            fill: CLUSTER_COLORS[params.dataIndex]
+          },
+          transition: ['shape', 'style']
+        };
+      }
+    }
+  };
+
+  myChart.setOption(option, {
+    replaceMerge: ['xAxis', 'yAxis'],
+    transition: {
+      from: { seriesIndex: 0, dimension: 'CLUSTER_IDX' },
+      to: { seriesIndex: 0, dimension: 'CLUSTER_IDX' }
+    }
+  });
 }
diff --git a/public/examples/ts/archive/custom-aggregate-scatter-pie.js b/public/examples/ts/archive/custom-aggregate-scatter-pie.js
index a851a35..eb86c2a 100644
--- a/public/examples/ts/archive/custom-aggregate-scatter-pie.js
+++ b/public/examples/ts/archive/custom-aggregate-scatter-pie.js
@@ -5,185 +5,242 @@
 difficulty: 9
 */
 
-
 var PIE_COLORS = [
-    '#e06343', '#37a354', '#b55dba', '#b5bd48', '#8378EA', '#96BFFF'
+  '#e06343',
+  '#37a354',
+  '#b55dba',
+  '#b5bd48',
+  '#8378EA',
+  '#96BFFF'
 ];
 var ANIMATION_DURATION_UPDATE = 1500;
 
-var RAW_DATA = [[1425139200000,34,0.13,2,"MD","ZD","P0"],[1425225600000,28,0.71,1.5,"MB","ZD","P1"],[1425312000000,23,0.9,2.8,"MA","ZC","P2"],[1425398400000,21,0.58,6,"MB","ZC","P3"],[1425484800000,14,0.1,1.6,"MC","ZA","P4"],[1425571200000,21,0.6,7.7,"MC","ZA","P5"],[1425657600000,23,0.31,2.6,"MC","ZC","P6"],[1425744000000,34,0.74,2.4,"MD","ZE","P7"],[1425830400000,14,0.59,2.3,"MB","ZD","P8"],[1425916800000,18,0.85,5.1,"MB","ZB","P9"],[1426003200000,36,0.96,1.2,"MC","ZC","P10"],[1426089600000,18,0.28,2.5,"MA","ZC","P11"],[1426176000000,20,0.62,6,"MB","ZD","P12"],[1426262400000,32,0.79,1.7,"MB","ZA","P13"],[1426348800000,17,0.58,4.4,"MD","ZB","P14"],[1426435200000,23,0.77,3,"MB","ZA","P15"],[1426521600000,39,0.87,4.6,"MC","ZA","P16"],[1426608000000,15,0.7,6,"MB","ZC","P17"],[1426694400000,21,0.94,2.7,"MB","ZD","P18"],[1426780800000,28,0.48,4.5,"MC","ZC","P19"],[1426867200000,31,0.49,9.8,"MA","ZC","P20"],[1426953600000,27,0.87,7.7,"MB","ZB","P21"],[1427040000000,27,0.82,5.5,"MC","ZB","P22"],[1427126400000,11,0.53,2.7,"MD","ZC","P23"],[1427212800000,13,0.7,7.6,"MB","ZD","P24"],[1427299200000,39,0.99,4.8,"MB","ZD","P25"],[1427385600000,32,0.91,2.1,"MB","ZE","P26"],[1427472000000,20,0.97,5,"MB","ZA","P27"],[1427558400000,36,0.01,8.9,"MB","ZD","P28"],[1427644800000,22,0.08,9.2,"MB","ZE","P29"],[1427731200000,21,0.36,3.1,"MD","ZC","P30"],[1427817600000,11,0.15,5.8,"MD","ZB","P31"],[1427904000000,39,0.02,1.4,"MC","ZD","P32"],[1427990400000,20,0.86,8.7,"MB","ZD","P33"],[1428076800000,23,0.24,7.2,"MD","ZB","P34"],[1428163200000,12,0.06,2,"MD","ZB","P35"],[1428249600000,36,0.42,8.2,"MA","ZB","P36"],[1428336000000,17,0.48,7.5,"MB","ZC","P37"],[1428422400000,19,0.12,6.6,"MB","ZB","P38"],[1428508800000,39,0.58,3.1,"MC","ZE","P39"],[1428595200000,10,0.18,6.6,"MC","ZD","P40"],[1428681600000,22,0.28,2.1,"MB","ZE","P41"],[1428768000000,27,0.33,1.9,"MC","ZB","P42"],[1428854400000,37,0.46,9.4,"MD","ZE","P43"],[1428940800000,18,0.96,5.5,"MB","ZA","P44"],[1429027200000,11,0.61,8.2,"MD","ZC","P45"],[1429113600000,15,0.88,4.6,"MD","ZA","P46"],[1429200000000,38,0.89,7.2,"MD","ZC","P47"],[1429286400000,20,0.39,5.4,"MB","ZB","P48"],[1429372800000,30,0.71,5.5,"MA","ZA","P49"]];
-
-
+var RAW_DATA = [
+  [1425139200000, 34, 0.13, 2, 'MD', 'ZD', 'P0'],
+  [1425225600000, 28, 0.71, 1.5, 'MB', 'ZD', 'P1'],
+  [1425312000000, 23, 0.9, 2.8, 'MA', 'ZC', 'P2'],
+  [1425398400000, 21, 0.58, 6, 'MB', 'ZC', 'P3'],
+  [1425484800000, 14, 0.1, 1.6, 'MC', 'ZA', 'P4'],
+  [1425571200000, 21, 0.6, 7.7, 'MC', 'ZA', 'P5'],
+  [1425657600000, 23, 0.31, 2.6, 'MC', 'ZC', 'P6'],
+  [1425744000000, 34, 0.74, 2.4, 'MD', 'ZE', 'P7'],
+  [1425830400000, 14, 0.59, 2.3, 'MB', 'ZD', 'P8'],
+  [1425916800000, 18, 0.85, 5.1, 'MB', 'ZB', 'P9'],
+  [1426003200000, 36, 0.96, 1.2, 'MC', 'ZC', 'P10'],
+  [1426089600000, 18, 0.28, 2.5, 'MA', 'ZC', 'P11'],
+  [1426176000000, 20, 0.62, 6, 'MB', 'ZD', 'P12'],
+  [1426262400000, 32, 0.79, 1.7, 'MB', 'ZA', 'P13'],
+  [1426348800000, 17, 0.58, 4.4, 'MD', 'ZB', 'P14'],
+  [1426435200000, 23, 0.77, 3, 'MB', 'ZA', 'P15'],
+  [1426521600000, 39, 0.87, 4.6, 'MC', 'ZA', 'P16'],
+  [1426608000000, 15, 0.7, 6, 'MB', 'ZC', 'P17'],
+  [1426694400000, 21, 0.94, 2.7, 'MB', 'ZD', 'P18'],
+  [1426780800000, 28, 0.48, 4.5, 'MC', 'ZC', 'P19'],
+  [1426867200000, 31, 0.49, 9.8, 'MA', 'ZC', 'P20'],
+  [1426953600000, 27, 0.87, 7.7, 'MB', 'ZB', 'P21'],
+  [1427040000000, 27, 0.82, 5.5, 'MC', 'ZB', 'P22'],
+  [1427126400000, 11, 0.53, 2.7, 'MD', 'ZC', 'P23'],
+  [1427212800000, 13, 0.7, 7.6, 'MB', 'ZD', 'P24'],
+  [1427299200000, 39, 0.99, 4.8, 'MB', 'ZD', 'P25'],
+  [1427385600000, 32, 0.91, 2.1, 'MB', 'ZE', 'P26'],
+  [1427472000000, 20, 0.97, 5, 'MB', 'ZA', 'P27'],
+  [1427558400000, 36, 0.01, 8.9, 'MB', 'ZD', 'P28'],
+  [1427644800000, 22, 0.08, 9.2, 'MB', 'ZE', 'P29'],
+  [1427731200000, 21, 0.36, 3.1, 'MD', 'ZC', 'P30'],
+  [1427817600000, 11, 0.15, 5.8, 'MD', 'ZB', 'P31'],
+  [1427904000000, 39, 0.02, 1.4, 'MC', 'ZD', 'P32'],
+  [1427990400000, 20, 0.86, 8.7, 'MB', 'ZD', 'P33'],
+  [1428076800000, 23, 0.24, 7.2, 'MD', 'ZB', 'P34'],
+  [1428163200000, 12, 0.06, 2, 'MD', 'ZB', 'P35'],
+  [1428249600000, 36, 0.42, 8.2, 'MA', 'ZB', 'P36'],
+  [1428336000000, 17, 0.48, 7.5, 'MB', 'ZC', 'P37'],
+  [1428422400000, 19, 0.12, 6.6, 'MB', 'ZB', 'P38'],
+  [1428508800000, 39, 0.58, 3.1, 'MC', 'ZE', 'P39'],
+  [1428595200000, 10, 0.18, 6.6, 'MC', 'ZD', 'P40'],
+  [1428681600000, 22, 0.28, 2.1, 'MB', 'ZE', 'P41'],
+  [1428768000000, 27, 0.33, 1.9, 'MC', 'ZB', 'P42'],
+  [1428854400000, 37, 0.46, 9.4, 'MD', 'ZE', 'P43'],
+  [1428940800000, 18, 0.96, 5.5, 'MB', 'ZA', 'P44'],
+  [1429027200000, 11, 0.61, 8.2, 'MD', 'ZC', 'P45'],
+  [1429113600000, 15, 0.88, 4.6, 'MD', 'ZA', 'P46'],
+  [1429200000000, 38, 0.89, 7.2, 'MD', 'ZC', 'P47'],
+  [1429286400000, 20, 0.39, 5.4, 'MB', 'ZB', 'P48'],
+  [1429372800000, 30, 0.71, 5.5, 'MA', 'ZA', 'P49']
+];
 
 $.when(
-    $.getScript('https://cdn.jsdelivr.net/npm/echarts-simple-transform@1.0.0/dist/ecSimpleTransform.min.js')
+  $.getScript(
+    'https://fastly.jsdelivr.net/npm/echarts-simple-transform@1.0.0/dist/ecSimpleTransform.min.js'
+  )
 ).done(function () {
+  init();
 
-    init();
+  var currentIsPie = false;
+  setScatterOption();
 
-    var currentIsPie = false;
-    setScatterOption();
-
-    setInterval(function () {
-        if (currentIsPie) {
-            currentIsPie = false;
-            setScatterOption();
-        }
-        else {
-            currentIsPie = true;
-            setPieOption();
-        }
-    }, 3000);
-
+  setInterval(function () {
+    if (currentIsPie) {
+      currentIsPie = false;
+      setScatterOption();
+    } else {
+      currentIsPie = true;
+      setPieOption();
+    }
+  }, 3000);
 });
 
-
-
 function init() {
+  echarts.registerTransform(ecSimpleTransform.aggregate);
 
-    echarts.registerTransform(ecSimpleTransform.aggregate);
+  var baseOption = {
+    dataset: [
+      {
+        id: 'raw_dataset',
+        dimensions: [
+          'DATE',
+          'COUNT',
+          'PRICE',
+          'WEIGHT',
+          'M_TAG',
+          'Z_TAG',
+          'ID'
+        ],
+        source: RAW_DATA
+      },
+      {
+        id: 'mTagSum_dataset',
+        fromDatasetId: 'raw_dataset',
+        transform: {
+          type: 'ecSimpleTransform:aggregate',
+          config: {
+            resultDimensions: [
+              { from: 'COUNT', method: 'sum' },
+              { from: 'PRICE', method: 'sum' },
+              { from: 'WEIGHT', method: 'sum' },
+              { from: 'M_TAG' }
+            ],
+            groupBy: 'M_TAG'
+          }
+        }
+      }
+    ],
+    tooltip: {}
+  };
 
-    var baseOption = {
-        dataset: [{
-            id: 'raw_dataset',
-            dimensions: ['DATE', 'COUNT', 'PRICE', 'WEIGHT', 'M_TAG', 'Z_TAG', 'ID'],
-            source: RAW_DATA
-        }, {
-            id: 'mTagSum_dataset',
-            fromDatasetId: 'raw_dataset',
-            transform: {
-                type: 'ecSimpleTransform:aggregate',
-                config: {
-                    resultDimensions: [
-                        { from: 'COUNT', method: 'sum' },
-                        { from: 'PRICE', method: 'sum' },
-                        { from: 'WEIGHT', method: 'sum' },
-                        { from: 'M_TAG' }
-                    ],
-                    groupBy: 'M_TAG'
-                }
-            }
-        }],
-        tooltip: {}
-    };
-
-    myChart.setOption(baseOption, { lazyUpdate: true });
+  myChart.setOption(baseOption, { lazyUpdate: true });
 }
 
 function setScatterOption() {
-    var option = {
-        grid: {
-            containLabel: true
-        },
-        xAxis: {
-            name: 'PRICE'
-        },
-        yAxis: {
-            name: 'COUNT'
-        },
-        series: {
-            type: 'custom',
-            coordinateSystem: 'cartesian2d',
-            animationDurationUpdate: ANIMATION_DURATION_UPDATE,
-            datasetId: 'raw_dataset',
-            encode: {
-                itemName: 'ID',
-                x: 'PRICE',
-                y: 'COUNT',
-                tooltip: ['PRICE', 'COUNT', 'WEIGHT']
-            },
-            renderItem: function (params, api) {
-                var pos = api.coord([
-                    api.value('PRICE'),
-                    api.value('COUNT')
-                ]);
-                return {
-                    type: 'circle',
-                    morph: true,
-                    shape: {
-                        cx: pos[0],
-                        cy: pos[1],
-                        r: 10
-                    },
-                    style: {
-                        fill: '#5470c6'
-                    },
-                    transition: ['shape', 'style']
-                };
-            }
-        }
-    };
+  var option = {
+    grid: {
+      containLabel: true
+    },
+    xAxis: {
+      name: 'PRICE'
+    },
+    yAxis: {
+      name: 'COUNT'
+    },
+    series: {
+      type: 'custom',
+      coordinateSystem: 'cartesian2d',
+      animationDurationUpdate: ANIMATION_DURATION_UPDATE,
+      datasetId: 'raw_dataset',
+      encode: {
+        itemName: 'ID',
+        x: 'PRICE',
+        y: 'COUNT',
+        tooltip: ['PRICE', 'COUNT', 'WEIGHT']
+      },
+      renderItem: function (params, api) {
+        var pos = api.coord([api.value('PRICE'), api.value('COUNT')]);
+        return {
+          type: 'circle',
+          morph: true,
+          shape: {
+            cx: pos[0],
+            cy: pos[1],
+            r: 10
+          },
+          style: {
+            fill: '#5470c6'
+          },
+          transition: ['shape', 'style']
+        };
+      }
+    }
+  };
 
-    myChart.setOption(option, {
-        replaceMerge: ['xAxis', 'yAxis'],
-        transition: {
-            from: { seriesIndex: 0, dimension: 'M_TAG' },
-            to: { seriesIndex: 0, dimension: 'M_TAG' }
-        }
-    });
+  myChart.setOption(option, {
+    replaceMerge: ['xAxis', 'yAxis'],
+    transition: {
+      from: { seriesIndex: 0, dimension: 'M_TAG' },
+      to: { seriesIndex: 0, dimension: 'M_TAG' }
+    }
+  });
 }
 
 function setPieOption() {
-    var option = {
-        series: {
-            type: 'custom',
-            coordinateSystem: 'none',
-            animationDurationUpdate: ANIMATION_DURATION_UPDATE,
-            datasetId: 'mTagSum_dataset',
-            encode: {
-                itemName: 'ID',
-                value: 'COUNT',
-                tooltip: ['PRICE', 'COUNT', 'WEIGHT']
-            },
-            renderItem: function (params, api) {
-                var context = params.context;
-                if (!context.layout) {
-                    context.layout = true;
-                    var totalValue = 0;
-                    for (var i = 0; i < params.dataInsideLength; i++) {
-                        totalValue += api.value('COUNT', i);
-                    }
-                    var angles = [];
-                    var colors = [];
-                    var currentAngle = -Math.PI / 2;
-                    for (var i = 0; i < params.dataInsideLength; i++) {
-                        colors.push(PIE_COLORS[i]);
-                        var angle = api.value('COUNT', i) / totalValue * Math.PI * 2;
-                        angles.push([currentAngle, angle + currentAngle - 0.01]);
-                        currentAngle += angle;
-                    }
-                    context.angles = angles;
-                    context.colors = colors;
-                }
-
-                var width = myChart.getWidth();
-                var height = myChart.getHeight();
-                return {
-                    type: 'sector',
-                    morph: true,
-                    shape: {
-                        cx: width / 2,
-                        cy: height / 2,
-                        r: Math.min(width, height) / 3,
-                        r0: Math.min(width, height) / 5,
-                        startAngle: context.angles[params.dataIndex][0],
-                        endAngle: context.angles[params.dataIndex][1],
-                        clockwise: true
-                    },
-                    style: {
-                        fill: context.colors[params.dataIndex]
-                    },
-                    transition: ['shape', 'style']
-                };
-            }
+  var option = {
+    series: {
+      type: 'custom',
+      coordinateSystem: 'none',
+      animationDurationUpdate: ANIMATION_DURATION_UPDATE,
+      datasetId: 'mTagSum_dataset',
+      encode: {
+        itemName: 'ID',
+        value: 'COUNT',
+        tooltip: ['PRICE', 'COUNT', 'WEIGHT']
+      },
+      renderItem: function (params, api) {
+        var context = params.context;
+        if (!context.layout) {
+          context.layout = true;
+          var totalValue = 0;
+          for (var i = 0; i < params.dataInsideLength; i++) {
+            totalValue += api.value('COUNT', i);
+          }
+          var angles = [];
+          var colors = [];
+          var currentAngle = -Math.PI / 2;
+          for (var i = 0; i < params.dataInsideLength; i++) {
+            colors.push(PIE_COLORS[i]);
+            var angle = (api.value('COUNT', i) / totalValue) * Math.PI * 2;
+            angles.push([currentAngle, angle + currentAngle - 0.01]);
+            currentAngle += angle;
+          }
+          context.angles = angles;
+          context.colors = colors;
         }
-    };
 
-    myChart.setOption(option, {
-        replaceMerge: ['xAxis', 'yAxis', 'visualMap'],
-        transition: {
-            from: { seriesIndex: 0, dimension: 'M_TAG' },
-            to: { seriesIndex: 0, dimension: 'M_TAG' }
-        }
-    });
+        var width = myChart.getWidth();
+        var height = myChart.getHeight();
+        return {
+          type: 'sector',
+          morph: true,
+          shape: {
+            cx: width / 2,
+            cy: height / 2,
+            r: Math.min(width, height) / 3,
+            r0: Math.min(width, height) / 5,
+            startAngle: context.angles[params.dataIndex][0],
+            endAngle: context.angles[params.dataIndex][1],
+            clockwise: true
+          },
+          style: {
+            fill: context.colors[params.dataIndex]
+          },
+          transition: ['shape', 'style']
+        };
+      }
+    }
+  };
+
+  myChart.setOption(option, {
+    replaceMerge: ['xAxis', 'yAxis', 'visualMap'],
+    transition: {
+      from: { seriesIndex: 0, dimension: 'M_TAG' },
+      to: { seriesIndex: 0, dimension: 'M_TAG' }
+    }
+  });
 }
diff --git a/public/examples/ts/archive/custom-combine-separate-morph.js b/public/examples/ts/archive/custom-combine-separate-morph.js
index 0e3a2f3..a8be9d6 100644
--- a/public/examples/ts/archive/custom-combine-separate-morph.js
+++ b/public/examples/ts/archive/custom-combine-separate-morph.js
@@ -5,504 +5,572 @@
 difficulty: 11
 */
 
-
 var PIE_COLORS = [
-    '#e06343', '#37a354', '#b55dba', '#b5bd48', '#8378EA', '#96BFFF'
+  '#e06343',
+  '#37a354',
+  '#b55dba',
+  '#b5bd48',
+  '#8378EA',
+  '#96BFFF'
 ];
 var CLUSTER_COLORS = [
-    '#cc5664', '#9bd6ec', '#ea946e', '#8acaaa', '#f1ec64', '#ee8686', '#a48dc1', '#5da6bc', '#b9dcae'
+  '#cc5664',
+  '#9bd6ec',
+  '#ea946e',
+  '#8acaaa',
+  '#f1ec64',
+  '#ee8686',
+  '#a48dc1',
+  '#5da6bc',
+  '#b9dcae'
 ];
 var Z_TAG_COLORS = [
-    '#5470c6',
-    '#91cc75',
-    '#fac858',
-    '#ee6666',
-    '#73c0de',
-    '#3ba272',
-    '#fc8452',
-    '#9a60b4',
-    '#ea7ccc'
+  '#5470c6',
+  '#91cc75',
+  '#fac858',
+  '#ee6666',
+  '#73c0de',
+  '#3ba272',
+  '#fc8452',
+  '#9a60b4',
+  '#ea7ccc'
 ];
 var Z_TAG_COLORS_2 = [
-    '#51689b', '#ce5c5c', '#fbc357', '#8fbf8f', '#659d84', '#fb8e6a', '#c77288', '#786090',
-    '#91c4c5', '#6890ba'
+  '#51689b',
+  '#ce5c5c',
+  '#fbc357',
+  '#8fbf8f',
+  '#659d84',
+  '#fb8e6a',
+  '#c77288',
+  '#786090',
+  '#91c4c5',
+  '#6890ba'
 ];
 var SYMBOL_PATHS = [
-    'path://m67.25,28.9c27.42,-69.1 134.84,0 0,88.85c-134.84,-88.85 -27.42,-157.96 0,-88.85z',
-    'path://M16 0c-8.837 0-16 7.163-16 16s7.163 16 16 16 16-7.163 16-16-7.163-16-16-16zM22 8c1.105 0 2 1.343 2 3s-0.895 3-2 3-2-1.343-2-3 0.895-3 2-3zM10 8c1.105 0 2 1.343 2 3s-0.895 3-2 3-2-1.343-2-3 0.895-3 2-3zM16 28c-5.215 0-9.544-4.371-10-9.947 2.93 1.691 6.377 2.658 10 2.658s7.070-0.963 10-2.654c-0.455 5.576-4.785 9.942-10 9.942z',
-    'path://M16 0c-8.837 0-16 7.163-16 16s7.163 16 16 16c8.837 0 16-7.163 16-16s-7.163-16-16-16zM22 7.375c1.999 0 3.625 1.626 3.625 3.625 0 0.199-0.017 0.402-0.051 0.604-0.051 0.301-0.311 0.521-0.616 0.521s-0.566-0.22-0.616-0.522c-0.192-1.146-1.177-1.666-2.341-1.666s-2.149 0.52-2.341 1.666c-0.050 0.301-0.311 0.522-0.616 0.522-0 0 0 0-0 0-0.305 0-0.566-0.22-0.616-0.521-0.034-0.201-0.051-0.404-0.051-0.604 0-1.999 1.626-3.625 3.625-3.625zM10 7.375c1.999 0 3.625 1.626 3.625 3.625 0 0.199-0.017 0.402-0.051 0.604-0.051 0.301-0.311 0.521-0.616 0.521s-0.566-0.22-0.616-0.522c-0.193-1.146-1.177-1.666-2.341-1.666s-2.149 0.52-2.341 1.666c-0.051 0.301-0.311 0.522-0.616 0.522 0 0 0 0 0 0-0.305 0-0.566-0.22-0.616-0.521-0.034-0.201-0.051-0.404-0.051-0.604 0-1.999 1.626-3.625 3.625-3.625zM6 18h6v7.745c-3.44-0.894-6-4.035-6-7.745zM14 26v-8h4v8h-4zM20 25.745v-7.745h6c0 3.71-2.559 6.851-6 7.745z',
-    'path://M23.6 2c4.637 0 8.4 3.764 8.4 8.401 0 9.132-9.87 11.964-15.999 21.232-6.485-9.326-16.001-11.799-16.001-21.232 0-4.637 3.763-8.401 8.4-8.401 1.886 0 3.625 0.86 5.025 2.12l-2.425 3.88 7 4-4 10 11-12-7-4 1.934-2.901c1.107-0.68 2.35-1.099 3.665-1.099z',
-    'path://M237.062,81.761L237.062,81.761c-12.144-14.24-25.701-20.1-40.68-19.072 c-10.843,0.747-20.938,5.154-30.257,13.127c-9.51-5.843-19.8-9.227-30.859-10.366c0.521-3.197,1.46-6.306,2.85-9.363 c3.458-7.038,8.907-12.741,16.331-17.296c-5.609-3.384-11.227-6.799-16.854-10.279c-16.257,8.104-25.06,20.601-26.463,38.417 c-7.599,1.705-14.685,4.486-21.247,8.437c-9.164-7.677-18.996-11.917-29.496-12.632c-14.819-0.998-28.467,4.787-40.938,18.827 C6.445,96.182,0,114.867,0,136.242c-0.007,6.371,0.674,12.646,2.053,18.738c4.593,22.785,15.398,41.367,32.558,55.344 c15.43,12.773,29.901,18.023,43.362,16.981c7.074-0.561,13.624-3.977,19.685-10.192c10.534,5.49,20.391,8.217,29.561,8.203 c9.856-0.012,20.236-2.953,31.125-8.898c6.227,6.692,12.966,10.346,20.211,10.933c13.795,1.073,28.614-4.111,44.377-16.84 c17.49-14.104,28.043-32.79,31.796-55.485c0.836-5.624,1.272-11.292,1.272-16.966C255.998,115.814,249.707,96.601,237.062,81.761z  M54.795,97.7l40.661,14.496c-4.402,8.811-10.766,13.219-19.06,13.219c-2.542,0-4.917-0.419-7.122-1.274 C58.103,118.38,53.263,109.572,54.795,97.7z M150.613,185.396l-9.156-8.389l-7.619,12.951c-3.391,0.341-6.615,0.514-9.665,0.514 c-4.401,0-8.635-0.263-12.708-0.777l-8.634-14.973l-9.151,9.909c-4.91-2.717-9.15-5.856-12.708-9.413 c-8.81-8.295-13.384-17.959-13.727-28.97c2.877,1.692,7.427,3.461,13.675,5.308l10.636,13.629l9.44-9.852 c4.734,0.702,9.234,1.12,13.466,1.275l10.689,11.498l9.671-11.949c3.559-0.173,7.285-0.515,11.182-1.01l9.924,10.159l10.933-14.227 c5.931-1.351,11.196-2.798,15.771-4.323C179.747,163.538,169.068,176.414,150.613,185.396z M175.258,124.907 c-2.209,0.849-4.66,1.273-7.369,1.273c-8.134,0-14.489-4.415-19.052-13.224l40.905-14.477 C191.105,110.331,186.273,119.141,175.258,124.907z',
-    'path://M237.062,81.761L237.062,81.761c-12.144-14.24-25.701-20.1-40.68-19.072 c-10.843,0.747-20.938,5.154-30.257,13.127c-9.51-5.843-19.8-9.227-30.859-10.366c0.521-3.197,1.46-6.306,2.85-9.363 c3.458-7.038,8.907-12.741,16.331-17.296c-5.609-3.384-11.227-6.799-16.854-10.279c-16.257,8.104-25.06,20.601-26.463,38.417 c-7.599,1.705-14.685,4.486-21.247,8.437c-9.164-7.677-18.996-11.917-29.496-12.632c-14.819-0.998-28.467,4.787-40.938,18.827 C6.445,96.182,0,114.867,0,136.242c-0.007,6.371,0.674,12.646,2.053,18.738c4.593,22.785,15.398,41.367,32.558,55.344 c15.43,12.773,29.901,18.023,43.362,16.981c7.074-0.561,13.624-3.977,19.685-10.192c10.534,5.49,20.391,8.217,29.561,8.203 c9.856-0.012,20.236-2.953,31.125-8.898c6.227,6.692,12.966,10.346,20.211,10.933c13.795,1.073,28.614-4.111,44.377-16.84 c17.49-14.104,28.043-32.79,31.796-55.485c0.836-5.624,1.272-11.292,1.272-16.966C255.998,115.814,249.707,96.601,237.062,81.761z  M54.795,97.7l40.661,14.496c-4.402,8.811-10.766,13.219-19.06,13.219c-2.542,0-4.917-0.419-7.122-1.274 C58.103,118.38,53.263,109.572,54.795,97.7z M150.613,185.396l-9.156-8.389l-7.619,12.951c-3.391,0.341-6.615,0.514-9.665,0.514 c-4.401,0-8.635-0.263-12.708-0.777l-8.634-14.973l-9.151,9.909c-4.91-2.717-9.15-5.856-12.708-9.413 c-8.81-8.295-13.384-17.959-13.727-28.97c2.877,1.692,7.427,3.461,13.675,5.308l10.636,13.629l9.44-9.852 c4.734,0.702,9.234,1.12,13.466,1.275l10.689,11.498l9.671-11.949c3.559-0.173,7.285-0.515,11.182-1.01l9.924,10.159l10.933-14.227 c5.931-1.351,11.196-2.798,15.771-4.323C179.747,163.538,169.068,176.414,150.613,185.396z M175.258,124.907 c-2.209,0.849-4.66,1.273-7.369,1.273c-8.134,0-14.489-4.415-19.052-13.224l40.905-14.477 C191.105,110.331,186.273,119.141,175.258,124.907z'
+  'path://m67.25,28.9c27.42,-69.1 134.84,0 0,88.85c-134.84,-88.85 -27.42,-157.96 0,-88.85z',
+  'path://M16 0c-8.837 0-16 7.163-16 16s7.163 16 16 16 16-7.163 16-16-7.163-16-16-16zM22 8c1.105 0 2 1.343 2 3s-0.895 3-2 3-2-1.343-2-3 0.895-3 2-3zM10 8c1.105 0 2 1.343 2 3s-0.895 3-2 3-2-1.343-2-3 0.895-3 2-3zM16 28c-5.215 0-9.544-4.371-10-9.947 2.93 1.691 6.377 2.658 10 2.658s7.070-0.963 10-2.654c-0.455 5.576-4.785 9.942-10 9.942z',
+  'path://M16 0c-8.837 0-16 7.163-16 16s7.163 16 16 16c8.837 0 16-7.163 16-16s-7.163-16-16-16zM22 7.375c1.999 0 3.625 1.626 3.625 3.625 0 0.199-0.017 0.402-0.051 0.604-0.051 0.301-0.311 0.521-0.616 0.521s-0.566-0.22-0.616-0.522c-0.192-1.146-1.177-1.666-2.341-1.666s-2.149 0.52-2.341 1.666c-0.050 0.301-0.311 0.522-0.616 0.522-0 0 0 0-0 0-0.305 0-0.566-0.22-0.616-0.521-0.034-0.201-0.051-0.404-0.051-0.604 0-1.999 1.626-3.625 3.625-3.625zM10 7.375c1.999 0 3.625 1.626 3.625 3.625 0 0.199-0.017 0.402-0.051 0.604-0.051 0.301-0.311 0.521-0.616 0.521s-0.566-0.22-0.616-0.522c-0.193-1.146-1.177-1.666-2.341-1.666s-2.149 0.52-2.341 1.666c-0.051 0.301-0.311 0.522-0.616 0.522 0 0 0 0 0 0-0.305 0-0.566-0.22-0.616-0.521-0.034-0.201-0.051-0.404-0.051-0.604 0-1.999 1.626-3.625 3.625-3.625zM6 18h6v7.745c-3.44-0.894-6-4.035-6-7.745zM14 26v-8h4v8h-4zM20 25.745v-7.745h6c0 3.71-2.559 6.851-6 7.745z',
+  'path://M23.6 2c4.637 0 8.4 3.764 8.4 8.401 0 9.132-9.87 11.964-15.999 21.232-6.485-9.326-16.001-11.799-16.001-21.232 0-4.637 3.763-8.401 8.4-8.401 1.886 0 3.625 0.86 5.025 2.12l-2.425 3.88 7 4-4 10 11-12-7-4 1.934-2.901c1.107-0.68 2.35-1.099 3.665-1.099z',
+  'path://M237.062,81.761L237.062,81.761c-12.144-14.24-25.701-20.1-40.68-19.072 c-10.843,0.747-20.938,5.154-30.257,13.127c-9.51-5.843-19.8-9.227-30.859-10.366c0.521-3.197,1.46-6.306,2.85-9.363 c3.458-7.038,8.907-12.741,16.331-17.296c-5.609-3.384-11.227-6.799-16.854-10.279c-16.257,8.104-25.06,20.601-26.463,38.417 c-7.599,1.705-14.685,4.486-21.247,8.437c-9.164-7.677-18.996-11.917-29.496-12.632c-14.819-0.998-28.467,4.787-40.938,18.827 C6.445,96.182,0,114.867,0,136.242c-0.007,6.371,0.674,12.646,2.053,18.738c4.593,22.785,15.398,41.367,32.558,55.344 c15.43,12.773,29.901,18.023,43.362,16.981c7.074-0.561,13.624-3.977,19.685-10.192c10.534,5.49,20.391,8.217,29.561,8.203 c9.856-0.012,20.236-2.953,31.125-8.898c6.227,6.692,12.966,10.346,20.211,10.933c13.795,1.073,28.614-4.111,44.377-16.84 c17.49-14.104,28.043-32.79,31.796-55.485c0.836-5.624,1.272-11.292,1.272-16.966C255.998,115.814,249.707,96.601,237.062,81.761z  M54.795,97.7l40.661,14.496c-4.402,8.811-10.766,13.219-19.06,13.219c-2.542,0-4.917-0.419-7.122-1.274 C58.103,118.38,53.263,109.572,54.795,97.7z M150.613,185.396l-9.156-8.389l-7.619,12.951c-3.391,0.341-6.615,0.514-9.665,0.514 c-4.401,0-8.635-0.263-12.708-0.777l-8.634-14.973l-9.151,9.909c-4.91-2.717-9.15-5.856-12.708-9.413 c-8.81-8.295-13.384-17.959-13.727-28.97c2.877,1.692,7.427,3.461,13.675,5.308l10.636,13.629l9.44-9.852 c4.734,0.702,9.234,1.12,13.466,1.275l10.689,11.498l9.671-11.949c3.559-0.173,7.285-0.515,11.182-1.01l9.924,10.159l10.933-14.227 c5.931-1.351,11.196-2.798,15.771-4.323C179.747,163.538,169.068,176.414,150.613,185.396z M175.258,124.907 c-2.209,0.849-4.66,1.273-7.369,1.273c-8.134,0-14.489-4.415-19.052-13.224l40.905-14.477 C191.105,110.331,186.273,119.141,175.258,124.907z',
+  'path://M237.062,81.761L237.062,81.761c-12.144-14.24-25.701-20.1-40.68-19.072 c-10.843,0.747-20.938,5.154-30.257,13.127c-9.51-5.843-19.8-9.227-30.859-10.366c0.521-3.197,1.46-6.306,2.85-9.363 c3.458-7.038,8.907-12.741,16.331-17.296c-5.609-3.384-11.227-6.799-16.854-10.279c-16.257,8.104-25.06,20.601-26.463,38.417 c-7.599,1.705-14.685,4.486-21.247,8.437c-9.164-7.677-18.996-11.917-29.496-12.632c-14.819-0.998-28.467,4.787-40.938,18.827 C6.445,96.182,0,114.867,0,136.242c-0.007,6.371,0.674,12.646,2.053,18.738c4.593,22.785,15.398,41.367,32.558,55.344 c15.43,12.773,29.901,18.023,43.362,16.981c7.074-0.561,13.624-3.977,19.685-10.192c10.534,5.49,20.391,8.217,29.561,8.203 c9.856-0.012,20.236-2.953,31.125-8.898c6.227,6.692,12.966,10.346,20.211,10.933c13.795,1.073,28.614-4.111,44.377-16.84 c17.49-14.104,28.043-32.79,31.796-55.485c0.836-5.624,1.272-11.292,1.272-16.966C255.998,115.814,249.707,96.601,237.062,81.761z  M54.795,97.7l40.661,14.496c-4.402,8.811-10.766,13.219-19.06,13.219c-2.542,0-4.917-0.419-7.122-1.274 C58.103,118.38,53.263,109.572,54.795,97.7z M150.613,185.396l-9.156-8.389l-7.619,12.951c-3.391,0.341-6.615,0.514-9.665,0.514 c-4.401,0-8.635-0.263-12.708-0.777l-8.634-14.973l-9.151,9.909c-4.91-2.717-9.15-5.856-12.708-9.413 c-8.81-8.295-13.384-17.959-13.727-28.97c2.877,1.692,7.427,3.461,13.675,5.308l10.636,13.629l9.44-9.852 c4.734,0.702,9.234,1.12,13.466,1.275l10.689,11.498l9.671-11.949c3.559-0.173,7.285-0.515,11.182-1.01l9.924,10.159l10.933-14.227 c5.931-1.351,11.196-2.798,15.771-4.323C179.747,163.538,169.068,176.414,150.613,185.396z M175.258,124.907 c-2.209,0.849-4.66,1.273-7.369,1.273c-8.134,0-14.489-4.415-19.052-13.224l40.905-14.477 C191.105,110.331,186.273,119.141,175.258,124.907z'
 ];
 var CONTENT_COLOR = '#37A2DA';
 var ANIMATION_DURATION_UPDATE = 1500;
 
-
-var RAW_DATA = [[1425139200000,34,0.13,2,"MD","ZD","P0"],[1425225600000,28,0.71,1.5,"MB","ZD","P1"],[1425312000000,23,0.9,2.8,"MA","ZC","P2"],[1425398400000,21,0.58,6,"MB","ZC","P3"],[1425484800000,14,0.1,1.6,"MC","ZA","P4"],[1425571200000,21,0.6,7.7,"MC","ZA","P5"],[1425657600000,23,0.31,2.6,"MC","ZC","P6"],[1425744000000,34,0.74,2.4,"MD","ZE","P7"],[1425830400000,14,0.59,2.3,"MB","ZD","P8"],[1425916800000,18,0.85,5.1,"MB","ZB","P9"],[1426003200000,36,0.96,1.2,"MC","ZC","P10"],[1426089600000,18,0.28,2.5,"MA","ZC","P11"],[1426176000000,20,0.62,6,"MB","ZD","P12"],[1426262400000,32,0.79,1.7,"MB","ZA","P13"],[1426348800000,17,0.58,4.4,"MD","ZB","P14"],[1426435200000,23,0.77,3,"MB","ZA","P15"],[1426521600000,39,0.87,4.6,"MC","ZA","P16"],[1426608000000,15,0.7,6,"MB","ZC","P17"],[1426694400000,21,0.94,2.7,"MB","ZD","P18"],[1426780800000,28,0.48,4.5,"MC","ZC","P19"],[1426867200000,31,0.49,9.8,"MA","ZC","P20"],[1426953600000,27,0.87,7.7,"MB","ZB","P21"],[1427040000000,27,0.82,5.5,"MC","ZB","P22"],[1427126400000,11,0.53,2.7,"MD","ZC","P23"],[1427212800000,13,0.7,7.6,"MB","ZD","P24"],[1427299200000,39,0.99,4.8,"MB","ZD","P25"],[1427385600000,32,0.91,2.1,"MB","ZE","P26"],[1427472000000,20,0.97,5,"MB","ZA","P27"],[1427558400000,36,0.01,8.9,"MB","ZD","P28"],[1427644800000,22,0.08,9.2,"MB","ZE","P29"],[1427731200000,21,0.36,3.1,"MD","ZC","P30"],[1427817600000,11,0.15,5.8,"MD","ZB","P31"],[1427904000000,39,0.02,1.4,"MC","ZD","P32"],[1427990400000,20,0.86,8.7,"MB","ZD","P33"],[1428076800000,23,0.24,7.2,"MD","ZB","P34"],[1428163200000,12,0.06,2,"MD","ZB","P35"],[1428249600000,36,0.42,8.2,"MA","ZB","P36"],[1428336000000,17,0.48,7.5,"MB","ZC","P37"],[1428422400000,19,0.12,6.6,"MB","ZB","P38"],[1428508800000,39,0.58,3.1,"MC","ZE","P39"],[1428595200000,10,0.18,6.6,"MC","ZD","P40"],[1428681600000,22,0.28,2.1,"MB","ZE","P41"],[1428768000000,27,0.33,1.9,"MC","ZB","P42"],[1428854400000,37,0.46,9.4,"MD","ZE","P43"],[1428940800000,18,0.96,5.5,"MB","ZA","P44"],[1429027200000,11,0.61,8.2,"MD","ZC","P45"],[1429113600000,15,0.88,4.6,"MD","ZA","P46"],[1429200000000,38,0.89,7.2,"MD","ZC","P47"],[1429286400000,20,0.39,5.4,"MB","ZB","P48"],[1429372800000,30,0.71,5.5,"MA","ZA","P49"]];
+var RAW_DATA = [
+  [1425139200000, 34, 0.13, 2, 'MD', 'ZD', 'P0'],
+  [1425225600000, 28, 0.71, 1.5, 'MB', 'ZD', 'P1'],
+  [1425312000000, 23, 0.9, 2.8, 'MA', 'ZC', 'P2'],
+  [1425398400000, 21, 0.58, 6, 'MB', 'ZC', 'P3'],
+  [1425484800000, 14, 0.1, 1.6, 'MC', 'ZA', 'P4'],
+  [1425571200000, 21, 0.6, 7.7, 'MC', 'ZA', 'P5'],
+  [1425657600000, 23, 0.31, 2.6, 'MC', 'ZC', 'P6'],
+  [1425744000000, 34, 0.74, 2.4, 'MD', 'ZE', 'P7'],
+  [1425830400000, 14, 0.59, 2.3, 'MB', 'ZD', 'P8'],
+  [1425916800000, 18, 0.85, 5.1, 'MB', 'ZB', 'P9'],
+  [1426003200000, 36, 0.96, 1.2, 'MC', 'ZC', 'P10'],
+  [1426089600000, 18, 0.28, 2.5, 'MA', 'ZC', 'P11'],
+  [1426176000000, 20, 0.62, 6, 'MB', 'ZD', 'P12'],
+  [1426262400000, 32, 0.79, 1.7, 'MB', 'ZA', 'P13'],
+  [1426348800000, 17, 0.58, 4.4, 'MD', 'ZB', 'P14'],
+  [1426435200000, 23, 0.77, 3, 'MB', 'ZA', 'P15'],
+  [1426521600000, 39, 0.87, 4.6, 'MC', 'ZA', 'P16'],
+  [1426608000000, 15, 0.7, 6, 'MB', 'ZC', 'P17'],
+  [1426694400000, 21, 0.94, 2.7, 'MB', 'ZD', 'P18'],
+  [1426780800000, 28, 0.48, 4.5, 'MC', 'ZC', 'P19'],
+  [1426867200000, 31, 0.49, 9.8, 'MA', 'ZC', 'P20'],
+  [1426953600000, 27, 0.87, 7.7, 'MB', 'ZB', 'P21'],
+  [1427040000000, 27, 0.82, 5.5, 'MC', 'ZB', 'P22'],
+  [1427126400000, 11, 0.53, 2.7, 'MD', 'ZC', 'P23'],
+  [1427212800000, 13, 0.7, 7.6, 'MB', 'ZD', 'P24'],
+  [1427299200000, 39, 0.99, 4.8, 'MB', 'ZD', 'P25'],
+  [1427385600000, 32, 0.91, 2.1, 'MB', 'ZE', 'P26'],
+  [1427472000000, 20, 0.97, 5, 'MB', 'ZA', 'P27'],
+  [1427558400000, 36, 0.01, 8.9, 'MB', 'ZD', 'P28'],
+  [1427644800000, 22, 0.08, 9.2, 'MB', 'ZE', 'P29'],
+  [1427731200000, 21, 0.36, 3.1, 'MD', 'ZC', 'P30'],
+  [1427817600000, 11, 0.15, 5.8, 'MD', 'ZB', 'P31'],
+  [1427904000000, 39, 0.02, 1.4, 'MC', 'ZD', 'P32'],
+  [1427990400000, 20, 0.86, 8.7, 'MB', 'ZD', 'P33'],
+  [1428076800000, 23, 0.24, 7.2, 'MD', 'ZB', 'P34'],
+  [1428163200000, 12, 0.06, 2, 'MD', 'ZB', 'P35'],
+  [1428249600000, 36, 0.42, 8.2, 'MA', 'ZB', 'P36'],
+  [1428336000000, 17, 0.48, 7.5, 'MB', 'ZC', 'P37'],
+  [1428422400000, 19, 0.12, 6.6, 'MB', 'ZB', 'P38'],
+  [1428508800000, 39, 0.58, 3.1, 'MC', 'ZE', 'P39'],
+  [1428595200000, 10, 0.18, 6.6, 'MC', 'ZD', 'P40'],
+  [1428681600000, 22, 0.28, 2.1, 'MB', 'ZE', 'P41'],
+  [1428768000000, 27, 0.33, 1.9, 'MC', 'ZB', 'P42'],
+  [1428854400000, 37, 0.46, 9.4, 'MD', 'ZE', 'P43'],
+  [1428940800000, 18, 0.96, 5.5, 'MB', 'ZA', 'P44'],
+  [1429027200000, 11, 0.61, 8.2, 'MD', 'ZC', 'P45'],
+  [1429113600000, 15, 0.88, 4.6, 'MD', 'ZA', 'P46'],
+  [1429200000000, 38, 0.89, 7.2, 'MD', 'ZC', 'P47'],
+  [1429286400000, 20, 0.39, 5.4, 'MB', 'ZB', 'P48'],
+  [1429372800000, 30, 0.71, 5.5, 'MA', 'ZA', 'P49']
+];
 
 var RAW_DATA_DIMENSIONS = ['DATE', 'ATA', 'STE', 'CTZ', 'M_TAG', 'Z_TAG', 'ID'];
 var M_TAG_SUM_DIMENSIONS = ['ATA', 'STE', 'CTZ', 'M_TAG'];
-var RAW_CLUSTER_DIMENSIONS = ['DATE', 'ATA', 'STE', 'CTZ', 'M_TAG', 'Z_TAG', 'ID', 'CLUSTER_IDX', 'CLUSTER_CENTER_ATA', 'CLUSTER_CENTER_STE'];
-var RAW_CLUSTER_CENTERS_DIMENSIONS = ['COUNT', 'CLUSTER_IDX', 'CLUSTER_CENTER_ATA', 'CLUSTER_CENTER_STE'];
+var RAW_CLUSTER_DIMENSIONS = [
+  'DATE',
+  'ATA',
+  'STE',
+  'CTZ',
+  'M_TAG',
+  'Z_TAG',
+  'ID',
+  'CLUSTER_IDX',
+  'CLUSTER_CENTER_ATA',
+  'CLUSTER_CENTER_STE'
+];
+var RAW_CLUSTER_CENTERS_DIMENSIONS = [
+  'COUNT',
+  'CLUSTER_IDX',
+  'CLUSTER_CENTER_ATA',
+  'CLUSTER_CENTER_STE'
+];
 
 function getFromPalette(value, palette) {
-    if (!palette.__colorMap) {
-        palette.__colorMap = {};
+  if (!palette.__colorMap) {
+    palette.__colorMap = {};
+  }
+  if (palette.__colorIdx == null) {
+    palette.__colorIdx = 0;
+  }
+  if (!palette.__colorMap[value]) {
+    palette.__colorMap[value] = palette[palette.__colorIdx];
+    palette.__colorIdx++;
+    if (palette.__colorIdx >= palette.length) {
+      palette.__colorIdx = 0;
     }
-    if (palette.__colorIdx == null) {
-        palette.__colorIdx = 0;
-    }
-    if (!palette.__colorMap[value]) {
-        palette.__colorMap[value] = palette[palette.__colorIdx];
-        palette.__colorIdx++;
-        if (palette.__colorIdx >= palette.length) {
-            palette.__colorIdx = 0;
-        }
-    }
-    return palette.__colorMap[value];
+  }
+  return palette.__colorMap[value];
 }
 
-
-
-
-
 var baseOption = {
-    dataset: [{
-        id: 'raw',
-        dimensions: RAW_DATA_DIMENSIONS,
-        source: RAW_DATA
-    }, {
-        id: 'mTagSum',
-        fromDatasetId: 'raw',
-        transform: {
-            type: 'ecSimpleTransform:aggregate',
-            config: {
-                resultDimensions: [
-                    { from: 'ATA', method: 'sum' },
-                    { from: 'STE', method: 'sum' },
-                    { from: 'CTZ', method: 'sum' },
-                    { from: 'M_TAG' }
-                ],
-                groupBy: 'M_TAG'
-            }
+  dataset: [
+    {
+      id: 'raw',
+      dimensions: RAW_DATA_DIMENSIONS,
+      source: RAW_DATA
+    },
+    {
+      id: 'mTagSum',
+      fromDatasetId: 'raw',
+      transform: {
+        type: 'ecSimpleTransform:aggregate',
+        config: {
+          resultDimensions: [
+            { from: 'ATA', method: 'sum' },
+            { from: 'STE', method: 'sum' },
+            { from: 'CTZ', method: 'sum' },
+            { from: 'M_TAG' }
+          ],
+          groupBy: 'M_TAG'
         }
-    }, {
-        id: 'rawClusters',
-        fromDatasetId: 'raw',
-        transform: {
-            type: 'ecStat:clustering',
-            // print: true,
-            config: {
-                clusterCount: 4,
-                dimensions: ['ATA', 'STE'],
-                outputClusterIndexDimension: {
-                    index: RAW_CLUSTER_DIMENSIONS.indexOf('CLUSTER_IDX'),
-                    name: 'CLUSTER_IDX'
-                },
-                outputCentroidDimensions: [{
-                    index: RAW_CLUSTER_DIMENSIONS.indexOf('CLUSTER_CENTER_ATA'),
-                    name: 'CLUSTER_CENTER_ATA'
-                }, {
-                    index: RAW_CLUSTER_DIMENSIONS.indexOf('CLUSTER_CENTER_STE'),
-                    name: 'CLUSTER_CENTER_STE'
-                }]
+      }
+    },
+    {
+      id: 'rawClusters',
+      fromDatasetId: 'raw',
+      transform: {
+        type: 'ecStat:clustering',
+        // print: true,
+        config: {
+          clusterCount: 4,
+          dimensions: ['ATA', 'STE'],
+          outputClusterIndexDimension: {
+            index: RAW_CLUSTER_DIMENSIONS.indexOf('CLUSTER_IDX'),
+            name: 'CLUSTER_IDX'
+          },
+          outputCentroidDimensions: [
+            {
+              index: RAW_CLUSTER_DIMENSIONS.indexOf('CLUSTER_CENTER_ATA'),
+              name: 'CLUSTER_CENTER_ATA'
+            },
+            {
+              index: RAW_CLUSTER_DIMENSIONS.indexOf('CLUSTER_CENTER_STE'),
+              name: 'CLUSTER_CENTER_STE'
             }
+          ]
         }
-    }, {
-        id: 'rawClusterCenters',
-        fromDatasetId: 'rawClusters',
-        transform: {
-            type: 'ecSimpleTransform:aggregate',
-            // print: true,
-            config: {
-                resultDimensions: [
-                    { name: 'COUNT', from: 'ATA', method: 'count' },
-                    { from: 'CLUSTER_CENTER_ATA' },
-                    { from: 'CLUSTER_CENTER_STE' },
-                    { from: 'CLUSTER_IDX' }
-                ],
-                groupBy: 'CLUSTER_IDX'
-            }
+      }
+    },
+    {
+      id: 'rawClusterCenters',
+      fromDatasetId: 'rawClusters',
+      transform: {
+        type: 'ecSimpleTransform:aggregate',
+        // print: true,
+        config: {
+          resultDimensions: [
+            { name: 'COUNT', from: 'ATA', method: 'count' },
+            { from: 'CLUSTER_CENTER_ATA' },
+            { from: 'CLUSTER_CENTER_STE' },
+            { from: 'CLUSTER_IDX' }
+          ],
+          groupBy: 'CLUSTER_IDX'
         }
-    }],
-    tooltip: {}
+      }
+    }
+  ],
+  tooltip: {}
 };
 
-
 function makeScatterOptionCreator(renderItem) {
-    return function () {
-        var datasetId = 'rawClusters';
-        return {
-            datasetId: datasetId,
-            option: {
-                grid: {
-                    containLabel: true
-                },
-                xAxis: {
-                    name: 'STE'
-                },
-                yAxis: {
-                    name: 'ATA'
-                },
-                series: {
-                    type: 'custom',
-                    coordinateSystem: 'cartesian2d',
-                    animationDurationUpdate: ANIMATION_DURATION_UPDATE,
-                    datasetId: datasetId,
-                    encode: {
-                        itemName: 'ID',
-                        x: 'STE',
-                        y: 'ATA',
-                        tooltip: ['STE', 'ATA']
-                    },
-                    renderItem: renderItem
-                }
-            }
+  return function () {
+    var datasetId = 'rawClusters';
+    return {
+      datasetId: datasetId,
+      option: {
+        grid: {
+          containLabel: true
+        },
+        xAxis: {
+          name: 'STE'
+        },
+        yAxis: {
+          name: 'ATA'
+        },
+        series: {
+          type: 'custom',
+          coordinateSystem: 'cartesian2d',
+          animationDurationUpdate: ANIMATION_DURATION_UPDATE,
+          datasetId: datasetId,
+          encode: {
+            itemName: 'ID',
+            x: 'STE',
+            y: 'ATA',
+            tooltip: ['STE', 'ATA']
+          },
+          renderItem: renderItem
         }
+      }
     };
+  };
 }
 
-
-
-
 var optionCreators = {
+  Scatter: makeScatterOptionCreator(function (params, api) {
+    var pos = api.coord([api.value('STE'), api.value('ATA')]);
+    var zTagVal = api.value('Z_TAG');
+    var color = getFromPalette(zTagVal, Z_TAG_COLORS);
+    return {
+      type: 'circle',
+      morph: true,
+      shape: {
+        cx: pos[0],
+        cy: pos[1],
+        r: 10
+      },
+      style: {
+        fill: color
+      },
+      transition: ['shape', 'style']
+    };
+  }),
 
-    'Scatter': makeScatterOptionCreator(
-        function (params, api) {
-            var pos = api.coord([
-                api.value('STE'),
-                api.value('ATA')
-            ]);
-            var zTagVal = api.value('Z_TAG');
-            var color = getFromPalette(zTagVal, Z_TAG_COLORS);
-            return {
-                type: 'circle',
-                morph: true,
-                shape: {
-                    cx: pos[0],
-                    cy: pos[1],
-                    r: 10
-                },
-                style: {
-                    fill: color
-                },
-                transition: ['shape', 'style']
-            };
+  Glyph: makeScatterOptionCreator(function (params, api) {
+    var pos = api.coord([api.value('STE'), api.value('ATA')]);
+    var zTagVal = api.value('Z_TAG');
+    var color = getFromPalette(zTagVal, Z_TAG_COLORS);
+    var symbolPath = getFromPalette(zTagVal, SYMBOL_PATHS);
+    return {
+      type: 'path',
+      morph: true,
+      x: pos[0],
+      y: pos[1],
+      shape: {
+        pathData: symbolPath,
+        width: 40,
+        height: 40
+      },
+      style: {
+        fill: color
+      },
+      transition: ['style']
+    };
+  }),
+
+  House: makeScatterOptionCreator(function (params, api) {
+    var pos = api.coord([api.value('STE'), api.value('ATA')]);
+    var zTagVal = api.value('Z_TAG');
+    var color1 = getFromPalette(zTagVal, Z_TAG_COLORS);
+    var color2 = '#aaa';
+    return {
+      type: 'group',
+      x: pos[0],
+      y: pos[1],
+      children: [
+        {
+          type: 'polygon',
+          morph: true,
+          shape: {
+            points: [
+              [-25, -1],
+              [25, -1],
+              [0, -20]
+            ]
+          },
+          style: {
+            fill: color1
+          },
+          transition: ['shape', 'style']
+        },
+        {
+          type: 'rect',
+          morph: true,
+          shape: {
+            x: -15,
+            y: 0,
+            width: 30,
+            height: 20
+          },
+          style: {
+            fill: color2,
+            stroke: '#fff',
+            lineWidth: 1
+          },
+          transition: ['shape', 'style']
         }
-    ),
+      ]
+    };
+  }),
 
-    'Glyph': makeScatterOptionCreator(
-        function (params, api) {
-            var pos = api.coord([
-                api.value('STE'),
-                api.value('ATA')
-            ]);
-            var zTagVal = api.value('Z_TAG');
-            var color = getFromPalette(zTagVal, Z_TAG_COLORS);
-            var symbolPath = getFromPalette(zTagVal, SYMBOL_PATHS);
+  Bar_Sum: function () {
+    var datasetId = 'mTagSum';
+    return {
+      datasetId: datasetId,
+      option: {
+        grid: {
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category'
+        },
+        yAxis: {},
+        series: {
+          type: 'custom',
+          coordinateSystem: 'cartesian2d',
+          animationDurationUpdate: ANIMATION_DURATION_UPDATE,
+          datasetId: datasetId,
+          encode: {
+            x: 'M_TAG',
+            y: 'ATA',
+            tooltip: ['M_TAG', 'ATA']
+          },
+          renderItem: function (params, api) {
+            var mTagVal = api.value('M_TAG');
+            var ataVal = api.value('ATA');
+            var tarPos = api.coord([mTagVal, ataVal]);
+            var zeroPos = api.coord([mTagVal, 0]);
+            var size = api.size([mTagVal, ataVal]);
+            var width = size[0] * 0.4;
             return {
-                type: 'path',
-                morph: true,
-                x: pos[0],
-                y: pos[1],
-                shape: {
-                    pathData: symbolPath,
-                    width: 40,
-                    height: 40
-                },
-                style: {
-                    fill: color
-                },
-                transition: ['style']
+              type: 'rect',
+              morph: true,
+              shape: {
+                x: tarPos[0] - width / 2,
+                y: tarPos[1],
+                height: zeroPos[1] - tarPos[1],
+                width: width
+              },
+              style: {
+                fill: CONTENT_COLOR
+              },
+              transition: ['shape', 'style']
             };
+          }
         }
-    ),
+      }
+    };
+  },
 
-    'House': makeScatterOptionCreator(
-        function (params, api) {
-            var pos = api.coord([
-                api.value('STE'),
-                api.value('ATA')
-            ]);
-            var zTagVal = api.value('Z_TAG');
-            var color1 = getFromPalette(zTagVal, Z_TAG_COLORS);
-            var color2 = '#aaa';
+  Pie_Sum: function () {
+    var datasetId = 'mTagSum';
+    return {
+      datasetId: datasetId,
+      option: {
+        series: {
+          type: 'custom',
+          coordinateSystem: 'none',
+          animationDurationUpdate: ANIMATION_DURATION_UPDATE,
+          datasetId: datasetId,
+          encode: {
+            itemName: 'M_TAG',
+            value: 'ATA',
+            tooltip: 'ATA'
+          },
+          renderItem: function (params, api) {
+            var context = params.context;
+            if (!context.layout) {
+              context.layout = true;
+              var totalValue = 0;
+              for (var i = 0; i < params.dataInsideLength; i++) {
+                totalValue += api.value('ATA', i);
+              }
+              var angles = [];
+              var colors = [];
+              var currentAngle = -Math.PI / 2;
+              for (var i = 0; i < params.dataInsideLength; i++) {
+                colors.push(PIE_COLORS[i]);
+                var angle = (api.value('ATA', i) / totalValue) * Math.PI * 2;
+                angles.push([currentAngle, angle + currentAngle - 0.01]);
+                currentAngle += angle;
+              }
+              context.angles = angles;
+              context.colors = colors;
+            }
+
+            var width = myChart.getWidth();
+            var height = myChart.getHeight();
             return {
-                type: 'group',
-                x: pos[0],
-                y: pos[1],
-                children: [{
-                    type: 'polygon',
-                    morph: true,
-                    shape: {
-                        points: [
-                            [-25, -1],
-                            [25, -1],
-                            [0, -20]
-                        ]
-                    },
-                    style: {
-                        fill: color1
-                    },
-                    transition: ['shape', 'style']
-                }, {
-                    type: 'rect',
-                    morph: true,
-                    shape: {
-                        x: -15,
-                        y: 0,
-                        width: 30,
-                        height: 20
-                    },
-                    style: {
-                        fill: color2,
-                        stroke: '#fff',
-                        lineWidth: 1
-                    },
-                    transition: ['shape', 'style']
-                }]
+              type: 'sector',
+              morph: true,
+              shape: {
+                cx: width / 2,
+                cy: height / 2,
+                r: Math.min(width, height) / 3,
+                r0: Math.min(width, height) / 5,
+                startAngle: context.angles[params.dataIndex][0],
+                endAngle: context.angles[params.dataIndex][1],
+                clockwise: true
+              },
+              style: {
+                // fill: CONTENT_COLOR,
+                fill: context.colors[params.dataIndex]
+              },
+              transition: ['shape', 'style']
             };
+          }
         }
-    ),
+      }
+    };
+  },
 
-    'Bar_Sum': function () {
-        var datasetId = 'mTagSum'
-        return {
-            datasetId: datasetId,
-            option: {
-                grid: {
-                    containLabel: true
-                },
-                xAxis: {
-                    type: 'category'
-                },
-                yAxis: {
-                },
-                series: {
-                    type: 'custom',
-                    coordinateSystem: 'cartesian2d',
-                    animationDurationUpdate: ANIMATION_DURATION_UPDATE,
-                    datasetId: datasetId,
-                    encode: {
-                        x: 'M_TAG',
-                        y: 'ATA',
-                        tooltip: ['M_TAG', 'ATA']
-                    },
-                    renderItem: function (params, api) {
-                        var mTagVal = api.value('M_TAG');
-                        var ataVal = api.value('ATA');
-                        var tarPos = api.coord([mTagVal, ataVal]);
-                        var zeroPos = api.coord([mTagVal, 0]);
-                        var size = api.size([mTagVal, ataVal]);
-                        var width = size[0] * 0.4;
-                        return {
-                            type: 'rect',
-                            morph: true,
-                            shape: {
-                                x: tarPos[0] - width / 2,
-                                y: tarPos[1],
-                                height: zeroPos[1] - tarPos[1],
-                                width: width,
-                            },
-                            style: {
-                                fill: CONTENT_COLOR
-                            },
-                            transition: ['shape', 'style']
-                        };
-                    }
-                }
+  Clustered: function () {
+    var datasetId = 'rawClusterCenters';
+    return {
+      datasetId: datasetId,
+      option: {
+        grid: {
+          containLabel: true
+        },
+        xAxis: {
+          name: 'STE'
+        },
+        yAxis: {
+          name: 'ATA'
+        },
+        series: {
+          type: 'custom',
+          coordinateSystem: 'cartesian2d',
+          animationDurationUpdate: ANIMATION_DURATION_UPDATE,
+          datasetId: datasetId,
+          encode: {
+            x: 'CLUSTER_CENTER_STE',
+            y: 'CLUSTER_CENTER_ATA',
+            tooltip: ['CLUSTER_CENTER_STE', 'CLUSTER_CENTER_ATA']
+          },
+          renderItem: function (params, api) {
+            var context = params.context;
+            if (!context.layout) {
+              context.layout = true;
+              context.totalCount = 0;
+              for (var i = 0; i < params.dataInsideLength; i++) {
+                context.totalCount += api.value('COUNT', i);
+              }
             }
-        };
-    },
 
-    'Pie_Sum': function () {
-        var datasetId = 'mTagSum';
-        return {
-            datasetId: datasetId,
-            option: {
-                series: {
-                    type: 'custom',
-                    coordinateSystem: 'none',
-                    animationDurationUpdate: ANIMATION_DURATION_UPDATE,
-                    datasetId: datasetId,
-                    encode: {
-                        itemName: 'M_TAG',
-                        value: 'ATA',
-                        tooltip: 'ATA'
-                    },
-                    renderItem: function (params, api) {
-                        var context = params.context;
-                        if (!context.layout) {
-                            context.layout = true;
-                            var totalValue = 0;
-                            for (var i = 0; i < params.dataInsideLength; i++) {
-                                totalValue += api.value('ATA', i);
-                            }
-                            var angles = [];
-                            var colors = [];
-                            var currentAngle = -Math.PI / 2;
-                            for (var i = 0; i < params.dataInsideLength; i++) {
-                                colors.push(PIE_COLORS[i]);
-                                var angle = api.value('ATA', i) / totalValue * Math.PI * 2;
-                                angles.push([currentAngle, angle + currentAngle - 0.01]);
-                                currentAngle += angle;
-                            }
-                            context.angles = angles;
-                            context.colors = colors;
-                        }
-
-                        var width = myChart.getWidth();
-                        var height = myChart.getHeight();
-                        return {
-                            type: 'sector',
-                            morph: true,
-                            shape: {
-                                cx: width / 2,
-                                cy: height / 2,
-                                r: Math.min(width, height) / 3,
-                                r0: Math.min(width, height) / 5,
-                                startAngle: context.angles[params.dataIndex][0],
-                                endAngle: context.angles[params.dataIndex][1],
-                                clockwise: true
-                            },
-                            style: {
-                                // fill: CONTENT_COLOR,
-                                fill: context.colors[params.dataIndex]
-                            },
-                            transition: ['shape', 'style']
-                        };
-                    }
-                }
-            }
-        };
-    },
-
-    'Clustered': function () {
-        var datasetId = 'rawClusterCenters';
-        return {
-            datasetId: datasetId,
-            option: {
-                grid: {
-                    containLabel: true
-                },
-                xAxis: {
-                    name: 'STE'
-                },
-                yAxis: {
-                    name: 'ATA'
-                },
-                series: {
-                    type: 'custom',
-                    coordinateSystem: 'cartesian2d',
-                    animationDurationUpdate: ANIMATION_DURATION_UPDATE,
-                    datasetId: datasetId,
-                    encode: {
-                        x: 'CLUSTER_CENTER_STE',
-                        y: 'CLUSTER_CENTER_ATA',
-                        tooltip: ['CLUSTER_CENTER_STE', 'CLUSTER_CENTER_ATA']
-                    },
-                    renderItem: function (params, api) {
-                        var context = params.context;
-                        if (!context.layout) {
-                            context.layout = true;
-                            context.totalCount = 0;
-                            for (var i = 0; i < params.dataInsideLength; i++) {
-                                context.totalCount += api.value('COUNT', i);
-                            }
-                        }
-
-                        var pos = api.coord([
-                            api.value('CLUSTER_CENTER_STE'),
-                            api.value('CLUSTER_CENTER_ATA')
-                        ]);
-                        var count = api.value('COUNT');
-                        var radius = count / context.totalCount * 100 + 10;
-                        return {
-                            type: 'circle',
-                            morph: true,
-                            shape: {
-                                cx: pos[0],
-                                cy: pos[1],
-                                r: radius,
-                            },
-                            style: {
-                                // fill: CONTENT_COLOR,
-                                fill: CLUSTER_COLORS[params.dataIndex]
-                            },
-                            transition: ['shape', 'style']
-                        };
-                    }
-                }
-            }
-        };
-    }
+            var pos = api.coord([
+              api.value('CLUSTER_CENTER_STE'),
+              api.value('CLUSTER_CENTER_ATA')
+            ]);
+            var count = api.value('COUNT');
+            var radius = (count / context.totalCount) * 100 + 10;
+            return {
+              type: 'circle',
+              morph: true,
+              shape: {
+                cx: pos[0],
+                cy: pos[1],
+                r: radius
+              },
+              style: {
+                // fill: CONTENT_COLOR,
+                fill: CLUSTER_COLORS[params.dataIndex]
+              },
+              transition: ['shape', 'style']
+            };
+          }
+        }
+      }
+    };
+  }
 };
 
-
-
 var _player;
 var _optionList = [];
 app.config = {};
 echarts.util.each(optionCreators, function (creator, key) {
-    var optionWrap = creator();
-    _optionList.push({
-        key: key,
-        dataMetaKey: optionWrap.datasetId,
-        option: optionWrap.option
-    });
-    app.config[key] = function () {
-        _player.go(key);
-    }
+  var optionWrap = creator();
+  _optionList.push({
+    key: key,
+    dataMetaKey: optionWrap.datasetId,
+    option: optionWrap.option
+  });
+  app.config[key] = function () {
+    _player.go(key);
+  };
 });
 console.log(app.config);
 
-
-
 $.when(
-    $.getScript('https://cdn.jsdelivr.net/npm/echarts-simple-transform/dist/ecSimpleTransform.min.js'),
-    $.getScript('https://cdn.jsdelivr.net/npm/echarts-simple-option-player/dist/ecSimpleOptionPlayer.min.js'),
+  $.getScript(
+    'https://fastly.jsdelivr.net/npm/echarts-simple-transform/dist/ecSimpleTransform.min.js'
+  ),
+  $.getScript(
+    'https://fastly.jsdelivr.net/npm/echarts-simple-option-player/dist/ecSimpleOptionPlayer.min.js'
+  )
 ).done(function () {
-    run();
+  run();
 });
 
-
 function run() {
+  echarts.registerTransform(ecSimpleTransform.aggregate);
+  echarts.registerTransform(ecStat.transform.clustering);
 
-    echarts.registerTransform(ecSimpleTransform.aggregate);
-    echarts.registerTransform(ecStat.transform.clustering);
+  _player = ecSimpleOptionPlayer.create({
+    chart: function () {
+      return myChart;
+    },
+    seriesIndex: 0,
+    replaceMerge: ['xAxis', 'yAxis'],
+    dataMeta: {
+      raw: {
+        dimensions: RAW_DATA_DIMENSIONS,
+        uniqueDimension: 'ID'
+      },
+      mTagSum: {
+        dimensions: M_TAG_SUM_DIMENSIONS,
+        uniqueDimension: 'M_TAG'
+      },
+      rawClusters: {
+        dimensions: RAW_CLUSTER_DIMENSIONS,
+        uniqueDimension: 'ID',
+        dividingMethod: 'duplicate'
+      },
+      rawClusterCenters: {
+        dimensions: RAW_CLUSTER_CENTERS_DIMENSIONS,
+        uniqueDimension: 'CLUSTER_IDX'
+      }
+    },
+    optionList: _optionList
+  });
 
-    _player = ecSimpleOptionPlayer.create({
-        chart: function () {
-            return myChart;
-        },
-        seriesIndex: 0,
-        replaceMerge: ['xAxis', 'yAxis'],
-        dataMeta: {
-            raw: {
-                dimensions: RAW_DATA_DIMENSIONS,
-                uniqueDimension: 'ID'
-            },
-            mTagSum: {
-                dimensions: M_TAG_SUM_DIMENSIONS,
-                uniqueDimension: 'M_TAG'
-            },
-            rawClusters: {
-                dimensions: RAW_CLUSTER_DIMENSIONS,
-                uniqueDimension: 'ID',
-                dividingMethod: 'duplicate'
-            },
-            rawClusterCenters: {
-                dimensions: RAW_CLUSTER_CENTERS_DIMENSIONS,
-                uniqueDimension: 'CLUSTER_IDX'
-            }
-        },
-        optionList: _optionList
-    });
+  myChart.setOption(baseOption, { lazyUpdate: true });
 
-    myChart.setOption(baseOption, { lazyUpdate: true });
-
-    _player.go('Glyph');
-
+  _player.go('Glyph');
 }
-
diff --git a/public/examples/ts/archive/custom-story-transition.js b/public/examples/ts/archive/custom-story-transition.js
index c164a88..f879694 100644
--- a/public/examples/ts/archive/custom-story-transition.js
+++ b/public/examples/ts/archive/custom-story-transition.js
@@ -6,390 +6,440 @@
 */
 
 $.when(
-    $.get(ROOT_PATH + '/data/asset/data/life-expectancy-table.json'),
-    $.getScript('https://cdn.jsdelivr.net/npm/echarts-simple-transform/dist/ecSimpleTransform.min.js')
+  $.get(ROOT_PATH + '/data/asset/data/life-expectancy-table.json'),
+  $.getScript(
+    'https://fastly.jsdelivr.net/npm/echarts-simple-transform/dist/ecSimpleTransform.min.js'
+  )
 ).done(function (res) {
-    run(res[0]);
+  run(res[0]);
 });
 
 let _optionList;
 
 function run(_rawData) {
-    echarts.registerTransform(ecSimpleTransform.aggregate);
-    echarts.registerTransform(ecSimpleTransform.id);
+  echarts.registerTransform(ecSimpleTransform.aggregate);
+  echarts.registerTransform(ecSimpleTransform.id);
 
+  const COUNTRY_A = 'Germany';
+  const COUNTRY_B = 'France';
+  const CONTENT_COLORS = {
+    [COUNTRY_A]: '#5470c6',
+    [COUNTRY_B]: '#91cc75'
+  };
+  const Z2 = {
+    [COUNTRY_A]: 1,
+    [COUNTRY_B]: 2
+  };
 
-    const COUNTRY_A = 'Germany';
-    const COUNTRY_B = 'France';
-    const CONTENT_COLORS = {
-        [COUNTRY_A]: '#5470c6',
-        [COUNTRY_B]: '#91cc75'
-    };
-    const Z2 = {
-        [COUNTRY_A]: 1,
-        [COUNTRY_B]: 2
+  const ANIMATION_DURATION_UPDATE = 1000;
+  const AXIS_NAME_STYLE = {
+    nameGap: 25,
+    nameTextStyle: {
+      fontSize: 20
     }
+  };
 
-
-    const ANIMATION_DURATION_UPDATE = 1000;
-    const AXIS_NAME_STYLE = {
-        nameGap: 25,
-        nameTextStyle: {
-            fontSize: 20
-        },
-    };
-
-
-    const baseOption = {
-        animationDurationUpdate: ANIMATION_DURATION_UPDATE,
-        dataset: [{
-            id: 'DatasetRaw',
-            source: _rawData
-        }, {
-            id: 'DatasetRawWithId',
-            fromDatasetId: 'DatasetRaw',
-            transform: [{
-                type: 'filter',
-                config: {
-                    dimension: 'Year', gte: 1950
-                }
-            }, {
-                type: 'ecSimpleTransform:id',
-                config: {
-                    dimensionIndex: 5,
-                    dimensionName: 'Id'
-                }
-            }]
-        }, {
-            id: 'DatasetCountryAB',
-            fromDatasetId: 'DatasetRawWithId',
-            transform: {
-                type: 'filter',
-                config: {
-                    or: [{
-                        dimension: 'Country', '=': COUNTRY_A
-                    }, {
-                        dimension: 'Country', '=': COUNTRY_B
-                    }]
-                }
+  const baseOption = {
+    animationDurationUpdate: ANIMATION_DURATION_UPDATE,
+    dataset: [
+      {
+        id: 'DatasetRaw',
+        source: _rawData
+      },
+      {
+        id: 'DatasetRawWithId',
+        fromDatasetId: 'DatasetRaw',
+        transform: [
+          {
+            type: 'filter',
+            config: {
+              dimension: 'Year',
+              gte: 1950
             }
-        }, {
-            id: 'DatasetCountryABSumIncome',
-            fromDatasetId: 'DatasetCountryAB',
-            transform: {
-                type: 'ecSimpleTransform:aggregate',
-                config: {
-                    resultDimensions: [
-                        { from: 'Income', method: 'sum' },
-                        { from: 'Country' }
-                    ],
-                    groupBy: 'Country'
-                }
+          },
+          {
+            type: 'ecSimpleTransform:id',
+            config: {
+              dimensionIndex: 5,
+              dimensionName: 'Id'
             }
-        }],
-        tooltip: {}
-    };
-
-
-
-    const optionCreators = {
-
-        'Option_CountryAB_Year_Income_Bar': function (datasetId, specifiedCountry) {
-            return {
-                xAxis: {
-                    type: 'category',
-                    nameLocation: 'middle'
-                },
-                yAxis: {
-                    name: 'Income',
-                    ...AXIS_NAME_STYLE
-                },
-                series: {
-                    type: 'custom',
-                    coordinateSystem: 'cartesian2d',
-                    datasetId: datasetId,
-                    encode: {
-                        x: 'Year',
-                        y: 'Income',
-                        itemName: 'Year',
-                        tooltip: ['Income'],
-                    },
-                    renderItem: function (params, api) {
-                        const valPos = api.coord([api.value('Year'), api.value('Income')]);
-                        const basePos = api.coord([api.value('Year'), 0]);
-                        const width = api.size([1, 0])[0] * 0.9;
-
-                        const country = api.value('Country');
-                        if (specifiedCountry != null && specifiedCountry !== country) {
-                            return;
-                        }
-
-                        return {
-                            type: 'group',
-                            children: [{
-                                type: 'rect',
-                                transition: ['shape', 'style'],
-                                morph: true,
-                                shape: {
-                                    x: basePos[0],
-                                    y: basePos[1],
-                                    width: width,
-                                    height: valPos[1] - basePos[1]
-                                },
-                                z2: Z2[country],
-                                style: {
-                                    fill: CONTENT_COLORS[country],
-                                    opacity: 0.8
-                                }
-                            }]
-                        };
-                    }
-                }
-            };
-        },
-
-        'Option_CountryAB_Year_Population_Bar': function (datasetId, specifiedCountry) {
-            return {
-                xAxis: {
-                    type: 'category',
-                    nameLocation: 'middle'
-                },
-                yAxis: {
-                    name: 'Population',
-                    ...AXIS_NAME_STYLE
-                },
-                series: {
-                    type: 'custom',
-                    coordinateSystem: 'cartesian2d',
-                    datasetId: datasetId,
-                    encode: {
-                        x: 'Year',
-                        y: 'Population',
-                        itemName: 'Year',
-                        tooltip: ['Population'],
-                    },
-                    renderItem: function (params, api) {
-                        const valPos = api.coord([api.value('Year'), api.value('Population')]);
-                        const basePos = api.coord([api.value('Year'), 0]);
-                        const width = api.size([1, 0])[0] * 0.9;
-
-                        const country = api.value('Country');
-                        if (specifiedCountry != null && specifiedCountry !== country) {
-                            return;
-                        }
-
-                        return {
-                            type: 'group',
-                            children: [{
-                                type: 'rect',
-                                transition: ['shape', 'style'],
-                                morph: true,
-                                shape: {
-                                    x: basePos[0],
-                                    y: basePos[1],
-                                    width: width,
-                                    height: valPos[1] - basePos[1]
-                                },
-                                style: {
-                                    fill: CONTENT_COLORS[country]
-                                }
-                            }]
-                        };
-                    }
-                }
-            };
-        },
-
-        'Option_CountryAB_Income_Population_Scatter': function (datasetId, specifiedCountry) {
-            return {
-                xAxis: {
-                    name: 'Income',
-                    ...AXIS_NAME_STYLE,
-                    scale: true,
-                    nameLocation: 'middle'
-                },
-                yAxis: {
-                    name: 'Population',
-                    ...AXIS_NAME_STYLE,
-                    scale: true
-                },
-                series: {
-                    type: 'custom',
-                    coordinateSystem: 'cartesian2d',
-                    datasetId: datasetId,
-                    encode: {
-                        x: 'Income',
-                        y: 'Population',
-                        itemName: ['Year'],
-                        tooltip: ['Income', 'Population', 'Country']
-                    },
-                    renderItem: function (params, api) {
-                        const pos = api.coord([api.value('Income'), api.value('Population')]);
-
-                        const country = api.value('Country');
-                        if (specifiedCountry != null && specifiedCountry !== country) {
-                            return;
-                        }
-
-                        return {
-                            type: 'group',
-                            children: [{
-                                type: 'circle',
-                                transition: ['shape', 'style'],
-                                morph: true,
-                                shape: {
-                                    cx: pos[0],
-                                    cy: pos[1],
-                                    r: 10
-                                },
-                                style: {
-                                    fill: CONTENT_COLORS[country],
-                                    lineWidth: 1,
-                                    stroke: '#333',
-                                    opacity: 1,
-                                    enterFrom: {
-                                        opacity: 0
-                                    }
-                                }
-                            }]
-                        };
-                    }
-                }
-            };
-        },
-
-        'Option_CountryAB_Income_Sum_Bar': function (datasetId) {
-            return {
-                xAxis: {
-                    name: 'Income',
-                    ...AXIS_NAME_STYLE,
-                    nameLocation: 'middle'
-                },
-                yAxis: {
-                    type: 'category'
-                },
-                series: {
-                    type: 'custom',
-                    coordinateSystem: 'cartesian2d',
-                    datasetId: datasetId,
-                    encode: {
-                        x: 'Income',
-                        y: 'Country',
-                        itemName: ['Country'],
-                        tooltip: ['Income']
-                    },
-                    renderItem: function (params, api) {
-                        const country = api.ordinalRawValue('Country');
-                        const valPos = api.coord([api.value('Income'), country]);
-                        const basePos = api.coord([0, country]);
-                        const height = api.size([0, 1])[1] * 0.4;
-
-                        return {
-                            type: 'group',
-                            children: [{
-                                type: 'rect',
-                                transition: ['shape', 'style'],
-                                morph: true,
-                                shape: {
-                                    x: basePos[0],
-                                    y: valPos[1] - height / 2,
-                                    width: valPos[0] - basePos[0],
-                                    height: height
-                                },
-                                style: {
-                                    fill: CONTENT_COLORS[country]
-                                }
-                            }]
-                        };
-                    }
-                }
-            };
+          }
+        ]
+      },
+      {
+        id: 'DatasetCountryAB',
+        fromDatasetId: 'DatasetRawWithId',
+        transform: {
+          type: 'filter',
+          config: {
+            or: [
+              {
+                dimension: 'Country',
+                '=': COUNTRY_A
+              },
+              {
+                dimension: 'Country',
+                '=': COUNTRY_B
+              }
+            ]
+          }
         }
+      },
+      {
+        id: 'DatasetCountryABSumIncome',
+        fromDatasetId: 'DatasetCountryAB',
+        transform: {
+          type: 'ecSimpleTransform:aggregate',
+          config: {
+            resultDimensions: [
+              { from: 'Income', method: 'sum' },
+              { from: 'Country' }
+            ],
+            groupBy: 'Country'
+          }
+        }
+      }
+    ],
+    tooltip: {}
+  };
 
-    };
+  const optionCreators = {
+    Option_CountryAB_Year_Income_Bar: function (datasetId, specifiedCountry) {
+      return {
+        xAxis: {
+          type: 'category',
+          nameLocation: 'middle'
+        },
+        yAxis: {
+          name: 'Income',
+          ...AXIS_NAME_STYLE
+        },
+        series: {
+          type: 'custom',
+          coordinateSystem: 'cartesian2d',
+          datasetId: datasetId,
+          encode: {
+            x: 'Year',
+            y: 'Income',
+            itemName: 'Year',
+            tooltip: ['Income']
+          },
+          renderItem: function (params, api) {
+            const valPos = api.coord([api.value('Year'), api.value('Income')]);
+            const basePos = api.coord([api.value('Year'), 0]);
+            const width = api.size([1, 0])[0] * 0.9;
 
-    _optionList = [{
-        backwardTransitionOpt: {
-            from: { dimension: 'Id', seriesIndex: 0 },
-            to: { dimension: 'Id', seriesIndex: 0 }
-        },
-        option: optionCreators['Option_CountryAB_Year_Income_Bar']('DatasetCountryAB', COUNTRY_A)
-    }, {
-        backwardTransitionOpt: {
-            from: { dimension: 'Id', seriesIndex: 0 },
-            to: { dimension: 'Id', seriesIndex: 0 }
-        },
-        forwardTransitionOpt: {
-            from: { dimension: 'Id', seriesIndex: 0 },
-            to: { dimension: 'Id', seriesIndex: 0 }
-        },
-        option: optionCreators['Option_CountryAB_Year_Population_Bar']('DatasetCountryAB', COUNTRY_A)
-    }, {
-        backwardTransitionOpt: {
-            from: { dimension: 'Id', seriesIndex: 0 },
-            to: { dimension: 'Id', seriesIndex: 0 }
-        },
-        forwardTransitionOpt: {
-            from: { dimension: 'Id', seriesIndex: 0 },
-            to: { dimension: 'Id', seriesIndex: 0 }
-        },
-        option: optionCreators['Option_CountryAB_Income_Population_Scatter']('DatasetCountryAB', COUNTRY_A)
-    }, {
-        backwardTransitionOpt: {
-            from: { dimension: 'Country', seriesIndex: 0 },
-            to: { dimension: 'Country', seriesIndex: 0 }
-        },
-        forwardTransitionOpt: {
-            from: { dimension: 'Id', seriesIndex: 0 },
-            to: { dimension: 'Id', seriesIndex: 0 }
-        },
-        option: optionCreators['Option_CountryAB_Income_Population_Scatter']('DatasetCountryAB')
-    }, {
-        backwardTransitionOpt: {
-            from: { dimension: 'Country', seriesIndex: 0 },
-            to: { dimension: 'Country', seriesIndex: 0 }
-        },
-        forwardTransitionOpt: {
-            from: { dimension: 'Country', seriesIndex: 0 },
-            to: { dimension: 'Country', seriesIndex: 0 }
-        },
-        option: optionCreators['Option_CountryAB_Income_Sum_Bar']('DatasetCountryABSumIncome')
-    }, {
-        forwardTransitionOpt: {
-            from: { dimension: 'Country', seriesIndex: 0 },
-            to: { dimension: 'Country', seriesIndex: 0 }
-        },
-        option: optionCreators['Option_CountryAB_Year_Income_Bar']('DatasetCountryAB')
-    }];
+            const country = api.value('Country');
+            if (specifiedCountry != null && specifiedCountry !== country) {
+              return;
+            }
 
+            return {
+              type: 'group',
+              children: [
+                {
+                  type: 'rect',
+                  transition: ['shape', 'style'],
+                  morph: true,
+                  shape: {
+                    x: basePos[0],
+                    y: basePos[1],
+                    width: width,
+                    height: valPos[1] - basePos[1]
+                  },
+                  z2: Z2[country],
+                  style: {
+                    fill: CONTENT_COLORS[country],
+                    opacity: 0.8
+                  }
+                }
+              ]
+            };
+          }
+        }
+      };
+    },
 
-    myChart.setOption(baseOption, { lazyMode: true });
+    Option_CountryAB_Year_Population_Bar: function (
+      datasetId,
+      specifiedCountry
+    ) {
+      return {
+        xAxis: {
+          type: 'category',
+          nameLocation: 'middle'
+        },
+        yAxis: {
+          name: 'Population',
+          ...AXIS_NAME_STYLE
+        },
+        series: {
+          type: 'custom',
+          coordinateSystem: 'cartesian2d',
+          datasetId: datasetId,
+          encode: {
+            x: 'Year',
+            y: 'Population',
+            itemName: 'Year',
+            tooltip: ['Population']
+          },
+          renderItem: function (params, api) {
+            const valPos = api.coord([
+              api.value('Year'),
+              api.value('Population')
+            ]);
+            const basePos = api.coord([api.value('Year'), 0]);
+            const width = api.size([1, 0])[0] * 0.9;
 
-    // Initialize state
-    myChart.setOption(_optionList[currentOptionIndex].option);
+            const country = api.value('Country');
+            if (specifiedCountry != null && specifiedCountry !== country) {
+              return;
+            }
+
+            return {
+              type: 'group',
+              children: [
+                {
+                  type: 'rect',
+                  transition: ['shape', 'style'],
+                  morph: true,
+                  shape: {
+                    x: basePos[0],
+                    y: basePos[1],
+                    width: width,
+                    height: valPos[1] - basePos[1]
+                  },
+                  style: {
+                    fill: CONTENT_COLORS[country]
+                  }
+                }
+              ]
+            };
+          }
+        }
+      };
+    },
+
+    Option_CountryAB_Income_Population_Scatter: function (
+      datasetId,
+      specifiedCountry
+    ) {
+      return {
+        xAxis: {
+          name: 'Income',
+          ...AXIS_NAME_STYLE,
+          scale: true,
+          nameLocation: 'middle'
+        },
+        yAxis: {
+          name: 'Population',
+          ...AXIS_NAME_STYLE,
+          scale: true
+        },
+        series: {
+          type: 'custom',
+          coordinateSystem: 'cartesian2d',
+          datasetId: datasetId,
+          encode: {
+            x: 'Income',
+            y: 'Population',
+            itemName: ['Year'],
+            tooltip: ['Income', 'Population', 'Country']
+          },
+          renderItem: function (params, api) {
+            const pos = api.coord([
+              api.value('Income'),
+              api.value('Population')
+            ]);
+
+            const country = api.value('Country');
+            if (specifiedCountry != null && specifiedCountry !== country) {
+              return;
+            }
+
+            return {
+              type: 'group',
+              children: [
+                {
+                  type: 'circle',
+                  transition: ['shape', 'style'],
+                  morph: true,
+                  shape: {
+                    cx: pos[0],
+                    cy: pos[1],
+                    r: 10
+                  },
+                  style: {
+                    fill: CONTENT_COLORS[country],
+                    lineWidth: 1,
+                    stroke: '#333',
+                    opacity: 1,
+                    enterFrom: {
+                      opacity: 0
+                    }
+                  }
+                }
+              ]
+            };
+          }
+        }
+      };
+    },
+
+    Option_CountryAB_Income_Sum_Bar: function (datasetId) {
+      return {
+        xAxis: {
+          name: 'Income',
+          ...AXIS_NAME_STYLE,
+          nameLocation: 'middle'
+        },
+        yAxis: {
+          type: 'category'
+        },
+        series: {
+          type: 'custom',
+          coordinateSystem: 'cartesian2d',
+          datasetId: datasetId,
+          encode: {
+            x: 'Income',
+            y: 'Country',
+            itemName: ['Country'],
+            tooltip: ['Income']
+          },
+          renderItem: function (params, api) {
+            const country = api.ordinalRawValue('Country');
+            const valPos = api.coord([api.value('Income'), country]);
+            const basePos = api.coord([0, country]);
+            const height = api.size([0, 1])[1] * 0.4;
+
+            return {
+              type: 'group',
+              children: [
+                {
+                  type: 'rect',
+                  transition: ['shape', 'style'],
+                  morph: true,
+                  shape: {
+                    x: basePos[0],
+                    y: valPos[1] - height / 2,
+                    width: valPos[0] - basePos[0],
+                    height: height
+                  },
+                  style: {
+                    fill: CONTENT_COLORS[country]
+                  }
+                }
+              ]
+            };
+          }
+        }
+      };
+    }
+  };
+
+  _optionList = [
+    {
+      backwardTransitionOpt: {
+        from: { dimension: 'Id', seriesIndex: 0 },
+        to: { dimension: 'Id', seriesIndex: 0 }
+      },
+      option: optionCreators['Option_CountryAB_Year_Income_Bar'](
+        'DatasetCountryAB',
+        COUNTRY_A
+      )
+    },
+    {
+      backwardTransitionOpt: {
+        from: { dimension: 'Id', seriesIndex: 0 },
+        to: { dimension: 'Id', seriesIndex: 0 }
+      },
+      forwardTransitionOpt: {
+        from: { dimension: 'Id', seriesIndex: 0 },
+        to: { dimension: 'Id', seriesIndex: 0 }
+      },
+      option: optionCreators['Option_CountryAB_Year_Population_Bar'](
+        'DatasetCountryAB',
+        COUNTRY_A
+      )
+    },
+    {
+      backwardTransitionOpt: {
+        from: { dimension: 'Id', seriesIndex: 0 },
+        to: { dimension: 'Id', seriesIndex: 0 }
+      },
+      forwardTransitionOpt: {
+        from: { dimension: 'Id', seriesIndex: 0 },
+        to: { dimension: 'Id', seriesIndex: 0 }
+      },
+      option: optionCreators['Option_CountryAB_Income_Population_Scatter'](
+        'DatasetCountryAB',
+        COUNTRY_A
+      )
+    },
+    {
+      backwardTransitionOpt: {
+        from: { dimension: 'Country', seriesIndex: 0 },
+        to: { dimension: 'Country', seriesIndex: 0 }
+      },
+      forwardTransitionOpt: {
+        from: { dimension: 'Id', seriesIndex: 0 },
+        to: { dimension: 'Id', seriesIndex: 0 }
+      },
+      option:
+        optionCreators['Option_CountryAB_Income_Population_Scatter'](
+          'DatasetCountryAB'
+        )
+    },
+    {
+      backwardTransitionOpt: {
+        from: { dimension: 'Country', seriesIndex: 0 },
+        to: { dimension: 'Country', seriesIndex: 0 }
+      },
+      forwardTransitionOpt: {
+        from: { dimension: 'Country', seriesIndex: 0 },
+        to: { dimension: 'Country', seriesIndex: 0 }
+      },
+      option: optionCreators['Option_CountryAB_Income_Sum_Bar'](
+        'DatasetCountryABSumIncome'
+      )
+    },
+    {
+      forwardTransitionOpt: {
+        from: { dimension: 'Country', seriesIndex: 0 },
+        to: { dimension: 'Country', seriesIndex: 0 }
+      },
+      option:
+        optionCreators['Option_CountryAB_Year_Income_Bar']('DatasetCountryAB')
+    }
+  ];
+
+  myChart.setOption(baseOption, { lazyMode: true });
+
+  // Initialize state
+  myChart.setOption(_optionList[currentOptionIndex].option);
 }
 
 let currentOptionIndex = 0;
 app.config = {
-    'Next': function () {
-        if (!_optionList || currentOptionIndex >= _optionList.length - 1) {
-            return;
-        }
-        const optionWrap = _optionList[++currentOptionIndex];
-        myChart.setOption(optionWrap.option, {
-            replaceMerge: ['xAxis', 'yAxis'],
-            transition: optionWrap.forwardTransitionOpt
-        });
-    },
-
-    'Previous': function () {
-        if (!_optionList || currentOptionIndex <= 0) {
-            return;
-        }
-        const optionWrap = _optionList[--currentOptionIndex];
-        myChart.setOption(optionWrap.option, {
-            replaceMerge: ['xAxis', 'yAxis'],
-            transition: optionWrap.backwardTransitionOpt
-        });
+  Next: function () {
+    if (!_optionList || currentOptionIndex >= _optionList.length - 1) {
+      return;
     }
-}
+    const optionWrap = _optionList[++currentOptionIndex];
+    myChart.setOption(optionWrap.option, {
+      replaceMerge: ['xAxis', 'yAxis'],
+      transition: optionWrap.forwardTransitionOpt
+    });
+  },
+
+  Previous: function () {
+    if (!_optionList || currentOptionIndex <= 0) {
+      return;
+    }
+    const optionWrap = _optionList[--currentOptionIndex];
+    myChart.setOption(optionWrap.option, {
+      replaceMerge: ['xAxis', 'yAxis'],
+      transition: optionWrap.backwardTransitionOpt
+    });
+  }
+};
diff --git a/public/examples/ts/bar-race-country.ts b/public/examples/ts/bar-race-country.ts
index bd9781a..722ac63 100644
--- a/public/examples/ts/bar-race-country.ts
+++ b/public/examples/ts/bar-race-country.ts
@@ -33,7 +33,7 @@
 };
 
 $.when(
-  $.getJSON('https://cdn.jsdelivr.net/npm/emoji-flags@1.3.0/data.json'),
+  $.getJSON('https://fastly.jsdelivr.net/npm/emoji-flags@1.3.0/data.json'),
   $.getJSON(ROOT_PATH + '/data/asset/data/life-expectancy-table.json')
 ).done(function (res0, res1) {
   interface Flag {
diff --git a/public/examples/ts/circle-packing-with-d3.js b/public/examples/ts/circle-packing-with-d3.js
index bcdc92d..24603c8 100644
--- a/public/examples/ts/circle-packing-with-d3.js
+++ b/public/examples/ts/circle-packing-with-d3.js
@@ -8,7 +8,7 @@
 $.when(
   $.get(ROOT_PATH + '/data/asset/data/option-view.json'),
   $.getScript(
-    'https://cdn.jsdelivr.net/npm/d3-hierarchy@2.0.0/dist/d3-hierarchy.min.js'
+    'https://fastly.jsdelivr.net/npm/d3-hierarchy@2.0.0/dist/d3-hierarchy.min.js'
   )
 ).done(function (res) {
   run(res[0]);
diff --git a/public/examples/ts/data-transform-aggregate.js b/public/examples/ts/data-transform-aggregate.js
index 1af5461..317eecd 100644
--- a/public/examples/ts/data-transform-aggregate.js
+++ b/public/examples/ts/data-transform-aggregate.js
@@ -8,7 +8,7 @@
 $.when(
   $.get(ROOT_PATH + '/data/asset/data/life-expectancy-table.json'),
   $.getScript(
-    'https://cdn.jsdelivr.net/npm/echarts-simple-transform/dist/ecSimpleTransform.min.js'
+    'https://fastly.jsdelivr.net/npm/echarts-simple-transform/dist/ecSimpleTransform.min.js'
   )
 ).done(function (res) {
   run(res[0]);
diff --git a/public/examples/ts/gl/animating-contour-on-globe.js b/public/examples/ts/gl/animating-contour-on-globe.js
index dac7a49..8871b77 100644
--- a/public/examples/ts/gl/animating-contour-on-globe.js
+++ b/public/examples/ts/gl/animating-contour-on-globe.js
@@ -24,12 +24,14 @@
 context.shadowColor = config.color;
 
 $.when(
-  $.getScript('https://cdn.jsdelivr.net/npm/d3-array@2.8.0/dist/d3-array.js'),
   $.getScript(
-    'https://cdn.jsdelivr.net/npm/d3-contour@2.0.0/dist/d3-contour.js'
+    'https://fastly.jsdelivr.net/npm/d3-array@2.8.0/dist/d3-array.js'
   ),
-  $.getScript('https://cdn.jsdelivr.net/npm/d3-geo@2.0.1/dist/d3-geo.js'),
-  $.getScript('https://cdn.jsdelivr.net/npm/d3-timer@2.0.0/dist/d3-timer.js')
+  $.getScript(
+    'https://fastly.jsdelivr.net/npm/d3-contour@2.0.0/dist/d3-contour.js'
+  ),
+  $.getScript('https://fastly.jsdelivr.net/npm/d3-geo@2.0.1/dist/d3-geo.js'),
+  $.getScript('https://fastly.jsdelivr.net/npm/d3-timer@2.0.0/dist/d3-timer.js')
 ).done(function () {
   image(ROOT_PATH + '/data-gl/asset/bathymetry_bw_composite_4k.jpg').then(
     function (image) {
diff --git a/public/examples/ts/gl/bar3d-noise-modified-from-marpi-demo.js b/public/examples/ts/gl/bar3d-noise-modified-from-marpi-demo.js
index 68c870c..86affc9 100644
--- a/public/examples/ts/gl/bar3d-noise-modified-from-marpi-demo.js
+++ b/public/examples/ts/gl/bar3d-noise-modified-from-marpi-demo.js
@@ -5,7 +5,7 @@
 */
 
 $.getScript(
-  'https://cdn.jsdelivr.net/npm/simplex-noise@2.4.0/simplex-noise.js'
+  'https://fastly.jsdelivr.net/npm/simplex-noise@2.4.0/simplex-noise.js'
 ).done(function () {
   var simplex = new SimplexNoise();
 
diff --git a/public/examples/ts/gl/bar3d-simplex-noise.js b/public/examples/ts/gl/bar3d-simplex-noise.js
index 39788c9..507041c 100644
--- a/public/examples/ts/gl/bar3d-simplex-noise.js
+++ b/public/examples/ts/gl/bar3d-simplex-noise.js
@@ -6,7 +6,7 @@
 */
 
 $.getScript(
-  'https://cdn.jsdelivr.net/npm/simplex-noise@2.4.0/simplex-noise.js'
+  'https://fastly.jsdelivr.net/npm/simplex-noise@2.4.0/simplex-noise.js'
 ).done(function () {
   var noise = new SimplexNoise(Math.random);
   function generateData(theta, min, max) {
diff --git a/public/examples/ts/gl/flowGL-noise.js b/public/examples/ts/gl/flowGL-noise.js
index 11810a4..ede0aa9 100644
--- a/public/examples/ts/gl/flowGL-noise.js
+++ b/public/examples/ts/gl/flowGL-noise.js
@@ -8,7 +8,7 @@
 */
 
 $.getScript(
-  'https://cdn.jsdelivr.net/npm/simplex-noise@2.4.0/simplex-noise.js'
+  'https://fastly.jsdelivr.net/npm/simplex-noise@2.4.0/simplex-noise.js'
 ).done(function () {
   var noise = new SimplexNoise(Math.random);
   var noise2 = new SimplexNoise(Math.random);
diff --git a/public/examples/ts/gl/globe-contour-paint.js b/public/examples/ts/gl/globe-contour-paint.js
index 3a128be..bd00256 100644
--- a/public/examples/ts/gl/globe-contour-paint.js
+++ b/public/examples/ts/gl/globe-contour-paint.js
@@ -22,12 +22,14 @@
 context.shadowColor = config.color;
 
 $.when(
-  $.getScript('https://cdn.jsdelivr.net/npm/d3-array@2.8.0/dist/d3-array.js'),
   $.getScript(
-    'https://cdn.jsdelivr.net/npm/d3-contour@2.0.0/dist/d3-contour.js'
+    'https://fastly.jsdelivr.net/npm/d3-array@2.8.0/dist/d3-array.js'
   ),
-  $.getScript('https://cdn.jsdelivr.net/npm/d3-geo@2.0.1/dist/d3-geo.js'),
-  $.getScript('https://cdn.jsdelivr.net/npm/d3-timer@2.0.0/dist/d3-timer.js')
+  $.getScript(
+    'https://fastly.jsdelivr.net/npm/d3-contour@2.0.0/dist/d3-contour.js'
+  ),
+  $.getScript('https://fastly.jsdelivr.net/npm/d3-geo@2.0.1/dist/d3-geo.js'),
+  $.getScript('https://fastly.jsdelivr.net/npm/d3-timer@2.0.0/dist/d3-timer.js')
 ).done(function () {
   image(ROOT_PATH + '/data-gl/asset/bathymetry_bw_composite_4k.jpg').then(
     function (image) {
diff --git a/public/examples/ts/gl/globe-echarts-gl-hello-world.js b/public/examples/ts/gl/globe-echarts-gl-hello-world.js
index 876f6f9..87192db 100644
--- a/public/examples/ts/gl/globe-echarts-gl-hello-world.js
+++ b/public/examples/ts/gl/globe-echarts-gl-hello-world.js
@@ -2,7 +2,7 @@
 title: ECharts-GL Hello World
 category: globe
 titleCN: ECharts-GL Hello World
-scripts: 'https://cdn.jsdelivr.net/gh/ecomfe/echarts-gl/dist/echarts-gl.min.js'
+scripts: 'https://fastly.jsdelivr.net/gh/ecomfe/echarts-gl/dist/echarts-gl.min.js'
 videoStart: 2000
 videoEnd: 6000
 */
diff --git a/public/examples/ts/gl/graphgl-npm-dep.js b/public/examples/ts/gl/graphgl-npm-dep.js
index beadebc..5461a62 100644
--- a/public/examples/ts/gl/graphgl-npm-dep.js
+++ b/public/examples/ts/gl/graphgl-npm-dep.js
@@ -15,7 +15,7 @@
 }
 
 loadScript(
-  'https://cdn.jsdelivr.net/npm/echarts-graph-modularity@2.0.0/dist/echarts-graph-modularity.min.js',
+  'https://fastly.jsdelivr.net/npm/echarts-graph-modularity@2.0.0/dist/echarts-graph-modularity.min.js',
   function () {
     // Reinit chart again
     // TODO: visual encoding registerion must been done before echarts.init.
diff --git a/public/examples/ts/gl/metal-bar3d.js b/public/examples/ts/gl/metal-bar3d.js
index 842eb72..5401ec5 100644
--- a/public/examples/ts/gl/metal-bar3d.js
+++ b/public/examples/ts/gl/metal-bar3d.js
@@ -5,7 +5,7 @@
 */
 
 $.getScript(
-  'https://cdn.jsdelivr.net/npm/simplex-noise@2.4.0/simplex-noise.js'
+  'https://fastly.jsdelivr.net/npm/simplex-noise@2.4.0/simplex-noise.js'
 ).done(function () {
   var noise = new SimplexNoise(Math.random);
   function generateData(theta, min, max) {
diff --git a/public/examples/ts/gl/scatter3d-orthographic.js b/public/examples/ts/gl/scatter3d-orthographic.js
index 81ab4be..f72d2cd 100644
--- a/public/examples/ts/gl/scatter3d-orthographic.js
+++ b/public/examples/ts/gl/scatter3d-orthographic.js
@@ -6,7 +6,7 @@
 */
 
 $.getScript(
-  'https://cdn.jsdelivr.net/npm/simplex-noise@2.4.0/simplex-noise.js'
+  'https://fastly.jsdelivr.net/npm/simplex-noise@2.4.0/simplex-noise.js'
 ).done(function () {
   var noise = new SimplexNoise(Math.random);
   function generateData(theta, min, max) {
diff --git a/public/examples/ts/gl/scatter3d-simplex-noise.js b/public/examples/ts/gl/scatter3d-simplex-noise.js
index b71c4de..596af5d 100644
--- a/public/examples/ts/gl/scatter3d-simplex-noise.js
+++ b/public/examples/ts/gl/scatter3d-simplex-noise.js
@@ -6,7 +6,7 @@
 */
 
 $.getScript(
-  'https://cdn.jsdelivr.net/npm/simplex-noise@2.4.0/simplex-noise.js'
+  'https://fastly.jsdelivr.net/npm/simplex-noise@2.4.0/simplex-noise.js'
 ).done(function () {
   var noise = new SimplexNoise(Math.random);
   function generateData(theta, min, max) {
diff --git a/public/examples/ts/gl/stacked-bar3d.js b/public/examples/ts/gl/stacked-bar3d.js
index 0796cb5..ef588a2 100644
--- a/public/examples/ts/gl/stacked-bar3d.js
+++ b/public/examples/ts/gl/stacked-bar3d.js
@@ -5,7 +5,7 @@
 */
 
 $.getScript(
-  'https://cdn.jsdelivr.net/npm/simplex-noise@2.4.0/simplex-noise.js'
+  'https://fastly.jsdelivr.net/npm/simplex-noise@2.4.0/simplex-noise.js'
 ).done(function () {
   function generateData() {
     var data = [];
diff --git a/public/examples/ts/map-projection-globe.ts b/public/examples/ts/map-projection-globe.ts
index 1c79f05..12f062e 100644
--- a/public/examples/ts/map-projection-globe.ts
+++ b/public/examples/ts/map-projection-globe.ts
@@ -10,8 +10,8 @@
 
 $.when(
   $.get(ROOT_PATH + '/data/asset/geo/world.json'),
-  $.getScript('https://cdn.jsdelivr.net/npm/d3-array'),
-  $.getScript('https://cdn.jsdelivr.net/npm/d3-geo')
+  $.getScript('https://fastly.jsdelivr.net/npm/d3-array'),
+  $.getScript('https://fastly.jsdelivr.net/npm/d3-geo')
 ).done(function (res) {
   myChart.hideLoading();
   // Add graticule
diff --git a/public/examples/ts/map-usa-projection.ts b/public/examples/ts/map-usa-projection.ts
index eacf6e9..552295a 100644
--- a/public/examples/ts/map-usa-projection.ts
+++ b/public/examples/ts/map-usa-projection.ts
@@ -9,8 +9,8 @@
 $.when(
   $.get(ROOT_PATH + '/data/asset/geo/USA.json'),
 
-  $.getScript('https://cdn.jsdelivr.net/npm/d3-array'),
-  $.getScript('https://cdn.jsdelivr.net/npm/d3-geo')
+  $.getScript('https://fastly.jsdelivr.net/npm/d3-array'),
+  $.getScript('https://fastly.jsdelivr.net/npm/d3-geo')
 ).done(function (res) {
   const usaJson = res[0];