Scatter

Basic configuration

The Scatter component has been designed to work together with XYContainer. The minimal Scatter configuration looks like:

React

component.tsx

import { VisXYContainer, VisScatter } from '@unovis/react'

function Component(props) {
  const data: DataRecord[] = props.data
  const x = (d: DataRecord) => d.x
  const y = (d: DataRecord) => d.y

  return (
    <VisXYContainer data={data}>
      <VisScatter x={x} y={y}/>
    </VisXYContainer>
  )
}

Angular

component.ts

@Component({
  templateUrl: 'template.html'
})
export class Component {
  @Input data: DataRecord[];
  x = (d: DataRecord) => d.x
  y = (d: DataRecord) => d.y
}

template.html

<vis-xy-container [data]="data">
  <vis-scatter [x]="x" [y]="y"></vis-scatter>
</vis-xy-container>

Svelte

component.svelte

<script lang='ts'>
  import { VisXYContainer, VisScatter } from '@unovis/svelte'

  export let data: DataRecord[]
  const x = (d: DataRecord) => d.x
  const y = (d: DataRecord) => d.y
</script>

<VisXYContainer {data}>
  <VisScatter {x} {y}/>
</VisXYContainer>

TypeScript

component.ts

import { XYContainer, Scatter } from '@unovis/ts'
import { data, DataRecord } from './data'

const container = new XYContainer<DataRecord>(node, {
  components: [
    new Scatter<DataRecord>({
    x: (d: DataRecord) => d.x, 
    y: (d: DataRecord) => d.y
  })
  ]
}, data)

Loading...

Point Shape

You can change the point's symbol using the symbol attribute, which accepts a SymbolType or a corresponding string ('circle', 'cross', 'diamond', 'square', 'star', 'triangle', 'wye' ) or a function (executed per data point) that returns either of them.

React

<VisScatter x={x} y={y} shape="wye"/>

Angular

<vis-scatter [x]="x" [y]="y" shape="wye"></vis-scatter>

Svelte

<VisScatter {x} {y} shape="wye"/>

TypeScript

const scatter = new Scatter<DataRecord>({ x, y, shape: "wye" })

Loading...

Point Color

You can provide Scatter with a single color hex value or a color accessor function.

React

<VisScatter x={x} y={y} color="#DA348F"/>

Angular

<vis-scatter [x]="x" [y]="y" color="#DA348F"></vis-scatter>

Svelte

<VisScatter {x} {y} color="#DA348F"/>

TypeScript

const scatter = new Scatter<DataRecord>({ x, y, color: "#DA348F" })

Loading...

Point Size and Size Range

You can use the size property to set the point size (i.e. point diameter if shape is set to SymbolType.Circle) in pixels by providing a constant value or an accessor function, e.g.: d => d.size.

React

<VisScatter x={x} y={y} size={50}/>

Angular

<vis-scatter [x]="x" [y]="y" [size]="50"></vis-scatter>

Svelte

<VisScatter {x} {y} size={50}/>

TypeScript

const scatter = new Scatter<DataRecord>({ x, y, size: 50 })

Loading...

Scatter's sizeRange attribute represents a range of numbers for a point's size. When sizeRange is set, the size property will be treated as relative and all the points will be rescaled according to the provided range.

In tha case if you provide a constant value to size, every resulting size value will be the median of sizeRange. Fox example, if sizeRange is set to [10,50], that will make the default size equal to 30px (or (min + max)/2).

React

<VisScatter x={x} y={y} size={size} sizeRange={[10,50]}/>

Angular

<vis-scatter
  [x]="x" 
  [y]="y" 
  [size]="size" 
  [sizeRange]="[10,50]"
></vis-scatter>

Svelte

<VisScatter {x} {y} {size} sizeRange={[10,50]}/>

TypeScript

const scatter = new Scatter<DataRecord>({ x, y, size, sizeRange: [10,50] })

Loading...

Point Label

You can also place labels on Scatter's points by passing a string accessor function to the label property.

React

<VisScatter x={x} y={y} size={20} label={label}/>

Angular

<vis-scatter [x]="x" [y]="y" [size]="20" [label]="label"></vis-scatter>

Svelte

<VisScatter {x} {y} size={20} {label}/>

TypeScript

const scatter = new Scatter<DataRecord>({ x, y, size: 20, label })

Loading...

Label Text Brightness Ratio

By default, the Scatter component will assign label color based on the point's shade with the labelTextBrightnessRatio property. It accepts any value between 0 and 1 (inclusive).

The default setting 0.65 creates darker text on light backgrounds and light text on dark backgrounds. See how the contrast differs in the following examples, when we assign more extreme values to the labelTextBrightnessRatio property:

labelTextBrightnessRatio:

React

<VisScatter
  labelTextBrightnessRatio={0.65} 
  x={x} 
  y={y} 
  size={20} 
  color={color} 
  label={label}
/>

Angular

<vis-scatter
  [labelTextBrightnessRatio]="0.65" 
  [x]="x" 
  [y]="y" 
  [size]="20" 
  [color]="color" 
  [label]="label"
></vis-scatter>

Svelte

<VisScatter
  labelTextBrightnessRatio={0.65} 
  {x} 
  {y} 
  size={20} 
  {color} 
  {label}
/>

TypeScript

const scatter = new Scatter<DataRecord>({
  labelTextBrightnessRatio: 0.65, 
  x, 
  y, 
  size: 20, 
  color, 
  label
})

Loading...

Label Color

You can also configure a custom color for your labels by providing the labelColor attribute with a color accessor method or string. Note that setting this property overrides labelTextBrightnessRatio.

React

<VisScatter x={x} y={y} size={20} label={label} labelColor="yellow"/>

Angular

<vis-scatter
  [x]="x" 
  [y]="y" 
  [size]="20" 
  [label]="label" 
  labelColor="yellow"
></vis-scatter>

Svelte

<VisScatter {x} {y} size={20} {label} labelColor="yellow"/>

TypeScript

const scatter = new Scatter<DataRecord>({
  x, 
  y, 
  size: 20, 
  label, 
  labelColor: "yellow"
})

Loading...

Label Position

You can change a point's label position with the labelPosition property, which accepts a Position or Position accessor function. Supported values are Position.Center, Position.Bottom (default), Position.Left, Position.Right and Position.Top

labelPosition: bottomcenterleftrighttop

React

<VisScatter labelPosition="bottom" x={x} y={y}/>

Angular

<vis-scatter labelPosition="bottom" [x]="x" [y]="y"></vis-scatter>

Svelte

<VisScatter labelPosition="bottom" {x} {y}/>

TypeScript

const scatter = new Scatter<DataRecord>({ labelPosition: "bottom", x, y })

Loading...

Custom Cursor

Scatter also allows to set a custom cursor when hovering over a point by providing a cursor accessor function.

React

<VisScatter x={x} y={y} cursor={cursor}/>

Angular

<vis-scatter [x]="x" [y]="y" [cursor]="cursor"></vis-scatter>

Svelte

<VisScatter {x} {y} {cursor}/>

TypeScript

const scatter = new Scatter<DataRecord>({ x, y, cursor })

Loading...

Events

import { Scatter } from '@unovis/ts`
...
events = {
    [Scatter.selectors.point]: {
        click: (d: DataRecord) => {},
        ...
    },
}

React

<VisScatter x={x} y={y} events={events}/>

Angular

<vis-scatter [x]="x" [y]="y" [events]="events"></vis-scatter>

Svelte

<VisScatter {x} {y} {events}/>

TypeScript

const scatter = new Scatter<DataRecord>({ x, y, events })

Additional Styling: CSS Variables

The Scatter component supports additional styling via CSS variables that you can define for your visualization container. For example:

styles.css

.custom-vis {
  --vis-scatter-fill-opacity: 0.5;
  --vis-scatter-stroke-width: 1;
  --vis-scatter-hover-stroke-width: 2;
  --vis-scatter-point-label-text-color-dark: darkblue;
}

Loading...

Supported CSS variables and their default values

--vis-scatter-cursor: default;
--vis-scatter-fill-color: var(--vis-color-main);
--vis-scatter-stroke-color: var(--vis-color-main);
--vis-scatter-stroke-width: 0px;
--vis-scatter-fill-opacity: 1;
--vis-scatter-stroke-opacity: 1;
--vis-scatter-hover-stroke-width: 2px;
 
--vis-scatter-point-label-text-color-dark: #5b5f6d;
--vis-scatter-point-label-text-color-light: #fff;
--vis-scatter-point-label-text-font-weight: 500;
--vis-scatter-point-label-text-font-size: 12px;
--vis-scatter-point-label-text-font-family

Component Props

Name	Type	Description
* required property