Plotteus logoPlotteus

Examples

Docs

Groups

In Plotteus, you pass the data to create a chart in an array of

Group

objects – each

Group

contains an array of

Datum

objects.

You can think of each

Group

as a separate chart. Let's explain what this means on a chart-basis, assuming we want our chart to contain three elements: A, B, C, each with a numerical value assigned to it.

Bar

To make a bar chart, you need to pass three

Groups

, each with one

Datum

attached.

const div = document.querySelector("#story");
const steps = [
  {
    key: "intro",
    chartType: "bar",
    groups: [
      {
        key: "A",
        data: [{ key: "value", value: 1 }],
      },
      {
        key: "B",
        data: [{ key: "value", value: 2 }],
      },
      {
        key: "C",
        data: [{ key: "value", value: 3 }],
      },
    ],
  },
];;
const story = makeStory(div, steps);
story.render("intro", 1);

It is quite easy now to make a proper grouped bar chart.

const div = document.querySelector("#story");
const steps = [
  {
    key: "intro",
    chartType: "bar",
    groups: [
      {
        key: "A",
        data: [
          { key: "value", value: 1 },
          { key: "otherValue", value: 2 },
        ],
      },
      {
        key: "B",
        data: [
          { key: "value", value: 2 },
          { key: "otherValue", value: 3 },
        ],
      },
      {
        key: "C",
        data: [
          { key: "value", value: 3 },
          { key: "otherValue", value: 4 },
        ],
      },
    ],
  },
];;
const story = makeStory(div, steps);
story.render("intro", 1);

Rest

For other chart types, you will want to have one group that contains all three values.

const div = document.querySelector("#story");
const steps = [
  {
    key: "intro",
    chartType: "bubble",
    groups: [
      {
        key: "one",
        data: [
          { key: "A", value: 1 },
          { key: "B", value: 2 },
          { key: "C", value: 3 },
        ],
      },
    ]
  },
];;
const story = makeStory(div, steps);
story.render("intro", 1);

To create a grouped bubble chart, simply add additional group.

const div = document.querySelector("#story");
const steps = [
  {
    key: "intro",
    chartType: "bubble",
    groups: [
      {
        key: "one",
        data: [
          { key: "A", value: 1 },
          { key: "B", value: 2 },
          { key: "C", value: 3 },
        ],
      },
      {
        key: "two",
        data: [
          { key: "D", value: 2 },
          { key: "E", value: 3 },
          { key: "F", value: 4 },
        ],
      },
    ],
  },
];;
const story = makeStory(div, steps);
story.render("intro", 1);

Sharing color domain

You can structure your

Steps

to be based on either more

Groups

(as with the bar chart) or fewer

Groups

(other charts). The main difference between them is that, by default, the color domain is shared at the

Datum

level for bar and pie charts and at the

Group

level for other charts.

This decision comes from the experience that bar charts usually share the same domain within

Groups

(so, A in one

Group

should have the same color as A in every other

Group

). Pie charts, well, usually do not share the same color within the

Group

, as you would end up with monochromatic slices.

const div = document.querySelector("#story");
const steps = [
  {
    key: "intro",
    chartType: "pie",
    shareDomain: false,
    title: "Not Cool Pie Chart",
    titleAnchor: "middle",
    subtitle: "shareDomain = false",
    subtitleAnchor: "middle",
    groups: [
      {
        key: "one",
        data: [
          { key: "A", value: 1 },
          { key: "B", value: 2 },
          { key: "C", value: 3 },
        ],
      },
    ],
  },
];;
const story = makeStory(div, steps);
story.render("intro", 1);

Bubble, scatter and treemap charts, on the other hand, usually have different "children" within groups. However, you can freely change this behavior by manually setting

shareDomain

property to suit your needs, e.g. if you'd like to have a three-group bar chart with colors based on

Group

rather than

Datum

.

const div = document.querySelector("#story");
const steps = [
  {
    key: "intro",
    chartType: "bar",
    shareDomain: false,
    title: "Acceptable Bar Chart",
    titleAnchor: "middle",
    subtitle: "shareDomain = false",
    subtitleAnchor: "middle",
    groups: [
      {
        key: "one",
        data: [
          { key: "A", value: 1 },
          { key: "B", value: 2 },
          { key: "C", value: 3 },
        ],
      },
      {
        key: "two",
        data: [
          { key: "A", value: 2 },
          { key: "B", value: 3 },
          { key: "C", value: 4 },
        ],
      },
      {
        key: "three",
        data: [
          { key: "A", value: 4 },
          { key: "B", value: 3 },
          { key: "C", value: 2 },
        ],
      },
    ],
  },
];;
const story = makeStory(div, steps);
story.render("intro", 1);

While this design gives you a lot of freedom to manipulate the elements, it can also pose a problem if you want to make some specific animations.

Datum teleportation

For complex animations such as extracting some data from a grouped bubble / pie / treemap chart to show a single grouped bar chart based on it, Plotteus offers datum teleportation.

To teleport a

Datum

from a given exiting

Group

, you can add a

teleportFrom

property to it, in the form of a

previousGroupKey:previousDatumKey

string to intercept it from that

Group

instead of showing a regular entering animation.

Story progress

const div = document.querySelector("#story");
const steps = [
  {
    key: "zero",
    chartType: "bar",
    groups: [
      {
        key: "A",
        data: [
          { key: "1996", value: 1 },
          { key: "1997", value: 1.2 },
        ],
      },
      {
        key: "B",
        data: [
          { key: "1996", value: 2 },
          { key: "1997", value: 2.4 },
        ],
      },
      {
        key: "C",
        data: [
          { key: "1996", value: 3 },
          { key: "1997", value: 3.6 },
        ],
      },
    ],
  },
  {
    key: "one",
    chartType: "pie",
    groups: [
      {
        key: "pieGroup",
        data: [
          { key: "A", value: 1, teleportFrom: "A:1996" },
          { key: "B", value: 2, teleportFrom: "B:1996" },
          { key: "C", value: 3, teleportFrom: "C:1996" },
        ],
      },
    ],
  },
  {
    key: "two",
    chartType: "bar",
    groups: [
      {
        key: "A",
        data: [
          { key: "value", value: 1, teleportFrom: "pieGroup:A" },
          { key: "otherValue", value: 2 },
        ],
      },
      {
        key: "B",
        data: [
          { key: "value", value: 2, teleportFrom: "pieGroup:B" },
          { key: "otherValue", value: 3 },
        ],
      },
      {
        key: "C",
        data: [
          { key: "value", value: 3, teleportFrom: "pieGroup:C" },
          { key: "otherValue", value: 4 },
        ],
      },
    ],
  },
];;
const story = makeStory(div, steps);
const onChange = (value) => {
  if (value < 1 / 3) {
    story.render("zero", value * 3);
  } else if (value < 2 / 3) {
    story.render("one", (value - 1 / 3) * 3);
  } else {
    story.render("two", (value - 2 / 3) * 3);
  }
}