Merge pull request #90 from apache/feat-matrix

doc(matrix): matrix coordinate

public/examples/ts/matrix-confusion.ts

@@ -0,0 +1,111 @@
+/*
+title: Confusion Matrix
+category: matrix
+titleCN: 混淆矩阵
+difficulty: 3
+*/
+
+const label = {
+  fontSize: 16,
+  color: '#555'
+};
+option = {
+  matrix: {
+    x: {
+      data: ['Positive', 'Negative'],
+      label
+    },
+    y: {
+      data: ['Positive', 'Negative'],
+      label
+    },
+    top: 80,
+    width: 600,
+    left: 'center'
+  },
+  series: {
+    type: 'custom',
+    coordinateSystem: 'matrix',
+    data: [
+      ['Positive', 'Positive', 10],
+      ['Positive', 'Negative', 2],
+      ['Negative', 'Positive', 3],
+      ['Negative', 'Negative', 5]
+    ],
+    label: {
+      show: true,
+      formatter: (params) => {
+        const value = params.value[2];
+        return (
+          '{name|' +
+          (params.value[0] === params.value[1] ? 'True ' : 'False ') +
+          params.value[1] +
+          '}\n{value|' +
+          value +
+          '}'
+        );
+      },
+      rich: {
+        name: {
+          color: '#fff',
+          backgroundColor: '#999',
+          textBorderColor: '#333',
+          padding: 5,
+          fontSize: 18
+        },
+        value: {
+          color: '#444',
+          textBorderWidth: 0,
+          padding: 5,
+          fontSize: 16,
+          align: 'center'
+        }
+      }
+    },
+    renderItem: function (params, api) {
+      const x = api.value(0);
+      const y = api.value(1);
+      const center = api.coord([x, y]);
+      const size = api.size([x, y]);
+      return {
+        type: 'rect',
+        shape: {
+          x: center[0] - size[0] / 2,
+          y: center[1] - size[1] / 2,
+          width: size[0],
+          height: size[1]
+        },
+        style: api.style({
+          fill: x === y ? '#8f8' : '#f88'
+        })
+      };
+    }
+  },
+  graphic: {
+    elements: [
+      {
+        type: 'text',
+        style: {
+          text: 'True Class',
+          fill: '#333',
+          font: 'bold 24px serif',
+          textAlign: 'center'
+        },
+        x: (window.innerWidth - 600) / 2 + (600 / 6) * 4,
+        y: 40
+      },
+      {
+        type: 'text',
+        style: {
+          text: 'Predicted Class',
+          fill: '#333',
+          font: 'bold 24px serif',
+          textAlign: 'center'
+        },
+        x: (window.innerWidth - 600) / 2 - 50,
+        y: 270,
+        rotation: Math.PI / 2
+      }
+    ]
+  }
+};

public/examples/ts/matrix-correlation-heatmap.ts

@@ -0,0 +1,66 @@
+/*
+title: Correlation Matrix (Heatmap)
+category: matrix
+titleCN: 相关矩阵（热力图）
+difficulty: 2
+*/
+
+const xCnt = 8;
+const yCnt = xCnt;
+const xData = [];
+const yData = [];
+for (let i = 0; i < xCnt; ++i) {
+  xData.push({
+    value: 'X' + (i + 1)
+  });
+}
+
+for (let i = 0; i < yCnt; ++i) {
+  yData.push({
+    value: 'Y' + (i + 1)
+  });
+}
+
+const data = [];
+for (let i = 1; i <= xCnt; ++i) {
+  for (let j = 1; j <= yCnt; ++j) {
+    if (i >= j) {
+      data.push([
+        'X' + i,
+        'Y' + j,
+        i === j ? 1 : Math.random() * 2 - 1
+      ]);
+    }
+  }
+}
+
+option = {
+  matrix: {
+    x: {
+      data: xData
+    },
+    y: {
+      data: yData
+    },
+    top: 80
+  },
+  visualMap: {
+    type: 'continuous',
+    min: -1,
+    max: 1,
+    dimension: 2,
+    calculable: true,
+    orient: 'horizontal',
+    top: 5,
+    left: 'center'
+  },
+  series: {
+    type: 'heatmap',
+    coordinateSystem: 'matrix',
+    data,
+    label: {
+      show: true,
+      formatter: params => params.value[2].toFixed(2)
+    }
+  }
+};

public/examples/ts/matrix-correlation-scatter.ts

@@ -0,0 +1,80 @@
+/*
+title: Correlation Matrix (Scatter)
+category: matrix
+titleCN: 相关矩阵（散点图）
+difficulty: 2
+*/
+
+const xCnt = 10;
+const yCnt = 6;
+const xData = [];
+const yData = [];
+for (let i = 0; i < xCnt; ++i) {
+  xData.push({
+    value: 'X' + (i + 1)
+  });
+}
+
+for (let i = 0; i < yCnt; ++i) {
+  yData.push({
+    value: 'Y' + (i + 1)
+  });
+}
+
+const data = [];
+for (let i = 1; i <= xCnt; ++i) {
+  for (let j = 1; j <= yCnt; ++j) {
+    data.push(['X' + i, 'Y' + j, Math.random() * 2 - 1]);
+  }
+}
+
+option = {
+  matrix: {
+    x: {
+      data: xData
+    },
+    y: {
+      data: yData
+    },
+    top: 80
+  },
+  visualMap: {
+    type: 'continuous',
+    min: -1,
+    max: 1,
+    dimension: 2,
+    calculable: true,
+    orient: 'horizontal',
+    top: 5,
+    left: 'center',
+    inRange: {
+      color: [
+        '#313695',
+        '#4575b4',
+        '#74add1',
+        '#abd9e9',
+        '#e0f3f8',
+        '#ffffbf',
+        '#fee090',
+        '#fdae61',
+        '#f46d43',
+        '#d73027',
+        '#a50026'
+      ],
+      symbolSize: [15, 40]
+    }
+  },
+  series: {
+    type: 'scatter',
+    coordinateSystem: 'matrix',
+    data,
+    itemStyle: {
+      opacity: 1
+    },
+    label: {
+      show: true,
+      formatter: (params) => params.value[2].toFixed(2)
+    }
+  }
+};
+

public/examples/ts/matrix-covariance.ts

@@ -0,0 +1,110 @@
+/*
+title: Covariance Matrix
+category: matrix
+titleCN: 协方差矩阵
+difficulty: 5
+*/
+
+const xData = [];
+const yData = [];
+for (let i = 0; i < 5; ++i) {
+  const children = [];
+  for (let j = 0; j < 5; ++j) {
+    children.push(i * 5 + j + 1 + '');
+  }
+  xData.push({
+    value: 'X' + (i + 1),
+    children
+  });
+  yData.push({
+    value: 'Y' + (i + 1),
+    children
+  });
+}
+
+const data = [];
+const size = 25;
+let temp = {};
+
+for (let i = 1; i <= size; ++i) {
+  for (let j = 1; j <= size; ++j) {
+    let base = i === j ? 100 : 20;
+    const iGroup = Math.ceil(i / 5);
+    const jGroup = Math.ceil(j / 5);
+    base += (3 - Math.abs(iGroup - jGroup)) * 35;
+    if (i % 5 === j % 5) {
+      base += 20;
+    }
+    if (Math.random() > 0.9) {
+      base += Math.random() * 40;
+    }
+
+    if (i > j) {
+      // Use the previously calculated value to ensure symmetry
+      data.push([
+        i + '',
+        j + '',
+        temp[j + '_' + i]
+      ]);
+    } else {
+      // Calculate a new value and save it for future use
+      let value = (Math.random() * 0.5 + 0.5) * base;
+      data.push([
+        i + '',
+        j + '',
+        value
+      ]);
+      temp[i + '_' + j] = value;
+    }
+  }
+}
+
+option = {
+  matrix: {
+    x: {
+      data: xData,
+      show: false
+    },
+    y: {
+      data: yData,
+      show: false
+    },
+    width: 500,
+    height: 500,
+    left: (window.innerWidth - 500) / 2
+  },
+  tooltip: {
+    show: true,
+    valueFormatter: value => Math.round(value)
+  },
+  visualMap: {
+    type: 'continuous',
+    min: 15,
+    max: 120,
+    dimension: 2,
+    calculable: true,
+    orient: 'horizontal',
+    top: 5,
+    left: 'center',
+    inRange: {
+      color: [
+        '#313695',
+        '#4575b4',
+        '#74add1',
+        '#abd9e9',
+        '#e0f3f8',
+        '#ffffbf',
+        '#fee090',
+        '#fdae61',
+        '#f46d43',
+        '#d73027',
+        '#a50026'
+      ]
+    }
+  },
+  series: {
+    type: 'heatmap',
+    coordinateSystem: 'matrix',
+    data
+  }
+};