Layouts

Potion Layouts are React components that define the structure of visualizations. They transform and enrich data with added properties that are useful for layouting shapes out on the page when creating visualizations.

Use these in combination with Potion Elements and other utilities to construct custom animated visualizations from the ground up.

sets the padding between the node bands.
x
and
y
are relative to the band width/height, similar to the padding parameter of
d3.scale.ordinal().rangeBands()
. If nodeSize prop is set, padding is absolute

animate

boolean

animate children values on enter, update and exit

nodeEnter

func

(datum) => datum

accessor function for getting a datum before it enters - used for animations. TODO: document
datum
signature

nodeExit

func

(datum) => datum

accessor function for getting a datum before it exits - used for animations. TODO: document
datum
signature

Props

Name

Type

Default

Description

data (required)

array of objects

data that gets optionally animated and passed on to children. Each datum must have a unique
key
property.

children (required)

func

Function as Child that recieves one param:
nodes
. Each node is a series returned for the D3 Stack generator with additional
key
and
data
properties. The
data
property value resembles the original input datum. Must return a valid React node.

value

keys

order

offset

animate

boolean

animate children values on enter, update and exit

nodeEnter

func

(datum) => datum

accessor function for getting a datum before it enters - used for animations. TODO: document
datum
signature

nodeExit

func

(datum) => datum

accessor function for getting a datum before it exits - used for animations. TODO: document
datum
signature