Observable Plot 数据可视化库全面解析-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00501/article/details/148508818

Observable Plot 数据可视化库全面解析

plot Observable Plot: a concise API for exploratory data visualization 项目地址: https://gitcode.com/gh_mirrors/pl/plot

什么是 Observable Plot？

Observable Plot 是一款基于 JavaScript 的开源数据可视化库，专注于加速探索性数据分析过程。它采用简洁而富有表现力的接口设计，深受图形语法（Grammar of Graphics）理念的影响，这一理念由统计学先驱 Leland Wilkinson 和数据科学专家 Hadley Wickham 推广，并源自 Jacques Bertin 早期的可视化理论。

核心特点

直观的图形语法：通过将数据列映射到视觉属性（如x轴、y轴、颜色等）来创建可视化
丰富的内置图表类型：支持散点图、直方图、密度图等多种图表形式
强大的数据处理能力：内置数据转换功能如分箱(binning)、堆叠(stacking)等
响应式设计：图表能够自动适应不同尺寸的容器

基础使用示例

让我们通过几个实际案例来了解 Plot 的基本用法：

1. 基础散点图

Plot.dot(olympians, {
  x: "weight", 
  y: "height",
  stroke: "sex"
}).plot({
  color: {legend: true}
})

这段代码创建了一个简单的散点图，将运动员体重映射到x轴，身高映射到y轴，并用不同颜色区分性别。

2. 分箱处理解决重叠问题

当数据点过于密集时，可以使用分箱(binning)转换：

Plot.rect(olympians, 
  Plot.bin({
    fillOpacity: "count"
  }, {
    x: "weight",
    y: "height",
    fill: "sex",
    inset: 0
  })
).plot()

这里通过分箱将相似身高体重的运动员分组，并用透明度表示每组的数量。

3. 密度图展示分布

Plot.density(olympians, {
  x: "weight",
  y: "height",
  stroke: "sex"
}).plot()

密度图可以更清晰地展示数据的分布情况。

进阶应用

1. 直方图分析单变量分布

Plot.rectY(olympians, 
  Plot.binX({
    y: "count"
  }, {
    x: "weight",
    fill: "sex"
  })
).plot()

这个例子展示了如何创建垂直直方图，分析运动员体重的分布情况。

2. 分面(Facet)展示多组数据

Plot.plot({
  grid: true,
  marks: [
    Plot.rectY(olympians, 
      Plot.binX({
        y: "count"
      }, {
        x: "weight",
        fill: "sex",
        fy: "sex"
      })
    ),
    Plot.ruleY([0])
  ]
})

通过分面技术，我们可以将不同性别的数据分布并排展示，便于比较。