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.

  import { Graphic } from '@snlab/florence'

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


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



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'}>


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.


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.


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!


  • selectRectangle
  • updateSelectRectangle
  • resetSelectRectangle
  • startSelectPolygon
  • addPointToSelectPolygon
  • moveSelectPolygon
  • resetSelectPolygon

Graphic methods can be used as follows:

  let graphic

<Graphic width={500} height={500} bind:this={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.