Plotteus：一款 storytelling 的可视化神器

Plotteus：一款 storytelling 的可视化神器

什么是 Plotteus

Plotteus 是一个开源而且强大的 JavaScript 数据可视化库，旨在更好地讲述故事（storytelling）。Plotteus 通过完全控制故事的呈现方式、具有一流对象稳定性的无缝过渡以及内置响应能力，将数据驱动的故事提升到一个新的水平。

Plotteus 还允许开发者从头开始为故事创建交互式可视化，从定义图表类型、图表主题、图表可响应性等开始，通过状态之间的无缝转换，到让用户完全控制它们。

如何使用 Plotteus

Plotteus 基础使用

要在 Node.js 环境中安装 Plotteus，可以直接运行 npm installplotteus。 Plotteus 使用 ES 模块，因此也可以直接在浏览器中使用 type="module" 使用。

<script type="module">
  import { makeStory } from "https://cdn.jsdelivr.net/npm/plotteus";

  const story = makeStory(div, steps, options);
</script>

开始使用 Plotteus 创建图表非常简单，下面是一个 Plotteus 的最小示例。

import { makeStory } from "plotteus";
const div = document.querySelector("#story");
const steps = [
  {
    key: "intro",
    chartType: "bar",
    title: "Hello, Plotteus! ",
    groups: [
      {
        key: "Alice",
        data: [
          {key: "A", value: 1},
          {key: "B", value: 1.2},
          {key: "C", value: 1.4},
        ],
      },
      {
        key: "Bob",
        data: [
          {key: "A", value: 1.6},
          {key: "B", value: 1.8},
          {key: "C", value: 1.6},
        ],
      },
      {
        key: "Cecile",
        data: [
          {key: "A", value: 1.4},
          {key: "B", value: 1.2},
          {key: "C", value: 1},
        ],
      },
    ],
  },
];
const story = makeStory(div, steps);
story.render("intro", 1);

渲染样式如下：

细粒度控制 Plotteus

Plotteus 的优势之一是可以让开发者完全控制如何呈现数据故事。 讲述数据故事的流行方法侧重于使用一堆与文本混合的图表，或连接到一组触发器的粘性图表，这些触发器在激活时（通常通过滚动）启动动画。

Plotteus 为开发者提供了更多自由，它创建了一组插值器，可用于在任何进度下渲染故事的给定部分。 这意味着开发者可以在用户滚动页面时逐步渲染故事，使用滑块控制进度或复制触发方法以在给定持续时间内完全渲染步骤。

将数据放在上下文中

另一个通常难以实现的行为是故事的流畅性。 由于某些图表类型可能比其他图表类型更适合特定的数据片段，因此如果能够在它们之间进行转换，同时保持数据在上下文中，那就太好了。

例如，开发者可能想要突出显示树形图的多个部分并使用条形图对它们进行比较。 通常，用户必须退出整个树形图并输入仅包含需要的数据的新条形图（这可能会导致难以跟踪正在比较的部分及其在前一个树形图中的位置）。 使用 Plotteus，可以将任何图表类型无缝地动画化为任何其他图表类型。

Plotteus 还可以轻松完成其他对于讲述数据故事也至关重要的基本操作，例如：突出显示、排序或添加新数据，所有这些都具有精美的动画效果。