Symbol

The Symbol_ mark, like the Point, is used for plotting point data. Unlike the Point mark, however, it supports a variety of different shapes or symbols. The most common use for the Symbol_ mark is a scatterplot where a categorical variable is mapped to various shapes. It can also be used to indicate locations on a map.

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

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

  <Symbol_ x={2.5} y={2.5} shape={'star5'} />
  <SymbolLayer x={[5, 7.5]} y={[5, 7.5]} shape={['triangle-up', 'diamond']} />
  
  <XAxis />
  <YAxis />

</Graphic>
012345678910 012345678910

Note that the symbol mark is imported/used as Symbol_ to prevent conflicts with the native JavaScript Symbol.

Properties

Positioning

Prop Required Type(s) Default Unit(s)(s)
x if (geometry === undefined) Number, String, Date, Function undefined Local coordinate
y if (geometry === undefined) Number, String, Date, Function undefined Local coordinate
geometry if (x === undefined && y === undefined) GeoJSON Point feature undefined Local coordinate

To render a Symbol_, you will need to provide either the x and y props, or the geometry prop. The two uses are mutually exclusive. The x and y coordinates, or the coordinates in the GeoJSON feature passed to geometry, refer to the center of the point.

x and y can be of type Number, String and Date, depending on the scales used in the parent Section. geometry accepts GeoJSON Point features only. Coordinates inside the GeoJSON geometry will similarly be treated as unscaled. For all positioning props, a function can be supplied that bypasses the scaling step- see the local coordinates documentation. When using the SymbolLayer, 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)
shape false String 'circle' See explanation
radius false Number 3 Pixel
fill false String '#000000' Named, hex, rgb or hsl color
fillOpacity false Number undefined Number between 0 and 1
stroke false String 'none' Named, hex, rgb or hsl color
strokeWidth false Number 0 Pixel
strokeOpacity 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
  • shape sets the shape of the Symbol_ mark. The value defaults to 'circle'. Some other pre-defined shapes include square, cross, diamond, triangle-up, triangle-down, triangle-left, triangle-right and star. For a full list of options, refer to the list of geometries. In addition, it is possible to provide a custom shape, specified as a GeoJSON Polygon feature, with a bounding box of [-1, 1] both horizontally and vertically. For example:
<script>
  import { Graphic, Symbol_, XAxis, YAxis } from '@snlab/florence'

  const septagon = {
    type: 'Polygon',
    coordinates: [[
      [-1, 0.29], [-0.8, -0.6], [0, -1], [0.8, -0.6], [1, 0.29],
      [0.45, 1], [-0.45, 1], [-1, 0.29], [-1, 0.29]
    ]],
  }
</script>

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

  <Symbol_ x={5} y={5} shape={septagon} radius={25} />
  
  <XAxis />
  <YAxis />

</Graphic>
012345678910 012345678910
  • radius defaults to 3 pixels, equivalent to half of the width and height of the symbol in pixels.
  • fill refers to the color of the symbol
  • fillOpacity refers to the transparency of the symbol, 0 being fully transparent
  • stroke refers to the color of the symbol’s outline
  • strokeWidth refers to the width of the symbol’s outline
  • strokeOpacity refers to the transparency of the symbol’s outline, 0 being fully transparent
  • opacity sets both the strokeOpacity and the fillOpacity
  • 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 SymbolLayer 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 Symbol_ and SymbolLayer can be seen in action in the following examples: