FuncLine

The FuncLine mark can be used to plot functions over intervals. It is the only mark that does not have a corresponding layer element.

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

<Graphic 
  width={200}
  height={200}
  scaleX={[0, 10]}
  scaleY={[0, 10]}
  padding={20}
  flipY
>

  <FuncLine func={x => Math.exp(x / 4)} stroke={'red'} />

  <XAxis />
  <YAxis />

</Graphic>

Properties

Positioning

Prop	Required	Type(s)	Default	Unit(s)
func	`true`	`Function`	`undefined`	-
x	`false`	`[number, number]`	`undefined`	Local coordinate
resolution	`false`	`number`	`3`	Pixel

To render FuncLine, a Function that maps a numeric input to a numeric output has to be passed to the func prop. By default, this function will be plotted over a domain that is inherited from the parent Graphic or Section. To provide a different custom domain, the x prop can be passed an Array containing two numbers. For example:

<script>
  import { Graphic, FuncLine, XAxis, YAxis } from '@snlab/florence'
  const pi = Math.PI
</script>

<Graphic 
  width={200}
  height={200}
  scaleX={[-2 * pi, 2 * pi]}
  scaleY={[-2, 2]}
  padding={20}
>

  <FuncLine func={Math.sin} x={[-pi, pi]} />

  <XAxis />
  <YAxis />

</Graphic>

The resolution prop controls the resolution of the interpolated line. Lower means more smooth lines, but slower performance.

The FuncLine only works if its parent Graphic or Section’s scales have quantitative domains.

Aesthetics

Prop	Required	Type(s)	Default	Unit(s)
stroke	`false`	`string`	`'#000000'`	Named, hex, rgb or hsl color
strokeWidth	`false`	`number`	`3`	Pixel
opacity	`false`	`number`	`1`	Number between 0 and 1
lineCap	`false`	`‘butt’	‘round’	‘square’`
lineJoin	`false`	`‘bevel’	‘round’	‘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 line element. The analogous line attributes are shown below in brackets:

stroke refers to the color of the line
strokeWidth refers to the width of the line
strokeOpacity refers to the transparency of the line, 0 being fully transparent
lineCap controls the endings of the line (stroke-linecap)
lineJoin controls the shape to be used at the corners of the line (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 lines (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`	`OutputSettings`	`undefined`	-
clip	`false`	`‘padding’	‘outer’	undefined`

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

Examples

The FuncLine is not featured in any examples yet!