The Glyph component is very similar to a Section. The main difference between two is how they are positioned: where Sections use the x1, x2, y1 and y2 props, Glyphs use x, y, width and height.

  import { Graphic, Glyph, polar, RectangleLayer } from '@snlab/florence'

  const glyphs = Array(50).fill(0).map(() => ({
    x: Math.random(),
    y: Math.random(),
    radius: Math.random() * 20

<Graphic width={200} height={200} backgroundColor={'#f3f3f3'}>
  {#each glyphs as {x, y, radius}}
      {x} {y} width={radius} height={radius}
        x1={[0, 0.3, 0.7, 0.85]}
        x2={[0.3, 0.7, 0.85, 1]}
        fill={['#c84669', '#388077', '#92d82b', '#20609b']}

Unlike Sections, Glyphs can be placed inside polar coordinate systems!



Prop Required Types Default Unit(s)
x true Number, String, Date, Function undefined Local coordinate
y true Number, String, Date, Function undefined Local coordinate
width true Number undefined Pixel
height true Number undefined Pixel

x and y control the center of the Glyph, while width and height control the dimensions of the Glyph in pixels.


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
coordinates false CoordinateTransformation cartesian() -
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)
clip false String 'padding' Either 'padding' or 'outer'

clip controls how the marks, layers and other visual elements inside of this Glyph should be clipped off. To clip off everything within the padding, 'padding' should be used. To only clip off everything outside of the Glyph’s outer border (determined by the positioning props), 'outer' should be used.


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

Glyph methods can be used as follows:

  let glyph

<Glyph bind:this={glyph}>


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