Web版深度散点图

这是一个允许在浏览器中交互式可视化极大数据集的库。

它之所以快速有三个原因：

1. 所有数据都以Apache Arrow的feather格式发送，采用自定义四叉树格式，使得只在需要时才加载缩放所需的数据。Feather在浏览器中传输后无需解析时间，压缩效果良好，并且可以直接复制到GPU而无需在JS中转换。这是未来的方向。我们现在还允许在Arrow数据上进行自定义的浏览器内计算。

2. 大部分渲染都是使用WebGL的自定义图层完成的，缓冲区管理策略由REGL处理。这意味着对于点或不同对象没有不必要的抽象或单独的绘制调用；为所有需要的点附加最少数量的缓冲区。

3. 几乎所有图形语法转换都在GPU上处理，这允许并行计算的插值过渡。

它也可以在完全静态的设置中运行，因此你可以通过类似Github Pages的方式托管一个百万点的散点图。

Deepscatter是Atlas的底层图形引擎。它以NC-CC-BY-SA许可证提供，用于所有非商业用途。

示例

• 550万条推文的Atlas地图。(Nomic)
• 使用T-SNE嵌入的2000万生物医学摘要的叙事可视化。(Nomic与图宾根大学的合作)
• 来自arxiv.com的100多万份文档在Observable笔记本中呈现。(Ben Schmidt)
• 在交互式svelte-kit应用中显示的2010年和2020年美国人口普查中的每个人。(Ben Schmidt)
• 重建时期国会图书馆的报纸文章。(Andromeda Yelton在国会图书馆驻地期间)

文档

查看自动生成的typescript文档以获取完整的方法和函数列表。

获取帮助

欢迎在Github上提出问题，即使是质量较低的问题。

还有一个专门的Deepscatter Slack，欢迎你加入。Nomic维护着一个discord服务器，其中有专门的Deepscatter和Atlas支持频道。

我从非常非技术的背景开始做这些事情，欢迎人们带着初级问题加入。

快速开始

导入模块

查看上面的arxiv示例以了解一些基本示例。

本地运行

首先，安装用Python编写的配套分块库，并在50000个一组的块中生成100万个测试数据点。

python3 -V # 需要Python 3.9.x或3.10.x
python3 -m pip install git+https://github.com/bmschmidt/quadfeather
quadfeather-test-data 1_000_000
quadfeather --files tmp.csv --tile_size 50_000 --destination tiles

然后设置这个库来运行。它将启动一个本地开发服务器。

npm i
npm run dev

如果你访问localhost:3344，你应该看到一个交互式散点图。要深入了解你所看到的，请打开index.html。 （在2021年，这个开发站点在Chrome中工作，不在Safari或Firefox中工作，因为它在webworker中使用ES6模块语法。模块的分发版本应该在所有浏览器中工作。）

你自己的数据

1. 创建一个包含名为'x'和'y'列的CSV、parquet或feather文件。（或者一个包含x、y列的feather文件）。任何其他列（分类信息等）都可以作为额外列包含在内。

2. 将其分块：

cd deepscatter # 如果你还没在那里
quadfeather --files ../some-path-to/your-data.csv --tile_size 50000 --destination tiles

3. 假设你的数据集有x和y列，并且tiles文件夹在这个项目的根目录中，你可以通过运行以下命令来可视化数据

npm run dev

并在浏览器中打开http://localhost:3345/index-simplest-way-to-start.html。

要编辑可视化或进行故障排除，请查看文件index-simplest-way-to-start.html，你应该能找到一个最基本的deepscatter实现。

探索index.html，并在http://localhost:3345/index.html渲染它，以获取更高级的示例。

注意：理想情况下，在未来的版本中，你将能够以不需要直接编码JSON的方式创建这些规格。

构建模块

npm run build

将在dist/deepscatter.es.js创建一个ES模块。导入这个模块的机制与index.html略有不同。

注意，这是一个ESM模块，因此需要你在代码中使用<script type="module">。 别担心！我们现在允许这么做！但要注意，这在运行非常旧浏览器的计算机上不起作用。

代码片段：

<div id="my-div"></div>
<script type="module">
  import Scatterplot from './dist/deepscatter.umd.js';
  f = new Scatterplot('#my-div');
</script>

查看index_prod.html以获取示例

这目前是用vite和rollup打包的。上面还有/将会有一个进一步的交互层，但核心绘图组件是分离的，应该作为一个独立的层工作，通过API支持绘图请求。

代码策略

任何直接改变API调用的交互逻辑都不属于这个库。这里唯一的交互代码是用于缩放和与点交互。

未来的代码库拆分

绘图组件和分块组件在逻辑上是相当分离的；我可能会将分块策略拆分成一个单独的JS库，称为'quadfeather'。

Apache Arrow仍然是必要的中间格式，但可以使用例如arquero或DuckDB的WASM端口从CSV文件生成。

API

这仍然可能发生变化，并且没有完全记录。API的编码部分模仿了Vega-Lite，但有一些小的区别，以避免深度嵌套的查询，并添加动画和抖动参数。

{
   encoding: {
     "x": {
         "field": "x",
         "transform": "literal"
     },
     "color": {
         "field": "year",
         "range": "viridis",
         "domain": [1970, 2020]
   }
}

已实现的美学

1. x
2. y
3. size
4. jitter_radius：抖动大小。API可能会改变。
5. jitter_speed：抖动速度。API可能会改变。
6. color（分类或线性：范围可以显式调用颜色比例，或接受任何d3-color名称。）
7. x0（用于动画；在x0和x之间过渡）
8. y0（用于动画；在y0和y之间过渡）
9. filter。（这个库将过滤视为一种美学操作。）

计划中

1. Symbol（将分类变量映射到单个字体中的单个unicode点；可能最多255个。）
2. Label（全文标签）
3. Image（像PixPlot）

抖动

抖动目前有点功能过载，但有些相当有趣。

抖动方法在'jitter_radius'字段的'method'键上设置。可能的值有：

1. circle
2. spiral
3. time
4. normal

原则

1. 这是一个2D库。没有假3D。
2. 中心缩放状态由d3-zoom处理。
3. 使用缩放状态通过挂钩在Deepscatter顶部渲染其他层（注意on_zoom是直接设置的，_不是_通过prefs传入）：

const scatterplot = new Scatterplot('#deepscatter');
scatterplot.on_zoom = (transform) => {...}