D3.js绘制散点图，使用多符号增强可视化效果

前端

2023-12-31 11:34:02

用多符号增强 D3.js 散点图可视化

简介

散点图是数据可视化的基本要素，用于揭示成对数据关系。然而，当数据集包含多个类别或子组时，使用单一符号可能不足以充分传达所有信息。

多符号散点图

多符号散点图通过引入不同形状、颜色和大小的符号来解决此限制。这种方法使我们能够根据类别、组或其他相关特征对数据点进行编码，从而提供额外的分析维度。

D3.js 中的多符号散点图

使用 D3.js 创建多符号散点图涉及几个步骤：

导入数据： 从 CSV 文件或其他来源导入数据。
定义符号形状： D3.js 提供了多种内置形状，例如圆圈、正方形和三角形。
映射符号形状： 将符号形状映射到数据中的类别或子组，使用 d3.scaleOrdinal() 函数。
绘制散点图： 使用 d3.selection() 方法将数据点绘制到坐标系上，并使用映射的符号形状对它们进行编码。

示例代码

以下示例使用 D3.js 创建一个多符号散点图：

// 导入 D3 模块
const d3 = require("d3");

// 定义数据
const data = [
  { category: "A", x: 10, y: 20 },
  { category: "B", x: 30, y: 40 },
  { category: "C", x: 50, y: 60 },
  { category: "A", x: 70, y: 80 },
  { category: "B", x: 90, y: 100 },
];

// 定义符号形状
const symbolShapes = ["circle", "square", "triangle-up"];

// 创建符号形状映射
const symbolScale = d3
  .scaleOrdinal()
  .domain(["A", "B", "C"])
  .range(symbolShapes);

// 创建画布
const svg = d3.select("body").append("svg");

// 绘制散点图
svg
  .selectAll("circle")
  .data(data)
  .enter()
  .append("circle")
  .attr("cx", (d) => d.x)
  .attr("cy", (d) => d.y)
  .attr("r", 5)
  .attr("fill", "steelblue")
  .attr("shape", (d) => symbolScale(d.category));