@potion/element

Shapes/Elements

Number Picture provides several shape primitives for constructing visualizations. They all render SVG by default but this can be overridden using component injection. The prop names are designed to be as similar to the API of native SVG and D3 generators.

Arc

Renders an arc shape using the D3 Arc generator.

import { Arc } from '@potion/element';

Usage

<Arc
  innerRadius={150}
  outerRadius={200}
  startAngle={0}
  endAngle={Math.PI * 3 / 2}
  fill='black'
/>

Props

Name	Type	Default	Description
innerRadius	number		inner radius of arc
outerRadius	number		outer radius of arc
startAngle	number		start angle of arc in radians
endAngle	number		end angle of arc in radians
component	element/string	path	component type that gets rendered

Area

Renders an area shape using the D3 Area generator.

import { Area } from '@potion/element';

Usage

<Area
  x={d => d.x}
  y1={d => d.y1}
  y0={80}
  points={[
    { x: 10, y1: 20 },
    { x: 30, y1: 40 },
    { x: 40, y1: 30 },
    { x: 50, y1: 70 },
    { x: 70, y1: 40 },
    { x: 90, y1: 50 },
  ]}
  fill='black'
/>```

```javascript
// TODO: document

AreaRadial

Renders a radial area shape using the D3 Radial Area generator.

import { RadialArea } from '@potion/element';

// TODO: document

Circle

Renders a circle.

import { Circle } from '@potion/element';

Usage

<Circle cx={100} cy={100} r={30} fill='black' />

Props

Name	Type	Default	Description
cx	number		x position of circle center
cy	number		y position of circle center
r	number		circle radius
component	element/string	'circle'	component type that gets rendered

Group

Renders a symbol shape using the D3 Symbol generator.

import { Group } from '@potion/element';

Usage

<Group transform={{ translate: [100, 50], rotate: [45] }}>
  <Rect width={50} height={10} />
</Group>

Props

Name	Type	Default	Description
component	element/string	'g'	component type that gets rendered

Line

Renders a line.

import { Line } from '@potion/element';

Usage

<Line x1={50} y1={50} x2={150} y2={150} stroke='black' strokeWidth={2} />

Props

Name	Type	Default	Description
x1	number		starting x coordinate of line
y1	number		starting y coordinate of line
x2	number		ending x coordinate of line
y2	number		ending y coordinate of line
component	element/string	'line'	component type that gets rendered

LineRadial

Renders a radial line using the D3 radial line generator.

import { LineRadial } from '@potion/element';

Usage

<LineRadial
  radius={50}
  angle={({ angle }) => angle}
  fill="none"
  stroke='black'
  points={[
    { angle: 0 },
    { angle: Math.PI * 0.25 },
    { angle: Math.PI * 0.5 },
    { angle: Math.PI * 0.75 },
    { angle: Math.PI },
    { angle: Math.PI * 1.25 },
    { angle: Math.PI * 1.5 },
    { angle: Math.PI * 1.75 },
    { angle: Math.PI * 2 },
  ]}
  strokeWidth={4}
/>

Props

Name	Type	Default	Description
points	array		array of points
angle	number/func	(point) => point[0]	either a number setting the angle for each point or an accessor function to get the angle from each point
radius	number/func	(point) => point[1]	either a number setting the radius for each point or an accessor function to get the radius from each point
component	element/string	'path'	component type that gets rendered

Rect

Renders a rectangle.

import { Rect } from '@potion/element';

Usage

<Rect x={100} y={100} width={200} height={300} fill='black' />

Props

Name	Type	Default	Description
x	number		x position of rectangle
cy	number		y position of rectangle
width	number		rectangle width
height	number		rectangle height
component	element/string	'rect'	component type that gets rendered

Ribbon

Renders a ribbon using the D3 Ribbon generator.

import { Ribbon } from '@potion/element';

Usage

<Ribbon
  source={{
    startAngle: 0.7524114,
    endAngle: 1.1212972,
    radius: 200,
  }}
  target={{
    startAngle: 1.8617078,
    endAngle: 1.9842927,
    radius: 200,
  }}
  fill="black"
/>

Props

Name	Type	Default	Description
source			TODO
target			TODO
radius			TODO
startAngle			TODO
endAngle			TODO
component	element/string	'path'	component type that gets rendered

Svg

Renders an Svg element.

import { Svg } from '@potion/element';

Usage

<Svg width={400} height={400}>
  <circle r='100' cx='200' cy='200' />
</Svg>

Props

Name	Type	Default	Description
component	element/string	'svg'	component type that gets rendered

SymbolShape

Renders a symbol shape using the D3 symbol generator.

import { SymbolShape } from '@potion/element';

Usage

<SymbolShape size={500} type='symbolCross' fill='black' />

Props

Name	Type	Default	Description
size	number		area of SymbolShape shape
type	string		name of D3 SymbolShape generator function. Possible values: symbolShapeCircle, symbolShapeCross, symbolShapeDiamond, symbolShapeSquare, symbolShapeStar, symbolShapeTriangle, symbolShapeWye
component	element/string	'path'	component type that gets rendered

Text

Renders text.

import { Text } from '@potion/element';

Usage

<Text dx={100} stroke='black'>Lorem ipsum</Text>

Props

Name	Type	Default	Description
component	element/string	'text'	component type that gets rendered