Area

The Area mark is used to plot filled areas. It is often used to visualize change over time. It can either be used by itself or in a ‘stacked’ configuration.

<script>
  import { Graphic, Area, AreaLayer, XAxis, YAxis } from '@snlab/florence'
  import { scaleLinear, scaleTime } from 'd3-scale'

  const x = [new Date(2002, 0, 1), new Date(2004, 0, 1), new Date(2006, 0, 1)]
  const yFirst = [20, 40, 10]
  const ySecond = [30, 45, 30]
  const yThird = [35, 60, 55]
</script>

<Graphic 
  width={200} height={200}
  scaleX={scaleTime().domain([new Date(2001, 0, 1), new Date(2007, 0, 1)])}
  scaleY={scaleLinear().domain([0, 60])}
  padding={20}
  flipY
>

  <Area x={x} y1={[0, 0, 0]} y2={yFirst} fill={'red'} />
  <AreaLayer x1={[x, x]} y1={[yFirst, ySecond]} y2={[ySecond, yThird]} fill={['blue', 'green']} />
  
  <XAxis />
  <YAxis />

</Graphic>

Properties

Positioning

Prop	Required	Type(s)	Default	Unit(s)
x	`if (y1 !== undefined && y2 !== undefined)`	`Number[]`, `String[]`, `Date[]`, `Function`	`undefined`	Local coordinate
y	`if (x1 !== undefined && x2 !== undefined)`	`Number[]`, `String[]`, `Date[]`, `Function`	`undefined`	Local coordinate
x1	`if (y !== undefined)`	`Number[]`, `String[]`, `Date[]`, `Function`	`undefined`	Local coordinate
x2	`if (y !== undefined)`	`Number[]`, `String[]`, `Date[]`, `Function`	`undefined`	Local coordinate
y1	`if (x !== undefined)`	`Number[]`, `String[]`, `Date[]`, `Function`	`undefined`	Local coordinate
y2	`if (x !== undefined)`	`Number[]`, `String[]`, `Date[]`, `Function`	`undefined`	Local coordinate
curve	`false`	`Object`	`undefined`	A d3-shape curve

The Area is defined by the region between two bounding polylines, which are like Line marks defined with x1 y1 and x2 y2 props respectively. How an area is bounded (its ‘orientation’) is determined by which props are combined. When x is defined, y1 and y2 are required, and the Area is oriented horizontally. Likewise, When y is defined, x1 and x2 are required, and the Area will be oriented vertically. This is illustrated by the examples below:

Aesthetics

Prop	Required	Type(s)	Default	Unit(s)
stroke	`false`	`String`	`'none'`	Named, hex, rgb or hsl color
strokeWidth	`false`	`Number`	`0`	Pixel
strokeOpacity	`false`	`Number`	`undefined`	Number between 0 and 1
fill	`false`	`String`	`'#000000'`	Named, hex, rgb or hsl color
fillOpacity	`false`	`Number`	`undefined`	Number between 0 and 1
opacity	`false`	`Number`	`1`	Number between 0 and 1
lineCap	`false`	`String`	`'butt'`	`'butt'`, `'round'` or `'square'`
lineJoin	`false`	`String`	`'bevel'`	`'bevel'`, `'round'` or `'miter'`
miterLimit	`false`	`Number`	`10`	Pixel
dashArray	`false`	`String`	`undefined`	A string of numbers seperated by spaces. See here
dashOffset	`false`	`Number`	`undefined`	Pixel

These aesthetic props are similar to attributes of the SVG path element. The analogous path attributes are shown below in brackets:

fill refers to the color of the polygon (fill)
fillOpacity refers to the transparency of the polygon, 0 being fully transparent (fill-opacity)
stroke refers to the color of the polygon’s outline or ‘stroke’ (stroke)
strokeWidth refers to the width of the polygon’s outline or ‘stroke’ (stroke-width)
strokeOpacity refers to the transparency of the polygon’s outline or ‘stroke’, 0 being fully transparent (stroke-opacity)
opacity sets both the strokeOpacity and the fillOpacity (opacity)
lineCap controls the endings of strokes (in this case only relevant when dashArray is used) (stroke-linecap)
lineJoin controls the shape to be used at the corners of the stroke (stroke-linejoin)
miterLimit, if lineJoin is 'miter', sets a limit on how long the miter can be (stroke-miterlimit)
dashArray can be used to make dashed strokes (stroke-dasharray)
dashOffset shifts the pattern defined in dashArray by a number of pixels (stroke-dashoffset)

Interactions

Mouse events

Prop	Required	Type(s)	Default	Unit(s)
onClick	`false`	`Function`	`undefined`	-
onMousedown	`false`	`Function`	`undefined`	-
onMouseup	`false`	`Function`	`undefined`	-
onMouseover	`false`	`Function`	`undefined`	-
onMouseout	`false`	`Function`	`undefined`	-
onMousedrag	`false`	`Function`	`undefined`	-

Touch events

Prop	Required	Type(s)	Default	Unit(s)
onTouchdown	`false`	`Function`	`undefined`	-
onTouchup	`false`	`Function`	`undefined`	-
onTouchover	`false`	`Function`	`undefined`	-
onTouchout	`false`	`Function`	`undefined`	-
onTouchdrag	`false`	`Function`	`undefined`	-

Select events

Prop	Required	Type(s)	Default	Unit(s)
onSelect	`false`	`Function`	`undefined`	-
onDeselect	`false`	`Function`	`undefined`	-

See the interactivity documentation for more information.

Other

Prop	Required	Type(s)	Default	Unit(s)
outputSettings	`false`	`Object`	`undefined`	-
blockReindexing	`false`	`Boolean`	`false`	-
clip	`false`	`String`, `undefined`	`undefined`	Either `'padding'`, `'outer'` or `undefined`

outputSettings: see the advanced rendering documentation for more information.
blockReindexing: see the interactivity documentation for more information.
clip: if defined, overrides the clip mode of the parent Graphic, Section or Glyph.

In addition, the AreaLayer has the following props:

Prop	Required	Type(s)	Default	Unit(s)
keys	`false`	`String[]`	`undefined`	Array of unique keys
asOnePath	`false`	`Boolean`	`false`	-

See the marks versus layers documentation for more information on how keys and asOnePath work.

Examples

The Area and AreaLayer can be seen in action in the following examples: