Point

The Point mark is used to plot simple points. It is a special case of the more general Symbol mark that is made available on its own for convenience. Its most common applications are scatterplots and visualizations of point coordinates on a map, but as the examples illustrate all kinds of graphics can be made with the humble Point.

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

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

  <Point x={2.5} y={2.5} fill={'red'} />
  <PointLayer x={[5, 7.5]} y={[5, 7.5]} fill={['blue', 'green']} />

  <XAxis />
  <YAxis />

</Graphic>

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 Point, 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 PointLayer, 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	Type(s)	Default	Unit(s)
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'`
dashArray	`false`	`String`	`undefined`	A string of numbers seperated by spaces. See here
dashOffset	`false`	`Number`	`undefined`	Pixel

These aesthetic props are similar to attributes of the SVG circle element. The analogous circle attributes are shown below in brackets:

radius, unsurprisingly, refers to the radius of the point (r)
fill refers to the color of the point (fill)
fillOpacity refers to the transparency of the point, 0 being fully transparent (fill-opacity)
stroke refers to the color of the point’s outline or ‘stroke’ (stroke)
strokeWidth refers to the width of the point’s outline or ‘stroke’ (stroke-width)
strokeOpacity refers to the transparency of the point’s outline or ‘stroke’, 0 being fully transparent (stroke-opacity)
opacity sets both the strokeOpacity and the fillOpacity (opacity)
lineCap controls the endings of strokes (in this case only relevant when dashArray is used) (stroke-linecap)
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 PointLayer 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 Point and PointLayer can be seen in action in the following examples: