Quick Start

---

Installation

To install Plotteus in Node.js environment, run

npm install plotteus

. Plotteus uses ES modules, so it can be also used directly in the browser with

type="module"

.

---

Node.js

import { makeStory } from "plotteus";

const story = makeStory(div, steps, options);

---

Browser

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

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

---

Creating your first story

A core part of Plotteus is a

makeStory

function, which takes a

div

element, an array of

Steps

containing instructions on how to construct a story and an optional

StoryOptions

object.

When called, it returns an object that exposes a

render

method that takes

stepKey

as the first argument,

stepProgress

as the second argument and

indicateProgress

as the third argument.

Plotteus is based on transitions between consecutive steps. To animate things correctly, it uses key-matching between elements to determine whether they are entering, updating or exiting.

import { makeStory } from "plotteus";

const div = document.querySelector("#story");
const steps = [
  {
    key: "intro",
    chartType: "treemap",
    title: "Plotteus",
    titleAnchor: "middle",
    subtitle: "A data storytelling library.",
    subtitleAnchor: "middle",
    showValues: true,
    showDatumLabels: true,
    groups: [
      {
        key: "Alice",
        data: [
          { key: "A", value: 1 },
          { key: "B", value: 2 },
          { key: "C", value: 3 },
        ],
      },
      {
        key: "Bob",
        data: [
          { key: "A", value: 3 },
          { key: "B", value: 4 },
          { key: "C", value: 2 },
        ],
      },
      {
        key: "Cecile",
        data: [
          { key: "A", value: 1 },
          { key: "B", value: 5 },
          { key: "C", value: 2 },
        ],
      },
    ],
  },
];
const story = makeStory(div, steps);
story.render("intro", 1);