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>

Vue

component.vue

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

const props = defineProps<{ data: DataRecord[] }>()
const x = (d: DataRecord) =>  d.x
const y = (d: DataRecord) =>  d.y
</script>

<template>
  <VisXYContainer :data="data">
    <VisScatter :x="x" :y="y" />
  </VisXYContainer>
</template>

Solid

component.tsx

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

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>
  )
}

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 Appearance

Custom 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"/>

Vue

<VisScatter :x="x" :y="y" shape="wye" />

Solid

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

TypeScript

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

Loading...

Custom 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"/>

Vue

<VisScatter :x="x" :y="y" color="#DA348F" />

Solid

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

TypeScript

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

Loading...

Stroke Color

You can also set a stroke color for your points by providing a strokeColor hex value or a strokeColor accessor function.

React

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

Angular

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

Svelte

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

Vue

<VisScatter :x="x" :y="y" color="none" strokeColor="#DA348F" />

Solid

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

TypeScript

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

Loading...

Stroke Width

If you want to change the stroke width, you can use the strokeWidth property, which accepts a constant value or an accessor function.

React

<VisScatter
  x={x} 
  y={y} 
  color="none" 
  strokeColor="#DA348F" 
  strokeWidth={5}
/>

Angular

<vis-scatter
  [x]="x" 
  [y]="y" 
  color="none" 
  strokeColor="#DA348F" 
  [strokeWidth]="5"
></vis-scatter>

Svelte

<VisScatter
  {x} 
  {y} 
  color="none" 
  strokeColor="#DA348F" 
  strokeWidth={5}
/>

Vue

<VisScatter
  :x="x" 
  :y="y" 
  color="none" 
  strokeColor="#DA348F" 
  :strokeWidth="5"
 />

Solid

<VisScatter
  x={x} 
  y={y} 
  color="none" 
  strokeColor="#DA348F" 
  strokeWidth={5}
/>

TypeScript

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

Loading...

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}/>

Vue

<VisScatter :x="x" :y="y" :size="50" />

Solid

<VisScatter x={x} y={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]}/>

Vue

<VisScatter :x="x" :y="y" :size="size" :sizeRange="[10,50]" />

Solid

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

TypeScript

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

Loading...

Point Labels

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}/>

Vue

<VisScatter :x="x" :y="y" :size="20" :label="label" />

Solid

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

TypeScript

const scatter = new Scatter<DataRecord>({ x, y, size: 20, 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="red"/>

Angular

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

Svelte

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

Vue

<VisScatter :x="x" :y="y" :size="20" :label="label" labelColor="red" />

Solid

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

TypeScript

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

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}/>

Vue

<VisScatter labelPosition="bottom" :x="x" :y="y" />

Solid

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

TypeScript

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

Loading...

Label Text Brightness Ratio

By default, labels with Position.Center will be assigned a 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} 
  labelPosition="center"
/>

Angular

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

Svelte

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

Vue

<VisScatter
  :labelTextBrightnessRatio="0.65" 
  :x="x" 
  :y="y" 
  :size="20" 
  :color="color" 
  :label="label" 
  labelPosition="center"
 />

Solid

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

TypeScript

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

Loading...

Overlapping Labels

When there're overlapping labels, Scatter will hide some of them to avoid cluttering. You can see hidden labels by hobvering over the points. If you want to disable hiding overlapping labels, you can set the labelHideOverlapping property to false.

labelHideOverlapping:

React

<VisScatter
  labelHideOverlapping={true} 
  x={x} 
  y={y} 
  size={10} 
  color={color} 
  label={label}
/>

Angular

<vis-scatter
  [labelHideOverlapping]="true" 
  [x]="x" 
  [y]="y" 
  [size]="10" 
  [color]="color" 
  [label]="label"
></vis-scatter>

Svelte

<VisScatter
  labelHideOverlapping={true} 
  {x} 
  {y} 
  size={10} 
  {color} 
  {label}
/>

Vue

<VisScatter
  :labelHideOverlapping="true" 
  :x="x" 
  :y="y" 
  :size="10" 
  :color="color" 
  :label="label"
 />

Solid

<VisScatter
  labelHideOverlapping={true} 
  x={x} 
  y={y} 
  size={10} 
  color={color} 
  label={label}
/>

TypeScript

const scatter = new Scatter<DataRecord>({
  labelHideOverlapping: true, 
  x, 
  y, 
  size: 10, 
  color, 
  label
})

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="crosshair"/>

Angular

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

Svelte

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

Vue

<VisScatter :x="x" :y="y" cursor="crosshair" />

Solid

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

TypeScript

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

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}/>

Vue

<VisScatter :x="x" :y="y" :events="events" />

Solid

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

TypeScript

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

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...

Details

Supported CSS variables and their default values

--vis-scatter-cursor: default;
--vis-scatter-fill-color: var(--vis-color-main);
--vis-scatter-stroke-color: 'none';
--vis-scatter-stroke-width: 1px;
--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