Graphic

Every florence visualization starts with the Graphic component. Think of it as a supercharged svg root element.

The Graphic component, and all other florence components are Svelte components and we make extensive use of Svelte’s template syntax to write our visualizations. If you are new to Svelte, check out the accessible and fun tutorial over on the main Svelte website.

<script>
  import { Graphic } from '@snlab/florence'
</script>

<Graphic width={200} height={200} backgroundColor={'blue'}>

</Graphic>

Other florence components cannot be used outside of a Graphic component, and Graphic components cannot be nested.

Properties

Positioning

Prop	Required	Type(s)	Default	Unit(s)
width	`false`	`Number`, `String`	`500`	Pixel, CSS width value
height	`false`	`Number`, `String`	`500`	Pixel, CSS height value

The width and height props can be used like the width and height CSS properties:

<Graphic width={'100%'} height={'auto'}>

Aesthetics

Prop	Required	Type(s)	Default	Units
backgroundColor	`false`	`String`	`undefined`	Named, hex, rgb or hsl color

Local coordinate system

Prop	Required	Type(s)	Default	Unit(s)
scaleX	`false`	`Function`	`undefined`	d3 scale
scaleY	`false`	`Function`	`undefined`	d3 scale
transformation	`false`	`String`	`'identity'`	Should be either `'identity'` or `'polar'`
flipX	`false`	`Boolean`	`false`	-
flipY	`false`	`Boolean`	`false`	-
padding	`false`	`Number`, `Object`	`undefined`	Pixel
zoomIdentity	`false`	`Object`	`undefined`	-

For more how to use these props, see the local coordinates documentation.

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)
blockReindexing	`false`	`Boolean`	`false`	-
clip	`false`	`String`	`'padding'`	Either `'padding' or 'outer'`
renderer	`false`	`String`	`'svg'`	Either `'svg'` or `'canvas'`

The purpose of blockReindexing is explained in the interactivity documentation. clip controls how the marks, layers and other visual elements inside of this Graphic should be clipped off. To clip off everything within the padding, 'padding' should be used. To only clip off everything outside of the Graphic’s outer border, 'outer' should be used. renderer determines whether florence will render to SVG or Canvas.

The renderer should not be changed in runtime!

Methods

selectRectangle
updateSelectRectangle
resetSelectRectangle
startSelectPolygon
addPointToSelectPolygon
moveSelectPolygon
resetSelectPolygon

Graphic methods can be used as follows:

<script>
  let graphic
  graphic.selectRectangle(...)
</script>

<Graphic width={500} height={500} bind:this={graphic}>

</Graphic>

For more information on Graphic methods and how to use them to create advanced interactions like selection or brushing, check out the interactivity documentation.