VisActor · skie1997 · Apr 16, 2025 · Feb 19, 2025 · Mar 7, 2025 · Mar 7, 2025
diff --git a/VChart b/VChart
diff --git a/docs/assets/examples/en/extension-chart/sequence-scatter-kde.md b/docs/assets/examples/en/extension-chart/sequence-scatter-kde.md
@@ -0,0 +1,89 @@
+---
+category: examples
+group: extension chart
+title: sequence-scatter-kde
+keywords: extension, relationship
+order:
+cover: /vchart/preview/extension-chart-sequence-scatter-kde.gif
+option: extensionChart
+---
+
+# sequence-scatter-kde
+
+## Key option
+
+- `type: sequenceScatterKDE` Specifies the chart type as Sequence Scatter KDE
+
+## Live Demo
+
+```javascript livedemo
+/** --Add the following code when using in production-- */
+// When using in production, please additionally depend on @visactor/vchart-extension, keeping the package version consistent with vchart
+// import { registerConversionFunnelChart } from '@visactor/vchart-extension';
+/** --Add the above code when using in production-- */
+
+/** --Delete the following code when using in production-- */
+const { registerSequenceScatterKDE } = VChartExtension;
+/** --Delete the above code when using in production-- */
+
+const responseData1 = await fetch(
+  'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/sequence-scatter/Training_process1/data.json'
+);
+const trainingData1 = await responseData1.json();
+
+const responseLabel1 = await fetch(
+  'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/sequence-scatter/Training_process1/label.json'
+);
+const trainingLabel1 = await responseLabel1.json();
+
+const origianlData = trainingData1;
+// const origianlData = trainingData2;
+const chartData = {};
+Object.keys(origianlData).forEach(iter => {
+  chartData[iter] = [];
+  origianlData[iter].projection.forEach((pos, index) => {
+    chartData[iter].push({
+      x: pos[0],
+      y: pos[1],
+      label: trainingLabel1.label_index[index]
+    });
+  });
+});
+
+const spec = {
+  width: 600,
+  height: 400,
+  type: 'sequenceScatterKDE',
+  data: chartData,
+  xField: 'x',
+  yField: 'y',
+  seriesField: 'label',
+
+  infoLabel: {
+    visible: true,
+    style: {
+      text: datum => {
+        return 'iteration: ' + datum.iter;
+      }
+    }
+  },
+  player: {
+    orient: 'bottom',
+    auto: true,
+    interval: 2000,
+    duration: 2000
+  },
+  animation: false
+};
+
+registerSequenceScatterKDE();
+const vchart = new VChart(spec, { dom: CONTAINER_ID });
+vchart.renderSync();
+
+// Just for the convenience of console debugging, DO NOT COPY!
+window['vchart'] = vchart;
+```
+
+## Related tutorials
+
+[时序散点关系图](link)
diff --git a/docs/assets/examples/en/extension-chart/sequence-scatter-link-classification.md b/docs/assets/examples/en/extension-chart/sequence-scatter-link-classification.md
@@ -0,0 +1,212 @@
+---
+category: examples
+group: extension chart
+title: sequence-scatter-link-classification
+keywords: extension, relationship
+order:
+cover: /vchart/preview/extension-chart-sequence-scatter-link-classification.gif
+option: extensionChart
+---
+
+# sequence-scatter-link-classification
+
+- Temporal Sequence
+  A deep learning training process consists of multiple training epochs. The predictions of the same data sample may vary across different epochs. Therefore, the predictions of all data in a specific epoch can be viewed as a "frame" in an animation. To display different frames in the same chart, we utilize the player component in vchart to automatically update epoch data, showcasing the progression of the training process over time.
+- Scatter Plot
+  To visualize the prediction results (in coordinate form) of each training data sample in the current epoch, it's natural to use a scatter plot where each data sample corresponds to a point in the chart. In addition to 2D coordinates, points can have other attributes, such as:
+- Color: Can correspond to sample labels, with different labels having different colors;
+- Opacity: Can correspond to the prediction confidence of samples, with higher confidence resulting in lower opacity;
+- Size: Can distinguish selected points, with hovered or selected points enlarged;
+- ......
+
+For more implementation details, see: https://uvwoh700cpq.feishu.cn/docx/AULUdfgPJopMoMxP64RcuGo7nzh?from=from_copylink
+
+## Key option
+
+- `type: sequenceScatterLink` Specifies the chart type as Scatter Relationship Chart
+
+## Live Demo
+
+```javascript livedemo
+/** --Add the following code when using in production-- */
+// When using in production, please additionally depend on @visactor/vchart-extension, keeping the package version consistent with vchart
+// import { registerConversionFunnelChart } from '@visactor/vchart-extension';
+/** --Add the above code when using in production-- */
+
+/** --Delete the following code when using in production-- */
+const { registerSequenceScatterLink } = VChartExtension;
+/** --Delete the above code when using in production-- */
+
+/**
+ * Demo for classification task
+ */
+const TASK_TYPE = 'classification';
+
+/**
+ * getChartData
+ */
+const { chartData, scope, label_color_dict } = await getSeqScatterChartData(TASK_TYPE);
+
+/**
+ * utils
+ */
+async function getSeqScatterChartData(task_type) {
+  // get basic settings
+  const { scope, label_index, label_text, label_color_dict } = await getBasicSettings(task_type);
+
+  // construct chart data
+  const chartData = await constructChartData(task_type, label_index, label_text, label_color_dict);
+
+  return { chartData, scope, label_color_dict };
+}
+
+/**
+ * Get basic settings including canvas scope, labels, label text and label colors
+ */
+async function getBasicSettings(task_type) {
+  const response1 = await fetch(
+    'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/sequence-scatter/Training_process1/info.json'
+  );
+  const trainingInfo1 = await response1.json();
+
+  const response2 = await fetch(
+    'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/sequence-scatter/Training_process2/info.json'
+  );
+  const trainingInfo2 = await response2.json();
+
+  const training_info = task_type === 'neighborhood' ? trainingInfo1 : trainingInfo2;
+  const scope = task_type === 'neighborhood' ? [-9, -9, 6, 6] : [-8, -8, 8, 8];
+
+  const label_index = training_info['label_index'];
+  const label_text = training_info['label_text'];
+  const label_color_list = training_info['label_color'];
+  const label_color_dict = {}; // text -> rgb
+
+  for (let i = 0; i < label_color_list.length; i++) {
+    const c = label_color_list[i];
+    label_color_dict[label_text[i]] = `rgb(${c[0]},${c[1]},${c[2]})`;
+  }
+
+  return { scope, label_index, label_text, label_color_dict };
+}
+
+/**
+ * Construct chart data including nodes and edges
+ */
+async function constructChartData(task_type, label_index, label_text, label_color_dict) {
+  const response1 = await fetch(
+    'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/sequence-scatter/Training_process1/data.json'
+  );
+  const trainingData1 = await response1.json();
+
+  const response2 = await fetch(
+    'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/sequence-scatter/Training_process2/data.json'
+  );
+  const trainingData2 = await response2.json();
+
+  const original_data = task_type === 'neighborhood' ? trainingData1 : trainingData2;
+  const chartData = {};
+
+  Object.keys(original_data).forEach(epoch => {
+    chartData[epoch] = {
+      nodes: [],
+      edges: []
+    };
+
+    // fill in nodes
+    original_data[epoch].projection.forEach((pos, id) => {
+      let conf = 1;
+      let pred = label_text[label_index[id]];
+      if (task_type === 'classification') {
+        conf = original_data[epoch].confidence[id];
+        pred = label_text[original_data[epoch].prediction[id]];
+      }
+
+      chartData[epoch].nodes.push({
+        id: id, // unique identification of a point
+        x: pos[0],
+        y: pos[1],
+        label: label_text[label_index[id]],
+        prediction: pred,
+        confidence: conf
+      });
+    });
+
+    // fill in edges
+    let intra_similarity, inter_similarity;
+    if (task_type === 'neighborhood') {
+      intra_similarity = original_data[epoch].intra_similarity;
+      inter_similarity = original_data[epoch].inter_similarity;
+
+      let i = 0;
+      original_data[epoch].projection.forEach((pos, id) => {
+        intra_similarity[id].forEach(neighbor => {
+          chartData[epoch].edges.push({
+            id: i, // unique identification of an edge
+            x0: pos[0],
+            y0: pos[1],
+            x1: original_data[epoch].projection[neighbor][0],
+            y1: original_data[epoch].projection[neighbor][1],
+            type: 'same_type',
+            color: label_color_dict[label_text[label_index[id]]]
+          });
+          i++;
+        });
+        inter_similarity[id].forEach(neighbor => {
+          chartData[epoch].edges.push({
+            id: i, // unique identification of an edge
+            x0: pos[0],
+            y0: pos[1],
+            x1: original_data[epoch].projection[neighbor][0],
+            y1: original_data[epoch].projection[neighbor][1],
+            type: 'cross_type',
+            color: label_color_dict[label_text[label_index[neighbor]]]
+          });
+          i++;
+        });
+      });
+    }
+  });
+
+  return chartData;
+}
+
+/**
+ * create sequence-scatter spec
+ */
+const spec = {
+  type: 'sequenceScatterLink',
+  taskType: TASK_TYPE,
+  labelColor: label_color_dict,
+  scope: scope,
+  data: chartData,
+  xField: 'x',
+  yField: 'y',
+
+  infoLabel: {
+    visible: true,
+    style: {
+      text: datum => {
+        return 'iteration: ' + datum.iter;
+      }
+    }
+  },
+  player: {
+    orient: 'bottom',
+    auto: true,
+    interval: 2000,
+    duration: 2000
+  }
+};
+
+registerSequenceScatterLink();
+const vchart = new VChart(spec, { dom: CONTAINER_ID });
+vchart.renderSync();
+
+// Just for the convenience of console debugging, DO NOT COPY!
+window['vchart'] = vchart;
+```
+
+## Related tutorials
+
+[时序散点关系图](link)