引子
D3 很早就听说了想要尝试一下,找到的中文版翻译在查 API 的时候可以参考,对于入门不太方便,打算先把官方最新的入门教程同步翻译一下。
-
版本:Published Mar 24, 2020
正文
本系列将引导你踏出使用 D3.js 的第一步。
在我们开始之前,值得简单考虑一下:为什么要费心学习 D3 ?为什么要在 Observable 上学习?
首先,D3 很受欢迎(179M 下载量和 97K start),所以你有一个良好的陪伴群体。这里有大量社区开发的资源,包括教程、视频、课程和书籍。D3 团队已经发布了数百个可派生的示例和教程,以有益于你的学习和生产力。
另一方面,D3 具有灵活的特性。D3 的超能力是你可以做任何你想做的事情——自由创造!D3 展廊是一个名副其实的种类动物园:treemap、hierarchical edge bundling、 Sankey diagram、 density contours、 force-directed graph 等等(还有近百个地图投影!)。这种灵活性源于 D3 的基础方法,主要关注可组合的基本元素,如形状和比例,而不是可配置的图表。D3 不施加任何约束,因此有益于利用现代浏览器支持的所有功能。
D3 以动画和交互著称。如果你有几分钟时间,可以观看一个 bar chart race 或 animated treemap 。进入到 hierarchical bar chart 、collapsible tree 或者可缩放的 sunburst、treemap 或 packed circles 。或者刷一个scatterplot matrix 或者放大一个 area chart 。动画是一个讲故事的有力载体,而交互让活跃的读者能够探索。
当然,获得这种力量是有代价的。有很多东西需要学习:D3 有超过三十个模块和一千种方法!D3 可能比专门用于探索可视化的工具更乏味,例如 Vega Lite。
这个时候轮到 Observable 出场了。
Observable 是学习 D3 的理想环境,因为它使用数据流简化了代码,就像电子表格一样。当你编辑时,单元格会自动运行以获得快速反馈。你几乎不需要代码就可以添加交互或动画!我们将介绍 Observable 的特性。
Observable 围绕协作展开,帮助你从社区中学习并回馈社区,而不仅仅是复制和粘贴。任何笔记本都可以派生或导入。笔记本可以导出为可复用的组件,例如 color legend 或 scrubber 。你可以对单元格进行评论、建议和合并更改,或寻求帮助。
简介足够了。让我们拉开帷幕,开始学习 D3 。