Rectangle

The Rectangle mark is used to plot rectangular elements. Use cases include bar charts and heatmaps.

<script>
  import { Graphic, Rectangle, RectangleLayer, XAxis, YAxis, x2, x2s } from '@snlab/florence'
  import { scaleLinear, scaleBand } from 'd3-scale'

  const x = [2002, 2004, 2006]
  const y = [20, 40, 10]

  const scaleX = scaleBand().domain(x).padding(0.5)
  const scaleY = scaleLinear().domain([0, Math.max(...y)])
</script>

<Graphic width={200} height={200} {scaleX} {scaleY} flipY padding={20}>

  <Rectangle 
    x1={2002}
    x2={x2(2006)}
    y1={0}
    y2={20}
    opacity={0.3}
  />

  <RectangleLayer
    x1={x}
    x2={x2s(x)}
    y1={Array(x.length).fill(0)}
    y2={y}
  />
  
  <XAxis />
  <YAxis />
  
</Graphic>

Properties

Positioning

Prop	Required	Type(s)	Default	Unit(s)
x1	`false`	`Number`, `String`, `Date`, `Function`	`undefined`	Local coordinate
x2	`false`	`Number`, `String`, `Date`, `Function`	`undefined`	Local coordinate
y1	`false`	`Number`, `String`, `Date`, `Function`	`undefined`	Local coordinate
y2	`false`	`Number`, `String`, `Date`, `Function`	`undefined`	Local coordinate

The Rectangle mark draws a rectangle with four corners defined by the x1, x2, y1 and y2 props. As such, the positioning of the Rectangle is identical to the Section. In many cases (i.e. bar charts), this involves using the d3 band scale as shown in the example above. florence provides two convenience methods for working with band scales: x2 for Rectangles, and x2s for RectangleLayers. These will automatically add the correct bandwidth.

Like the Section, If any of the positioning props are omitted, the Rectangle will inherit the extents of its parent Graphic or Section:

<script>
  import { Graphic, Rectangle, XAxis, YAxis } from '@snlab/florence'
</script>

<Graphic width={200} height={200} scaleX={[0, 10]} scaleY={[0, 10]} padding={20}>
  
  <Rectangle fill={'blue'} />
  <Rectangle x1={4} x2={6} fill={'red'} />
  <Rectangle y1={4} y2={6} fill={'green'} />

  <XAxis />
  <YAxis />

</Graphic>

When using the RectangleLayer, all positioning props will be supplied as Arrays of Numbers, Strings and Dates, or Functions that return Arrays of scaled coordinates- see the marks versus layers documentation.

Aesthetics

Prop	Required	Types	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 to 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 rect element. The analogous rect attributes are shown below in brackets:

fill refers to the color of the rectangle (fill)
fillOpacity refers to the transparency of the rectangle, 0 being fully transparent (fill-opacity)
stroke refers to the color of the rectangle’s outline (stroke)
strokeWidth refers to the width of the rectangle’s outline (stroke-width)
strokeOpacity refers to the transparency of the rectangle’s outline, 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 RectangleLayer 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 Rectangle and RectangleLayer can be seen in action in the following examples: