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>
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 Array
s of Number
s, String
s and Date
s, or Function
s that return Array
s 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 theSymbol_
mark. The value defaults to'circle'
. Some other pre-defined shapes includesquare
,cross
,diamond
,triangle-up
,triangle-down
,triangle-left
,triangle-right
andstar
. 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>
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 symbolfillOpacity
refers to the transparency of the symbol,0
being fully transparentstroke
refers to the color of the symbol’s outlinestrokeWidth
refers to the width of the symbol’s outlinestrokeOpacity
refers to the transparency of the symbol’s outline,0
being fully transparentopacity
sets both thestrokeOpacity
and thefillOpacity
lineCap
controls the endings of strokes (in this case only relevant whendashArray
is used) (stroke-linecap
)lineJoin
controls the shape to be used at the corners of the stroke (stroke-linejoin
)miterLimit
, iflineJoin
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 indashArray
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 parentGraphic
,Section
orGlyph
.
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: