Observable Plot 初探
Observable Plot 简介
What is Plot
Observable Plot是一个免费的开源 JavaScript 库，用于可视化表格数据，专注于加速探索性数据分析。
why-plot
Observable Plot用于探索性数据可视化。它用于快速发现见解。它的 API 不仅富有表现力且可配置，还针对简洁性和易记性进行了优化。我们希望首次绘制图表的时间尽可能快。
而且速度还不止于此：Plot 可帮助您快速调整和优化数据视图。我们希望 Plot 能让您花更少的时间阅读文档、搜索要复制粘贴的代码和调试 — 而花更多时间询问数据问题。
与其他可视化工具（包括 D3 等低级工具和图表模板等表达能力较弱的高级工具）相比，我们认为使用 Plot 探索数据会更有效率。您将花更多时间“用视觉思考”，而花更少的时间处理编程机制。
Plot 和 D3的关系
Plot 是基于我们十多年开发D3的经验而来的，D3 是网络上最受欢迎的数据可视化库。
D3 让事情变得可能，但不一定容易。无论手头的任务是什么，这都是事实。D3 确实让困难和惊人的事情成为可能，但即使是简单的事情也往往不容易。套用 Amanda Cox 的话：“如果您认为为条形图编写一百行代码是完全正常的，请使用 D3。
Plot 的目标是让简单的事情变得简单、快速，甚至更多。
由于 Plot 和 D3 的目标不同，因此它们做出的权衡也不同。Plot 效率更高：您可以快速制作图表。但它的表现力也必然较差：使用 D3 的低级 API 可以更好地实现具有大量动画和交互的定制可视化、力导向图形布局等高级技术，甚至开发您自己的图表库。
如果您认为 D3 的额外表现力值得您花费时间和精力，我们建议您使用 D3 进行定制数据可视化。D3 对于《纽约时报》或《The Pudding》等媒体组织来说很有意义，因为一张图片可能会被一百万读者看到，编辑团队可以共同努力推动视觉交流的最新发展；但它是构建团队私人仪表板的最佳工具，还是一次性分析的最佳工具？您可能会惊讶于 Plot 能走多远。
Observable Plot 使用体验
整体来说Observable Plot仍然不是一个特别易用的引擎，在入参的格式、返回的结果和方法间流转数据的结构均不是特别清晰。想要专业的使用Observable Plot仍需要借助其丰富的案例和详细的API文档进行大量的学习。
特性简介
Plots
要在 Observable Plot 中渲染图表，请调用plot (通常为Plot.plot)，并传入所需的选项。此函数返回 SVG 或 HTML 图形元素。
Marks
更改，定义图表类型来构建图表
Scales
Scales将抽象值（例如时间或温度）转化为视觉值（例如x →或y ↑位置或颜色）
Projections
Projections投影将x和y的抽象坐标映射到屏幕上的像素位置。大多数情况下，抽象坐标是球面的（经度和纬度），就像渲染地理地图时一样。
Transforms
Transforms将数据作为绘图规范的一部分导出。这加速了可视化中最重的任务：将数据变成正确的形状。
Interactions
交互允许从绘图中读取值（按需显示详细信息），或流畅地更改数据视图而无需编辑代码（缩放和过滤）。有多种方法可以实现与 Plot 的交互，包括内置交互功能和使用 Observable 和 React 等框架的开发技术。
Facets
分面按序数或分类值对数据进行分区，然后为每个分区（每个分面）重复绘制一个图，产生多个小图以供比较。分面通常通过声明水平↔︎ 分面通道fx、垂直↕︎ 分面通道fy或二维分面通道两者来启用。
Legends
Plot 可以生成颜色、不透明度和符号刻度的图例。例如，下面的奥运会运动员身体测量散点图包括其颜色刻度的图例，让读者可以理解颜色的含义。（轴同样记录了**x和y位置刻度的含义。）
Curves
Curves定义如何将线的离散表示（点序列 [[ x₀ , y₀ ], [ x₁ , y₁ ], [ x₂ , y₂ ], …]）转换为连续路径；即如何在点之间进行插值。曲线由线、区域和链接标记使用，并由d3-shape实现。
Formats
提供这些辅助函数是为了方便用作轴标记的tickFormat选项、文本标记的text选项或其他用途。另请参阅d3-format、d3-time-format和 JavaScript 的内置日期格式和数字格式。
Intervals
Plot 提供了几个内置间隔实现，可与刻度的tick选项一起使用，作为bin 变换的阈值选项或其他用途。另请参阅d3-time。您还可以实现自定义间隔。
至少，intervals 实现interval.floor和interval.offset。Range intervals 另外实现interval.range ， nice intervals 另外实现interval.ceil 。在某些情况下，后面这些实现是必需的；****有关详细信息，请参阅 Plot 的 TypeScript 定义。
interval.floor方法接受一个值并返回表示小于或等于指定值的最大间隔边界的对应值。例如，对于“天”时间间隔，它返回前一个午夜：
Markers
Markers定义在线或链接标记的顶点上绘制的图形。
Shorthand
Plot 最简洁的形式是其简写语法，其中不指定任何选项 — 仅指定数据。要使用此简写，数据必须具有特定的结构：一维值数组 [ v₀，v₁，v₂，…] 或二维元组数组 [[ x₀，y₀ ]，[ x₁，y₁ ]，[ x₂，y₂ ]，…]。
虽然这些图表都不是特别具有开创性的，但我们希望您下次想要快速查看一些数据时，这种简写方式会很方便。如果简写视图有用，您可以通过添加选项来增强它！
Accessibility
Plot 使用ARIA通过辅助技术（例如屏幕阅读器、浏览器插件和浏览器开发人员工具）使图表更易于访问。
根 SVG 元素上的aria -label和aria-description属性可以通过顶级ariaLabel和ariaDescription 绘图选项进行设置。这些默认为 null。
标记会自动在渲染的 SVG G 元素上生成一个 aria-label 属性；此属性包括标记的类型，例如“点”。轴标记和网格标记还包括相关刻度的名称，例如“y 轴刻度”、“y 轴标签”或“x 网格”。
使用ariaLabel标记选项应用每个实例的 aria-label 属性（例如，散点图中的各个点），例如，为每个显示的数据点提供简短、人性化且易于阅读的文本表示。使用ariaDescription标记选项提供更长的描述；这适用于标记的 G 元素。这两个选项都默认为 null。
将ariaHidden标记选项设置为 true 会将标记从可访问性树中隐藏。这对于装饰性或冗余标记（例如点之间的规则或线条）很有用。
小结
Observable Plot是服务于数据分析的，内部集成了大量的用于数据分析的工具方法，并且对D3内部的图形方法做了高级封装，一句话：用默认参数的方式极大的简化了基于D3绘制图表和数据分析的操作。但其并不擅长画面表现力。高级定制还得基于D3。
参考 & 引用
https://observablehq.com/plot/
https://observablehq.com/plot/getting-started
https://observablehq.com/@observablehq/plot-gallery
Observable Plot Demo - StackBlitz