@potion/layout v1.0.0-next.0

#Layouts

The purpose of Layouts is to combine the Shapes/Elements above with datasets and enable declarative animations.

Most Layouts add useful metadata to the input data in useful ways and pass it on to the children.

For example the Pie Layout will calculate metadata from the input dataset like start- and end angles for each arc and pass it on to the children (along with the original data) in order to draw a pie chart.

Chord

Renders a D3 Chord layout.

import { Chord } from '@potion/layout';

Usage

<Svg width={400} height={400}>
  <Chord
    data={[
      [11975, 5871, 8916, 2868],
      [1951, 10048, 2060, 6171],
      [8010, 16145, 8090, 8045],
      [1013, 990, 940, 6907],
    ]}
    animate
    nodeEnter={d => ({
      ...d,
      sourceStartAngle: d.sourceEndAngle,
      targetStartAngle: d.targetEndAngle,
    })}
  >{nodes => nodes.map((node, i) => (
    <Ribbon
      {...node}
      fill="black"
      stroke="black"
      fillOpacity={0.9}
      radius={height * 0.4}
      transform={{ translate: [200, 200] }}
    />
  ))}</Chord>
</Svg>

Props

Cluster

Renders a D3 Cluster layout.

import { Cluster } from '@potion/layout';

Usage

<Svg width={400} height={400}>
  <Group transform={{ translate: [40, 80] }}>
    <Cluster
      data={{
        children: [
          {
            value: 10,
            key: '1',
            children: [
              { value: 1, key: '1a1' },
              { value: 2, key: '1a2' },
              {
                value: 3,
                key: '1a3',
                children: [
                  { value: 0.1, key: '1b1' },
                  { value: 0.2, key: '1b2' },
                ],
              },
            ],
          },
          {
            value: 20,
            key: '2',
            children: [
              { value: 1, key: '2a1' },
              { value: 2, key: '2a2' },
              {
                value: 3,
                key: '2a3',
                children: [
                  { value: 0.1, key: '2b1' },
                  { value: 0.2, key: '2b2' },
                ],
              },
            ],
          },
        ],
      }}
      size={[240, 320]}
      nodeEnter={d => ({ ...d, x: 200, y: 200 })}
      animate
    >{nodes => nodes.map(({ key, x, y }) => (
      <Circle
        key={key}
        cx={y}
        cy={x}
        r={10}
        fill="black"
      />
    ))}</Cluster>
  </Group>
</Svg>

Props

Collection

Generic Layout component for animating datasets.

import { Collection } from '@potion/layout';

Usage

<Svg width={400} height={400}>
  <Collection
    data={[
      { x: 10, key: '1' },
      { x: 50, key: '2' },
      { x: 100, key: '3' },
      { x: 250, key: '4' },
    ]}
  >{nodes => nodes.map(({ key, x }) => (
    <Circle key={key} r={10} cx={x} cy={200} />
  ))}</Collection>
</Svg>

Props

Grid

Renders a grid layout using the d3-v4-grid library.

import { Grid } from '@potion/layout';

Usage

<Svg width={400} height={400}>
  <Grid
    data={[
      { value: 1, key: '1' },
      { value: 2, key: '2' },
      { value: 3, key: '3' },
      { value: 4, key: '4' },
      { value: 5, key: '5' },
      { value: 6, key: '6' },
      { value: 7, key: '7' },
      { value: 8, key: '8' },
      { value: 9, key: '9' },
      { value: 10, key: '10' },
    ]}
    bands
    size={[400, 400]}
    nodeEnter={d => ({ ...d, x: 200, y: 200 })}
    animate
  >{nodes => nodes.map(({ nodeWidth, nodeHeight, x, y, key, value }) => (
    <Circle
      key={key}
      cx={x + nodeWidth / 2}
      cy={y + node200}
      r={value}
      fill="black"
    />
  ))
  }</Grid>
</Svg>

Props

Pack

Renders a D3 Pack layout.

import { Pack } from '@potion/layout';

Usage

<Svg width={400} height={400}>
  <Pack
    data={{
      children: [
        { value: 1, key: '1' },
        { value: 2, key: '2' },
        { value: 3, key: '3' },
      ],
    }}
    sum={datum => datum.value}
    size={[400, 400]}
    includeRoot={false}
    nodeEnter={d => ({ ...d, r: 0 })}
    animate
  >{nodes => nodes.map(({ x, y, r, key }) => (
    <Circle
      key={key}
      cx={x}
      cy={y}
      r={r}
      fill="black"
    />
  ))}</Pack>
</Svg>

Props

Partition

Renders a D3 Partition layout.

import { Partition } from '@potion/layout';

Usage

<Svg width={400} height={400}>
  <Partition
    data={{
      children: [
        { value: 1, key: '1' },
        { value: 2, key: '2' },
        {
          value: 0,
          key: '3',
          children: [
            { value: 1, key: 'a1' },
            { value: 2, key: 'a2' },
            {
              value: 0,
              key: 'a3',
              children: [
                { value: 1, key: 'b1' },
                { value: 2, key: 'b2' },
                {
                  value: 3,
                  key: 'b3',
                },
              ],
            },
          ],
        },
      ],
    }}
    sum={datum => datum.value}
    size={[400, 400]}
    nodeEnter={d => ({ ...d, r: 0 })}
    animate
  >{nodes => nodes.map(({ key, x0, y0, x1, y1 }) => (
    <Rect
      key={key}
      x={x0}
      y={y0}
      width={x1 - x0}
      height={y1 - y0}
      fill="black"
      stroke="white"
    />
  ))}</Partition>
</Svg>

Props

Pie

Renders a D3 Pie layout.

import { Pie } from '@potion/layout';

Usage

<Svg width={400} height={400}>
  <Pie
    data={[
      { id: 1, key: '1', value: 1 },
      { id: 2, key: '2', value: 2 },
      { id: 3, key: '3', value: 3 },
    ]}
    value={datum => datum.value}
    id={datum => datum.id}
    sort={(a, b) => a.id - b.id}
    nodeEnter={d => ({ ...d, startAngle: d.endAngle })}
    animate
  >{nodes => nodes.map(({ startAngle, endAngle, key }) => (
    <Arc
      key={key}
      innerRadius={0}
      outerRadius={100}
      startAngle={startAngle}
      endAngle={endAngle}
      fill="black"
      stroke="white"
      strokeWidth={1}
    />
  ))}</Pie>
</Svg>

Props

Stack

Renders a D3 Stack layout.

import { Stack } from '@potion/layout';

Usage

<Svg width={400} height={400}>
  <Stack
    data={[
      { a: 0.1, b: 0.1, c: 0.2, key: '1' },
      { a: 0.2, b: 0.1, c: 0.2, key: '2' },
      { a: 0.3, b: 0.1, c: 0.2, key: '3' },
    ]}
    keys={['a', 'b', 'c']}
    animate
  >{nodes => nodes.map((node, i) => (
    <Group transform={{ rotate: [180, 200, 200] }} key={node.key}>
      <Rect
        x={40}
        y={node[0][0] * 400}
        width={80}
        height={(node[0][1] - node[0][0]) * 400}
        fill="black"
        stroke="white"
      />
      <Rect
        x={160}
        y={node[1][0] * 400}
        width={80}
        height={(node[1][1] - node[1][0]) * 400}
        fill="black"
        stroke="white"
      />
      <Rect
        x={280}
        y={node[2][0] * 400}
        width={80}
        height={(node[2][1] - node[2][0]) * 400}
        fill="black"
        stroke="white"
      />
    </Group>
  ))}</Stack>
</Svg>

Props

Treemap

Renders a D3 Treemap layout.

import { Treemap } from '@potion/layout';

Usage

<Svg width={400} height={400}>
  <Treemap
    data={{
      children: [
        { value: 10, key: '1' },
        { value: 20, key: '2' },
        {
          value: 30,
          key: '3',
          children: [
            { value: 1, key: 'a1' },
            { value: 2, key: 'a2' },
            {
              value: 3,
              key: 'a3',
              children: [
                { value: 0.1, key: 'b1' },
                { value: 0.2, key: 'b2' },
                {
                  value: 0.3,
                  key: 'b3',
                },
              ],
            },
          ],
        },
      ],
    }}
    sum={datum => datum.value}
    size={[400, 400]}
    nodeEnter={d => ({ ...d, r: 0 })}
    animate
  >{nodes => nodes.map(({ key, x0, y0, x1, y1 }) => (
    <Rect
      key={key}
      x={x0}
      y={y0}
      width={x1 - x0}
      height={y1 - y0}
      fill="black"
      stroke="white"
    />
  ))}</Treemap>
</Svg>

Props