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>
2001200220032004200520062007 051015202530354045505560

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:

x y x y

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: