数据可视化库Observable Plot 是一个免费的开源 JavaScript 库(https://github.com/observablehq/plot)用于可视化表格数据专注于加速探索性数据分析。它拥有简洁、易记且表达力强的界面采用了由 Leland Wilkinson 和 Hadley Wickham 推广的图形语法风格中的刻度(scales)和分层标记(layered marks)并受到 Jacques Bertin 早期理念的启发。此外还提供了大量可供学习和复制粘贴的示例https://observablehq.com/)。但「采用了图形语法风格」到底意味着什么Observable Plot 实现了图形语法的全部还是只是一部分它和 ggplot2 这种「图形语法标杆」有什么区别本文从图形语法的理论出发拆解 Observable Plot 的实现最后讨论图形语法的边界与补齐方案。一、什么是图形语法1.1 传统图表库的痛点传统图表库如 ECharts、Highcharts采用「图表类型」思维你想画散点图就选type: scatter想画柱状图就选type: bar。每种图表是一个封装好的黑盒内部逻辑不可见、不可组合。这种模式优势显著有很多成熟的现成图表但仍然有一些痛点组合困难想在散点图上加一条回归线需要两个 series 手动配置数据格式还不一样扩展困难想要一个库没有的图表类型只能等官方更新或自己写插件概念不统一每种图表的配置项各搞一套学习成本高1.2 图形语法的核心思想1999 年Leland Wilkinson 在《The Grammar of Graphics》中提出了一个革命性的思想一张图不是一种「类型」而是一组「构件」的组合。就像自然语言中句子由主语、谓语、宾语组合而成图表由数据、映射、统计变换、几何对象、标尺等构件组合而成。2010 年Hadley Wickham 在 ggplot2 中将这一思想落地为「分层图形语法」核心是九大构件构件作用类比Data输入数据长表格式食材Aes数据字段→视觉属性的映射菜谱哪样食材放哪Stat统计变换分箱、平滑、计数烹饪加工Geom几何对象点、线、柱装盘形状Scale数据值→像素值的标尺计量单位换算Coord坐标系笛卡尔、极坐标餐桌形状Position位置调整堆叠、并排、抖动摆盘位置Facet分面按字段分组画子图分餐制Theme主题颜色、字体、间距餐厅装修风格解耦是图形语法的灵魂。Stat 和 Geom 是解耦的同一个分箱统计stat_bin可以配柱状图geom_bar也可以配散点图geom_point。同一个平滑统计stat_smooth可以配线geom_line也可以配置信区间geom_ribbon。这种自由组合是传统图表库做不到的。1.3 渲染流水线九大构件按固定的流水线协作原始数据 → stat 统计变换可选→ 中间数据 → aes 映射确定用哪些字段 → scale 映射数据值 → 像素值 → geom 渲染生成图形元素 → position 位置调整可选 → coord 坐标变换最后一步 → 叠加到 layer 中 → 绘制 axis/legend基于 scale → theme 样式应用注意几个关键顺序Stat 在 Geom 之前统计变换输出中间数据Geom 消费中间数据Coord 在最后坐标系变换不影响统计计算Axis/Legend 是 Scale 的副产品。二、图形语法举例用一个具体例子来理解九大构件如何协作。数据集是经典的 mtcars32 款汽车的参数我们要画一张「车重 vs 油耗」的散点图并按气缸数着色再加一条回归线。2.1 ggplot2 实现ggplot(mtcars,aes(xwt,ympg,colorfactor(cyl)))geom_point(size3)geom_smooth(methodlm,seFALSE,colorblack)scale_x_continuous(name车重 (1000 lbs))scale_y_continuous(name油耗 (mpg))scale_color_brewer(paletteSet1,name气缸数)theme_minimal()2.2 逐构件拆解构件在本例中的作用具体值Data输入数据集mtcars32行×11列的长表Aes字段→视觉通道映射xwt, ympg, colorfactor(cyl)Stat统计变换第一层无原始数据第二层 stat_smooth线性回归Geom几何对象第一层 geom_point散点第二层 geom_smooth线Scale数据→像素映射x/y 线性标尺color 用 Set1 色板Coord坐标系默认笛卡尔坐标Position位置调整默认 identity不调整Facet分面无单图Theme主题theme_minimal极简风格2.3 数据流向第一层散点原始 mtcars 数据 → aes 取出 wt/mpg/cyl → scale 映射成坐标和颜色 → geom_point 生成 32 个 circle。第二层回归线原始 mtcars 数据 → stat_smooth 做线性回归输出 2 个点 {x, y} → scale 映射成坐标 → geom_smooth 生成 1 条 path。两层叠加坐标轴和图例基于 scale 自动生成主题应用全局样式。这就是图形语法的完整流水线。2.4 解耦的威力如果想把这张图改成直方图只需要改 stat 和 geom# 散点图ggplot(mtcars,aes(xmpg))geom_point(statbin)# 直方图同样的数据同样的 aes换 stat geomggplot(mtcars,aes(xmpg))geom_histogram(bins10)数据、aes、scale 都不变只换了 statbin和 geombar就从散点图变成了直方图。这就是解耦的表达力。三、Observable Plot 实现了哪些部件3.1 Observable Plot 的设计Observable Plot 的定位是「轻量化图形语法子集」。它不追求实现图形语法的全部而是在「简洁 API」和「语法完整性」之间做取舍。典型特点如stat 和 mark 耦合不区分 stat 和 geom统一称为 mark标记。如 Plot.dot散点、Plot.line折线、Plot.bin直方图内置分箱统计函数式 API每个 mark 是一个函数返回一个描述对象传入 Plot.plot() 渲染原生交互tooltip、brush、zoom 内置不需要额外配置基于 D3底层用 D3 的 scale、shape、axis站在巨人肩膀上3.2 九大构件对应关系构件实现度Observable Plot 对应说明Data完整data 参数数组/typed array/列对象支持多种数据格式自动识别Aes部分channelsx/y/fill/stroke/r/opacity...通道映射完整但无独立 aes 抽象直接写在 mark 里Stat部分内置在 mark 中bin/interval/hexgrid...统计逻辑固化在 mark 中不可独立插拔无自定义 statGeom部分marksdot/line/bar/area/rect...几何对象丰富但与 stat 耦合不可自由组合Scale完整scales 配置x/y/color/opacity...基于 D3-scale支持 linear/log/ordinal/time/band 等Coord部分projection地理投影、polar极坐标有限地理投影强但极坐标仅支持部分 mark无 coord_flip/coord_transPosition部分offset 参数stack/normalize/jitter支持堆叠、归一化、抖动但无 dodge分组并排需手动处理Facet部分fx/fy 通道支持一维/二维分面但无 free scales布局灵活性有限Theme较完整style/color/grid 配置 预设主题支持自定义样式有 light/dark 预设但不如 ggplot2 精细3.3 已实现部件详解Scale标尺最完整的构件Observable Plot 的 scale 体系基于 D3-scale是九大构件中实现最完整的。支持连续型linear、log、pow、sqrt、symlog、time、utc离散型ordinal、band、point、quantile、quantize、threshold颜色比例尺categorical、sequential、diverging、cyclic内置 D3 色板nice/ticks/label自动优化刻度和标签Plot.plot({x:{type:log,label:车重 (log scale)},y:{grid:true,label:油耗},color:{type:ordinal,scheme:Set1,legend:true},marks:[Plot.dot(mtcars,{x:wt,y:mpg,fill:cyl})]})Mark标记stat geom 的耦合体Observable Plot 不区分 stat 和 geom统一为 mark。每个 mark 内置了统计逻辑和渲染逻辑Mark内置统计对应 ggplot2dot无geom_pointline无按 x 排序geom_linebarY/barX无geom_colrect无geom_tilearea无geom_areabin分箱计数stat_bin geom_barhexgrid六边形分箱geom_hexdensity核密度估计stat_density geom_densitylinearRegression线性回归stat_smooth(method“lm”)loessRegressionLOESS 回归stat_smooth(method“loess”)boxplot箱线图统计stat_boxplot geom_boxplotcontour等高线计算geom_contour这种设计的好处是 API 简洁——画直方图只需要Plot.bin(data, {x: mpg})不需要分别指定 stat 和 geom。代价是失去了 stat-geom 自由组合的能力。Facet分面fx/fy 通道Observable Plot 用 fx/fy 通道实现分面非常简洁Plot.plot({fx:{label:气缸数},marks:[Plot.dot(mtcars,{x:wt,y:mpg,fx:cyl}),Plot.linearRegressionY(mtcars,{x:wt,y:mpg,fx:cyl,stroke:red})]})但限制是所有分面共享相同的 scale无 free scales布局是规则网格不支持复杂的自定义布局。交互原生支持这是 Observable Plot 相比 ggplot2 的最大优势——交互是内置的不需要额外配置Plot.plot({marks:[Plot.dot(mtcars,{x:wt,y:mpg,fill:cyl,tip:true,// tooltip一行配置brush:{filter:null}// 框选})]})ggplot2 本身是静态的交互需要通过 plotly::ggplotly() 转换。而 Observable Plot 的 tooltip、brush、zoom 都是原生的。3.4 Observable Plot 的不足stat 和 mark 耦合无自定义 stat统计逻辑固化在 mark 中不能像 ggplot2 那样自由组合如 stat_bin geom_point。也不能注册自定义的全局复用 stat。无独立 aes 抽象映射直接写在每个 mark 的参数里没有全局 aes 局部 aes 的继承机制。多个 mark 共享映射时需要重复写。Coord 能力有限地理投影projection很强但极坐标仅支持部分 mark没有 coord_flipx/y 翻转、coord_trans坐标变换。饼图的实现不方便需要使用 d3 arc。Position 不完整支持 stack/normalize/jitter但没有 dodge分组柱状图的并排需要手动计算偏移或用 groupX。Facet 无 free scales所有分面共享 x/y scale不能让每个子图有独立的坐标范围。无自定义 geom 机制不能像 ggplot2 那样编写自定义 Geom 类并注册。自定义图形需要用 Plot.vector 或直接操作 SVG。双轴支持弱没有 sec_axis次坐标轴双 y 轴图需要手动处理。3.5 Observable Plot 的优势API 极简画一张图只需要几行代码。散点图Plot.dot(data, {x, y})直方图Plot.bin(data, {x})。学习成本远低于 ggplot2。原生交互tooltip、brush、zoom 内置一行配置开启。这是 ggplot2 做不到的。基于 D3 生态scale、shape、axis、projection 都用 D3质量有保障。可以和 D3 代码混用。Observable 原生集成在 Observable Notebook 中零配置使用响应式更新。也支持 Quarto、R Markdown。默认样式好不需要配置主题就能得到美观的图表网格线、颜色、字体都有精心设计的默认值。类型安全TypeScript 原生支持IDE 自动补全。3.6 同一张图的代码对比Plot.plot({grid:true,x:{label:车重 (1000 lbs)},y:{label:油耗 (mpg)},color:{legend:true,label:气缸数},marks:[Plot.dot(mtcars,{x:wt,y:mpg,fill:cyl,tip:true}),Plot.linearRegressionY(mtcars,{x:wt,y:mpg,stroke:black})]})ggplot(mtcars,aes(xwt,ympg,colorfactor(cyl)))geom_point(size3)geom_smooth(methodlm,seFALSE,colorblack)labs(x车重 (1000 lbs),y油耗 (mpg),color气缸数)theme_minimal()theme(legend.positionright)# 交互需要 plotly::ggplotly() 转换Observable Plot 代码更短且原生支持 tooltip。但 ggplot2 的 stat-geom 解耦更清晰扩展能力更强。四、延伸图形语法的边界和解决方案4.1 图形语法的六大短板通过前面的分析可以看到即使是 ggplot2 这种「图形语法标杆」也有一些固有的短板——这些不是实现问题而是图形语法本身的设计边界短板原因典型图表拓扑布局图形语法绑定二维表无节点-边抽象力导向图、桑基图、树图、和弦图自由排版Facet 是规则网格非自由布局仪表盘、多图组合、不规则排版交互ggplot2 设计为静态输出tooltip、brush、zoom、下钻3D图形语法本质是 2D 的3D 散点、3D 曲面、3D 柱状地图需要地理投影和空间数据结构choropleth、飞线、热力地图大数据性能SVG/grid 渲染在万级以上卡顿百万级散点、实时流数据4.2 各短板的解决方案拓扑布局专用图可视化引擎图形语法不擅长节点-边关系图因为这类图需要布局算法力导向、树布局、桑基布局而不是简单的 x/y 映射。解决方案AntV G6专业的图可视化引擎内置力导向、树、DAG、桑基等布局支持自定义节点和边D3-force / D3-sankey / D3-hierarchyD3 的布局算法模块可以和 D3 的渲染配合Cytoscape.js生物信息学领域常用的网络图库ECharts graph/sankey/tree内置拓扑布局的系列配置ggplot2 ggraphggplot2 的扩展包用图形语法画网络图但布局仍需外部算法自由排版组合布局工具图形语法的 facet 是规则网格不适合复杂的仪表盘布局。解决方案patchworkRggplot2 的多图组合包支持自定义布局网格cowplotR另一个 ggplot2 组合工具CSS Grid / FlexboxWeb用 CSS 布局多个图表容器ECharts grid多 grid 布局支持任意位置和大小的子图交互Web 原生或转换Observable Plot / Vega-Lite / AntV G2Web 端图形语法库原生支持交互plotly::ggplotly()将 ggplot2 转换为交互式 Plotly 图表shinyR用 R 做交互式可视化应用D3.js完全自定义交互3D专用 3D 引擎Three.jsWeb 端 3D 渲染的事实标准Plotly 3D支持 3D 散点、曲面、柱状ECharts GLECharts 的 3D 扩展rglRR 的 3D 可视化包地图地理投影库D3-geoD3 的地理投影模块支持 100 投影Observable Plot projection内置地理投影支持ECharts map内置地图注册、飞线、热力ggplot2 sf/ggspatialR 的空间数据扩展大数据性能Canvas/WebGL 渲染WebScatter / Deck.glWebGL 渲染支持百万级数据点ECharts large 模式Canvas 增量渲染DatashaderPython服务端预渲染大数据Observable Plot raster栅格化渲染提升大数据性能4.3 组合使用是最佳实践没有一个库能搞定所有场景。实际项目中通常是组合使用数据分析阶段用 ggplot2/plotnine 做探索性分析图形语法的灵活性最高Web 展示阶段统计图表用 Observable Plot/G2业务大屏用 ECharts网络图用 G6自定义需求用 D3.js 实现图形语法库不支持的图表大数据/3D用 Deck.gl/Three.js 等专用引擎总结Observable Plot 是图形语法的「轻量化子集」——它完整实现了 Scale标尺和 Layered Marks分层标记但将 Stat 和 Geom 耦合为 Mark牺牲了自由组合能力换取了 API 的简洁。它的优势是极简的 API、原生交互、D3 生态和 Observable 集成不足是无自定义 stat/geom、Coord/Position/Facet 能力有限。图形语法本身也有边界——拓扑布局、自由排版、3D、地图、大数据性能等场景需要专用库补齐。理解这些边界才能在合适的场景选择合适的工具。
