Unovis

https://unovis.dev/docs
Admin
Unovis is a modular data visualization framework for creating charts, maps, and network graphs that...
Tokens:219,586
Snippets:1,880
Trust Score:7.7
Update:2 months ago
Show doc for...
Tokens:
Raw
### Install Unovis with Solid

Source: https://unovis.dev/docs/intro

Install the core Unovis library along with the Solid-specific package using npm.

```bash
npm install -P @unovis/ts @unovis/solid  

```

--------------------------------

### Install Unovis Core

Source: https://unovis.dev/docs/intro

Install only the core Unovis library for use without a specific UI framework.

```bash
npm install -P @unovis/ts  

```

--------------------------------

### Vue Basic Configuration

Source: https://unovis.dev/docs/containers/Single_Container

Provides an example of integrating VisSingleContainer with VisTooltip and VisDonut in a Vue.js application. Ensure @unovis/vue and @unovis/ts are installed.

```vue
<script setup lang="ts">  
import { VisSingleContainer, VisTooltip, VisDonut } from '@unovis/vue'  
import { Donut } from '@unovis/ts'  
  
const props = defineProps<{ data: number[] }>()  
const triggers = { [Donut.selectors.segment]: d => d.data }  
const value = (d: number) =>  d  
</script>  
  
<template>  
  <VisSingleContainer :data="data">  
    <VisTooltip :triggers="triggers" />  
    <VisDonut :value="value" />  
  </VisSingleContainer>  
</template>  
```

--------------------------------

### Example Panel Configuration Array

Source: https://unovis.dev/docs/networks-and-flows/Graph

An example of how to define an array of panels, including node references, label, color, padding, and icon configurations.

```javascript
const panels = [{
  nodes: [...],
  label: 'Group 1',
  color: '#E3116C',
  padding: 1,
  dashedOutline: true,
  sideIconSymbol: '⚾',
  sideIconShape: 'circle',
  sideIconShapeStroke: '#777',
  sideIconCursor: 'pointer',
  sideIconFontSize: '24pt',
  sideIconShapeSize: 58,
}]

```

--------------------------------

### Install Unovis with React

Source: https://unovis.dev/docs/intro

Install the core Unovis library along with the React-specific package using npm.

```bash
npm install -P @unovis/ts @unovis/react  

```

--------------------------------

### Basic Stacked Bar Configuration in Vue

Source: https://unovis.dev/docs/xy-charts/StackedBar

Provides a Vue.js example for setting up a Stacked Bar chart. Uses the Composition API with `<script setup>` and template syntax.

```vue
<script setup lang="ts">
import { VisXYContainer, VisStackedBar } 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">
    <VisStackedBar :x="x" :y="y" />
  </VisXYContainer>
</template>
```

--------------------------------

### Install Unovis with Vue

Source: https://unovis.dev/docs/intro

Install the core Unovis library along with the Vue-specific package using npm.

```bash
npm install -P @unovis/ts @unovis/vue  

```

--------------------------------

### Install Unovis with Angular

Source: https://unovis.dev/docs/intro

Install the core Unovis library along with the Angular-specific package using npm.

```bash
npm install -P @unovis/ts @unovis/angular  

```

--------------------------------

### Install Unovis with Svelte

Source: https://unovis.dev/docs/intro

Install the core Unovis library along with the Svelte-specific package using npm.

```bash
npm install -P @unovis/ts @unovis/svelte  

```

--------------------------------

### Color Map Configuration Example

Source: https://unovis.dev/docs/maps/LeafletFlowMap

Example of how to configure the `colorMap` prop to define styles for different data properties, enabling pie or donut chart segments.

```typescript
{
  healthy: { color: 'green' },
  warning: { color: 'orange' },
  danger: { color: 'red' }
}
```

--------------------------------

### Basic Scatter Configuration in Vue

Source: https://unovis.dev/docs/xy-charts/Scatter

Provides a basic example of integrating the Unovis Scatter component into a Vue.js application using the Composition API with `<script setup>`.

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

```

--------------------------------

### Enable Flow Animation Example

Source: https://unovis.dev/docs/maps/TopoJSONMap

Demonstrates how to configure data and enable flow animations on the TopoJSONMap component.

```jsx
const data = {
  points: [
    { id: 'NYC', latitude: 40.7128, longitude: -74.0060 },
    { id: 'LON', latitude: 51.5074, longitude: -0.1278 },
  ],
  links: [
    {
      sourceLongitude: -74.0060,
      sourceLatitude: 40.7128,
      targetLongitude: -0.1278,
      targetLatitude: 51.5074,
    }
  ]
}

<TopoJSONMap
  data={data}
  enableFlowAnimation={true}
/>
```

--------------------------------

### Graph Initialization with Panels (JavaScript)

Source: https://unovis.dev/docs/networks-and-flows/Graph

Example of creating a new `Graph` instance with parallel layout and panel configurations in plain JavaScript.

```javascript
const graph = new Graph<NodeDatum, LinkDatum>({
  layoutType: "parallel", 
  layoutNodeGroup,
  layoutParallelNodeSubGroup,
  layoutParallelNodesPerColumn: 5,
  panels
})

```

--------------------------------

### Angular Basic Configuration

Source: https://unovis.dev/docs/containers/Single_Container

Shows the basic setup for VisSingleContainer in an Angular component using its template. Ensure @unovis/ts is installed for Donut.

```ts
import { Component } from '@angular/core'
import { Donut } from '@unovis/ts'  
  
@Component({  
  templateUrl: 'template.html'  
})  
export class Component {  
  @Input data: number[];  
  triggers = { [Donut.selectors.segment]: d => d.data }  
  value = (d: number) =>  d  
}
```

```html
<vis-single-container [data]="data">  
  <vis-tooltip [triggers]="triggers"></vis-tooltip>  
  <vis-donut [value]="value"></vis-donut>  
</vis-single-container>  
```

--------------------------------

### Vue: Custom Node Sorting and Coloring

Source: https://unovis.dev/docs/networks-and-flows/Sankey

Provides an example of setting up custom node sorting and coloring for a Sankey component in Vue. Uses `<script setup>` and template syntax for configuration.

```typescript
<script setup lang="ts">
import { VisSingleContainer, VisSankey } from '@unovis/vue'

const props = defineProps<{ data: SankeyData }>()
const nodeSort = (node1: NodeDatum, node2: NodeDatum) => node1.x - node2.x
const nodeColor = (d: SankeyNode) =>  `var( -- vis - color${d.x})`
</script>

<template>
  <VisSankey :nodeColor="nodeColor" :nodeSort="nodeSort" />
</template>
```

--------------------------------

### React Basic Configuration

Source: https://unovis.dev/docs/containers/Single_Container

Demonstrates how to use VisSingleContainer with VisTooltip and VisDonut in a React application. Ensure @unovis/react and @unovis/ts are installed.

```tsx
import { VisSingleContainer, VisTooltip, VisDonut } from '@unovis/react'  
import { Donut } from '@unovis/ts'  
  
function Component(props) {  
  const data: number[] = props.data  
  const triggers = { [Donut.selectors.segment]: d => d.data }  
  const value = (d: number) =>  d  
  
  return (  
    <VisSingleContainer data={data}>  
      <VisTooltip triggers={triggers}/>  
      <VisDonut value={value}/>  
    </VisSingleContainer>  
  )  
}
```

--------------------------------

### Basic Graph Configuration in React

Source: https://unovis.dev/docs/networks-and-flows/Graph

Demonstrates the basic setup of the VisGraph component within a VisSingleContainer in a React application.

```typescript
import { VisSingleContainer, VisGraph } from '@unovis/react'

function Component(props) {
  const data: NodeData = props.data

  return (
    <VisSingleContainer data={data}>
      <VisGraph/>
    </VisSingleContainer>
  )
}

```

--------------------------------

### Instantiating LeafletMap with TopoJSON Layer

Source: https://unovis.dev/docs/maps/LeafletMap

Provides a vanilla JavaScript example of creating a `LeafletMap` instance and configuring it with a `topoJSONLayer`.

```javascript
const leafletMap = new LeafletMap<MapDataRecord>(node, { style, topoJSONLayer })
```

--------------------------------

### Basic Axis Configuration

Source: https://unovis.dev/docs/auxiliary/Axis

Minimal setup for an X-axis component across supported frameworks.

```React
<VisAxis type="x"/>
```

```Angular
<vis-axis type="x"></vis-axis>
```

```Svelte
<VisAxis type="x"/>
```

```Vue
<VisAxis type="x" />
```

```Solid
<VisAxis type="x"/>
```

```TypeScript
const axis = new Axis<DataRecord>({ type: "x" })
```

--------------------------------

### Configure Node Fill, Stroke, and Stroke Width in Vue

Source: https://unovis.dev/docs/networks-and-flows/Graph

Utilize Vue's script setup and template syntax to bind node styling properties. This example shows how to apply dynamic styles in a Vue.js application.

```typescript
<script setup lang="ts">
import { VisSingleContainer, VisGraph } from '@unovis/vue'

const props = defineProps<{ data: NodeData }>()
const nodeFill = (n: NodeDatum, i: number) =>  getColorByIndex(i)
const nodeStroke = (n: NodeDatum, i: number) =>  getColorByIndex(i  +  1)
const nodeStrokeWidth = (d: NodeDatum, i: number) =>  1  +  i  *  3
</script>

<template>
  <VisGraph
    :nodeFill="nodeFill"
    :nodeStroke="nodeStroke"
    :nodeStrokeWidth="nodeStrokeWidth"
   />
</template>

```

--------------------------------

### Event Handling Configuration Example

Source: https://unovis.dev/docs/maps/LeafletFlowMap

Example of configuring event listeners for map elements using the `events` prop. This allows custom callbacks for various user interactions.

```typescript
{
  [selectorString]: {
    [eventType]: callbackFunction
  }
}
```

--------------------------------

### Events Configuration Example

Source: https://unovis.dev/docs/auxiliary/Annotations

Configures event listeners for specific selectors within the visualization. This example shows how to attach a click event to an area.

```typescript
{
 [Area.selectors.area]: {
 click: (d) => console.log("Clicked Area", d)
 }
}
```

--------------------------------

### Donut Component Usage

Source: https://unovis.dev/docs/misc/Donut

Examples of how to use the Donut component in different frameworks and with direct instantiation.

```APIDOC
## Donut Component Usage

### Framework Examples

**React**
```jsx
<VisDonut value={value} events={events}/>
```

**Angular**
```html
<vis-donut [value]="value" [events]="events"></vis-donut>
```

**Svelte**
```svelte
<VisDonut {value} {events}/>
```

**Vue**
```vue
<VisDonut :value="value" :events="events" />
```

**Solid**
```jsx
<VisDonut value={value} events={events}/>
```

### Direct Instantiation

**TypeScript**
```typescript
import { Donut } from '@unovis/ts'

const donut = new Donut<number>({ value, events })
```
```

--------------------------------

### Donut Chart Event Configuration Example

Source: https://unovis.dev/docs/misc/Donut

Example of configuring event listeners for the Donut chart, specifically for the area selector. This shows how to attach a click event handler.

```typescript
{
 [Area.selectors.area]: {
   click: (d) => console.log("Clicked Area", d)
 }
}
```

--------------------------------

### Custom Label Content Example

Source: https://unovis.dev/docs/auxiliary/XYLabels

Example of a custom label accessor function that formats the displayed text.

```javascript
// Custom label content  
label: d => `${d.label}: ${d.y}`  
```

--------------------------------

### FreeBrush Event Configuration Example

Source: https://unovis.dev/docs/auxiliary/FreeBrush

Example of configuring custom event listeners for the FreeBrush component. This allows for interactive handling of user events like clicks on specific elements.

```typescript
events: {
  [Area.selectors.area]: {
    click: (d) => console.log("Clicked Area", d)
  }
}
```

--------------------------------

### Example colorMap Configuration

Source: https://unovis.dev/docs/maps/TopoJSONMap

Configure how data properties are mapped to pie/donut segments for multi-property visualization. Properties with falsy values are not displayed.

```typescript
{
 healthy: { color: 'green' },
 warning: { color: 'orange' },
 critical: { color: 'red' }
}
```

--------------------------------

### Axis Type Y Configuration

Source: https://unovis.dev/docs/auxiliary/Axis

Minimal setup for a Y-axis component across supported frameworks.

```React
<VisAxis type="y"/>
```

```Angular
<vis-axis type="y"></vis-axis>
```

```Svelte
<VisAxis type="y"/>
```

```Vue
<VisAxis type="y" />
```

```Solid
<VisAxis type="y"/>
```

```TypeScript
const axis = new Axis<DataRecord>({ type: "y" })
```

--------------------------------

### Leaflet Map Initialization with Color Map

Source: https://unovis.dev/docs/maps/LeafletMap

Example of initializing a LeafletMap instance in JavaScript/TypeScript with configuration options including colorMap.

```javascript
const leafletMap = new LeafletMap<MapDataRecord>(node, {
  style,
  pointBottomLabel,
  pointRadius,
  clusterRingWidth: 2,
  colorMap
}, data)
```

--------------------------------

### Vanilla JS Timeline with onScroll

Source: https://unovis.dev/docs/xy-charts/Timeline

Example of configuring the onScroll callback when creating a Timeline instance in vanilla JavaScript.

```typescript
const timeline = new Timeline<TimeDataRecord>({
  lineDuration: (d: TimeDataRecord) =>  d.length,
  lineRow: (d: TimeDataRecord) =>  d.type,
  x: (d: TimeDataRecord) =>  d.timestamp,
  onScroll: (n: number) => setAxisLabel(`${n}px from the top`)
})


```

--------------------------------

### Donut Chart Initialization

Source: https://unovis.dev/docs/misc/Donut

Initialize a Donut chart instance with data and event configurations. This example demonstrates direct instantiation of the Donut class.

```typescript
const donut = new Donut<number>({ value, events }) 
```

--------------------------------

### Initialize XYLabels with Color (TypeScript)

Source: https://unovis.dev/docs/auxiliary/XYLabels

Initialize the XYLabels class with specific color and background color properties. This example uses TypeScript.

```typescript
const xYLabels = new XYLabels<DataRecord>({  
  x,   
  y,   
  label,   
  color,   
  backgroundColor: "rgba(255, 255, 255, 0.9)"  
})
```

--------------------------------

### Wrap Node Labels in Sankey (TypeScript)

Source: https://unovis.dev/docs/networks-and-flows/Sankey

Configure label wrapping in TypeScript using `labelFit: 'wrap'`, `labelMaxWidth`, and `labelForceWordBreak`. This example shows programmatic setup.

```typescript
import { SingleContainer, Sankey } from '@unovis/ts'
import { data, SankeyNode,  SankeyLink } from './data'

const container = new SingleContainer<SankeyNode, SankeyLink>(node, {
  component: new Sankey<SankeyNode, SankeyLink>({
    label: (d: SankeyNode) =>  `Long node name :  ${d.id}`,
    labelFit: "wrap",
    labelMaxWidth: 80,
    labelForceWordBreak: false
  })
}, data)
```

--------------------------------

### Basic Timeline Configuration in SolidJS

Source: https://unovis.dev/docs/xy-charts/Timeline

Illustrates the basic setup for the Timeline component in SolidJS, demonstrating how to pass data and accessor functions to the components.

```tsx
import { VisXYContainer, VisTimeline } from '@unovis/solid'

function Component(props) {
  const data: TimeDataRecord[] = () => props.data
  const lineDuration = (d: TimeDataRecord) =>  d.length
  const lineRow = (d: TimeDataRecord) =>  d.type
  const x = (d: TimeDataRecord) =>  d.timestamp
  
  return (
    <VisXYContainer data={data()}> 
      <VisTimeline 
        lineDuration={lineDuration} 
        lineRow={lineRow}
        x={x}
      />
    </VisXYContainer>
  )
}
```

--------------------------------

### React Annotations Example

Source: https://unovis.dev/docs/auxiliary/Annotations

Add annotations to an XY container in a React application. Ensure the VisXYContainer and VisArea components are correctly configured.

```tsx
<VisXYContainer yDomain={[0,15]} data={data}>
  <VisArea x={x} y={y} curveType="linear"/>
  <VisAnnotations items={items}/>
</VisXYContainer>
```

--------------------------------

### Displaying Axis within XY Container

Source: https://unovis.dev/docs/auxiliary/Axis

Examples of adding VisAxis components to an XY container across different frameworks.

```tsx
<VisXYContainer data={data}>  
  <VisAxis type="y"/>  
  <VisLine x={x} y={y}/>  
  <VisAxis type="x"/>  
</VisXYContainer>  
```

```html
<vis-xy-container [data]="data">  
  <vis-axis type="y"></vis-axis>  
  <vis-line [x]="x" [y]="y"></vis-line>  
  <vis-axis type="x"></vis-axis>  
</vis-xy-container>  
```

```svelte
<VisXYContainer {data}>  
  <VisAxis type="y"/>  
  <VisLine {x} {y}/>  
  <VisAxis type="x"/>  
</VisXYContainer>  
```

```vue
<VisXYContainer :data="data">  
  <VisAxis type="y" />  
  <VisLine :x="x" :y="y" />  
  <VisAxis type="x" />  
</VisXYContainer>  
```

```typescript
const container = new XYContainer<DataRecord>(node, {  
  yAxis: new Axis({ type: "y" }),   
  components: [new Line({ x, y })],   
  xAxis: new Axis({ type: "x" })  
}, data)  
```

--------------------------------

### Solid Basic Configuration

Source: https://unovis.dev/docs/containers/Single_Container

Shows how to use VisSingleContainer with VisTooltip and VisDonut in a SolidJS application. Requires @unovis/solid and @unovis/ts.

```tsx
import { VisSingleContainer, VisTooltip, VisDonut } from '@unovis/solid'  
import { Donut } from '@unovis/ts'  
  
function Component(props) {  
  const data: number[] = () => props.data  
  const triggers = { [Donut.selectors.segment]: d => d.data }  
  const value = (d: number) =>  d  
  
  return (  
    <VisSingleContainer data={data()}>  
      <VisTooltip triggers={triggers}/>  
      <VisDonut value={value}/>  
    </VisSingleContainer>  
  )  
}
```

--------------------------------

### Bind events to Axis component across frameworks

Source: https://unovis.dev/docs/auxiliary/Axis

Examples of passing the events object to the Axis component in various supported frameworks.

```html
<VisAxis type="x" events={events}/>  
```

```html
<vis-axis type="x" [events]="events"></vis-axis>  
```

```html
<VisAxis type="x" {events}/>  
```

```html
<VisAxis type="x" :events="events" />  
```

```html
<VisAxis type="x" events={events}/>  
```

```typescript
const axis = new Axis<DataRecord>({ type: "x", events })  
```

--------------------------------

### Basic Line Chart with Unovis Core (TypeScript)

Source: https://unovis.dev/docs/guides/js-usage

This example shows how to create a basic line chart using the core Unovis TypeScript library. It requires manual DOM element selection and component instantiation.

```typescript
import { Axis, Line, XYContainer } from '@unovis/ts'  
  
type DataRecord = { x: number; y: number }  
  
const data: DataRecord[] = [  
  { x: 0, y: 0 },  
  { x: 1, y: 2 },  
  { x: 2, y: 1 },  
]  
  
const line = new Line<DataRecord>({  
  x: d => d.x,  
  y: d => d.y,  
})  
  
const container = document.getElementById('vis-container')  
const chart = new XYContainer(container, {  
  components: [line],  
  xAxis: new Axis(),  
  yAxis: new Axis(),  
}, data)  

```

--------------------------------

### Basic Graph Configuration in Solid

Source: https://unovis.dev/docs/networks-and-flows/Graph

Shows how to configure the VisGraph component within a VisSingleContainer for a SolidJS application.

```typescript
import { VisSingleContainer, VisGraph } from '@unovis/solid'

function Component(props) {
  const data: NodeData = () => props.data

  return (
    <VisSingleContainer data={data()}>
      <VisGraph/>
    </VisSingleContainer>
  )
}

```

--------------------------------

### Hierarchical Data Structure Example

Source: https://unovis.dev/docs/networks-and-flows/ChordDiagram

Example of a data structure for hierarchical data, including nodes with group and subgroup properties.

```javascript
const data = {  
  nodes: [  
    { id: 'A1', group: 'Level 1', subgroup: 'A'},  
    { id: 'B1', group: 'Level 1', subgroup: 'B' },  
    ...  
  ],  
  links: [...]  
}  

```

--------------------------------

### Example Margin Application

Source: https://unovis.dev/docs/containers/Single_Container

Setting horizontal margins can affect the chart's overall width. This example shows a margin configuration.

```json
{ left: 100, right: 100 }
```

--------------------------------

### FreeBrush Attribute Configuration Example

Source: https://unovis.dev/docs/auxiliary/FreeBrush

Example of setting custom DOM attributes on visualization elements using the FreeBrush component. This is useful for testing and custom styling.

```typescript
attributes: {
  [Area.selectors.area]: {
    "test-value": d => d.value
  }
}
```

--------------------------------

### Basic XY Container Configuration (TypeScript)

Source: https://unovis.dev/docs/containers/XY_Container

Shows the programmatic setup of an XY Container in TypeScript, initializing it with a stacked bar component and axes. This approach is useful for advanced customization.

```ts
const container = new XYContainer<DataRecord>(node, {
  components: [new StackedBar({ x, y })],
  xAxis: new Axis({ type: "x" }),
  yAxis: new Axis({ type: "y" })
}, data)
```

--------------------------------

### Basic XY Container Configuration (Svelte)

Source: https://unovis.dev/docs/containers/XY_Container

Illustrates the basic configuration of the XY Container in Svelte, featuring a stacked bar chart and axes. This setup is efficient for Svelte-based projects.

```svelte
<VisXYContainer {data}>
  <VisStackedBar {x} {y}/>
  <VisAxis type="x"/>
  <VisAxis type="y"/>
</VisXYContainer>
```

--------------------------------

### Basic Timeline Configuration in Angular

Source: https://unovis.dev/docs/xy-charts/Timeline

Illustrates the basic setup for the Timeline component in an Angular application using template syntax. Data and accessor functions are defined in the component class.

```typescript
@Component({
  templateUrl: 'template.html'
})
export class Component {
  @Input data: TimeDataRecord[];
  lineDuration = (d: TimeDataRecord) =>  d.length
  lineRow = (d: TimeDataRecord) =>  d.type
  x = (d: TimeDataRecord) =>  d.timestamp
}
```

```html
<vis-xy-container [data]="data">
  <vis-timeline
  [lineDuration]="lineDuration" 
  [lineRow]="lineRow" 
  [x]="x"
></vis-timeline>
</vis-xy-container>
```

--------------------------------

### Attributes Configuration Example

Source: https://unovis.dev/docs/auxiliary/Annotations

Sets custom DOM attributes on visualization elements, useful for testing. This example adds a 'test-value' attribute to areas, using a data accessor function.

```typescript
{
 [Area.selectors.area]: {
 "test-value": d => d.value
 }
}
```

--------------------------------

### Plain TypeScript Basic Configuration

Source: https://unovis.dev/docs/containers/Single_Container

Demonstrates the direct usage of SingleContainer, Tooltip, and Donut from '@unovis/ts' for basic configuration. This approach requires manual DOM node selection.

```ts
import { SingleContainer, Tooltip, Donut } from '@unovis/ts'  
import { data } from './data'  
  
const triggers = { [Donut.selectors.segment]: d => d.data }  
const value = (d: number) =>  d  
  
const container = new SingleContainer<number>(node, {  
  tooltip: new Tooltip({ triggers }),   
  component: new Donut({ value })  
}, data)
```

--------------------------------

### Import Unovis Components (Solid)

Source: https://unovis.dev/docs/quick-start

Import core Unovis components for Solid applications.

```javascript
import { VisXYContainer, VisLine, VisAxis } from '@unovis/solid'
```

--------------------------------

### Donut Chart Attribute Configuration Example

Source: https://unovis.dev/docs/misc/Donut

Example of setting custom DOM attributes for Donut chart elements, useful for testing. This demonstrates setting a 'test-value' attribute on the area selector.

```typescript
{
 [Area.selectors.area]: {
   "test-value": d => d.value
 }
}
```

--------------------------------

### Basic Graph Configuration in TypeScript (Core)

Source: https://unovis.dev/docs/networks-and-flows/Graph

Demonstrates the fundamental instantiation of the Graph component within a SingleContainer using the core TypeScript library.

```typescript
import { SingleContainer, Graph } from '@unovis/ts'
import { data, NodeDatum,  LinkDatum } from './data'

const container = new SingleContainer<NodeDatum, LinkDatum>(node, {
  component: new Graph<NodeDatum, LinkDatum>({ })
}, data)

```

--------------------------------

### Basic Annotation Item

Source: https://unovis.dev/docs/auxiliary/Annotations

A minimal example of an AnnotationItem, providing only the required content property.

```typescript
let items: AnnotationItem[] = [
  { content: 'Item 1' }
]

```

--------------------------------

### Multiple XY Components in Container (TypeScript)

Source: https://unovis.dev/docs/containers/XY_Container

Illustrates the programmatic setup of an XY Container with multiple components in TypeScript. This method is suitable for complex visualizations requiring precise control over component configuration and data binding.

```ts
const container = new XYContainer<DataRecord>(node, {
  components: [
    new StackedBar({ x, y, barWidth: 5, color: "#E2203A" })
    new Line({ x, y })
    new Scatter({ x, y, shape })
  ]
}, data)
```

--------------------------------

### GroupedBar Initialization with dataStep

Source: https://unovis.dev/docs/xy-charts/GroupedBar

Demonstrates initializing the GroupedBar component with the `dataStep` option using its TypeScript constructor.

```typescript
const groupedBar = new GroupedBar<DataRecord>({ x, y, dataStep: 0.1 }) 
```

--------------------------------

### Basic Line Chart Configuration in Solid

Source: https://unovis.dev/docs/xy-charts/Line

Set up a basic line chart in Solid using VisLine within VisXYContainer. Data is accessed via a signal, and accessor functions are provided for x and y axes.

```typescript
import { VisXYContainer, VisLine } 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()}>
      <VisLine x={x} y={y}/>
    </VisXYContainer>
  )
}

```

--------------------------------

### Configure Tooltip in Vue

Source: https://unovis.dev/docs/auxiliary/Tooltip

Implement the Tooltip component within a Vue 3 setup script.

```vue
<script setup lang="ts">  
import { VisXYContainer, VisStackedBar, VisTooltip } from '@unovis/vue'  
import { StackedBar } from '@unovis/ts'  
  
const props = defineProps<{ data: DataRecord[] }>()  
const x = (d: DataRecord) =>  d.x  
const y = (d: DataRecord) =>  d.y  
const triggers = {  
    [StackedBar.selectors.bar]: (d: DataRecord) =>  `  
      <span>${d.x}, ${d.y}< / span>  
    `  
  }  
</script>  
  
<template>  
  <VisXYContainer :data="data">  
    <VisStackedBar :x="x" :y="y" />  
    <VisTooltip :triggers="triggers" />  
  </VisXYContainer>  
</template>  
```

--------------------------------

### Basic Line Chart in SolidJS

Source: https://unovis.dev/docs/guides/js-usage

A basic line chart using Unovis with SolidJS. This example demonstrates declarative rendering and passing data and accessors to components.

```typescript
import { VisXYContainer, VisLine, VisAxis } from '@unovis/solid'  
  
type DataRecord = { x: number; y: number }  
const data: DataRecord[] = [  
  { x: 0, y: 0 },  
  { x: 1, y: 2 },  
  { x: 2, y: 1 },  
]  
  
const BasicLineChart = () => {  
  return (  
    <VisXYContainer height='50dvh'>  
      <VisLine data={data} x={(d) => d.x} y={(d) => d.y} />  
      <VisAxis type='x' />  
      <VisAxis type='y' />  
    </VisXYContainer>  
  )  
}  
  
export default BasicLineChart  

```

--------------------------------

### Implement Brush in Vue

Source: https://unovis.dev/docs/auxiliary/Brush

Use the Brush component in Vue 3 with the script setup syntax.

```vue
<script setup lang="ts">
import { VisXYContainer, VisStackedBar, VisAxis, VisBrush } from '@unovis/vue'  
import { Tooltip } from 'unovis/ts'  
  
</script>  
  
<template>  
  <VisXYContainer :tooltip="tooltip" :data="data">  
    <VisStackedBar :x="x" :y="y" />  
    <VisAxis type="x" />  
    <VisBrush  
      :onBrushStart="onBrushStart"   
      :onBrushMove="onBrushMove"   
      :onBrushEnd="onBrushEnd"  
     />  
  </VisXYContainer>  
</template>  

```

--------------------------------

### Svelte Sankey Configuration

Source: https://unovis.dev/docs/networks-and-flows/Sankey

Basic setup for a Sankey diagram in Svelte. The data is exported as a prop.

```svelte
<script lang='ts'>  
  import { VisSingleContainer, VisSankey } from '@unovis/svelte'  
  
  export let data: SankeyData  
</script>  
  
<VisSingleContainer {data}>  
  <VisSankey/>  
</VisSingleContainer>  

```

--------------------------------

### Instantiate LeafletMap with Data

Source: https://unovis.dev/docs/maps/LeafletMap

JavaScript example of creating a new LeafletMap instance with a specified node, style, and data. Suitable for vanilla JavaScript or other frameworks.

```javascript
const leafletMap = new LeafletMap<MapDataRecord>(node, { style }, data)

```

--------------------------------

### Svelte Leaflet Map Component

Source: https://unovis.dev/docs/maps/LeafletMap

Example of using the VisLeafletMap component in Svelte with reactive property bindings.

```svelte
<VisLeafletMap 
  {style} 
  {pointBottomLabel} 
  {pointRadius} 
  clusterRingWidth={2} 
  {colorMap} 
  {data} 
/>
```

--------------------------------

### Basic Graph Configuration in Vue

Source: https://unovis.dev/docs/networks-and-flows/Graph

Presents the basic setup for the VisGraph component inside a VisSingleContainer using Vue's Composition API.

```typescript
import { VisSingleContainer, VisGraph } from '@unovis/vue'

const props = defineProps<{ data: NodeData }>()

```

```typescript
<script setup lang="ts">
import { VisSingleContainer, VisGraph } from '@unovis/vue'

const props = defineProps<{ data: NodeData }>()
</script>

<template>
  <VisSingleContainer :data="data">
    <VisGraph />
  </VisSingleContainer>
</template>

```

--------------------------------

### Point Data Structure with Population

Source: https://unovis.dev/docs/maps/TopoJSONMap

Example of a MapPoint type including population for calculating central labels.

```typescript
type MapPoint = {
  id: string;
  latitude: number;
  longitude: number;
  population: number;
}

```

--------------------------------

### Svelte Basic Configuration

Source: https://unovis.dev/docs/containers/Single_Container

Illustrates using VisSingleContainer, VisTooltip, and VisDonut within a Svelte component. Requires @unovis/svelte and @unovis/ts.

```svelte
<script lang='ts'>  
  import { VisSingleContainer, VisTooltip, VisDonut } from '@unovis/svelte'  
  import { Donut } from '@unovis/ts'  
  
  export let data: number[]  
  const triggers = { [Donut.selectors.segment]: d => d.data }  
  const value = (d: number) =>  d  
</script>  
  
<VisSingleContainer {data}>  
  <VisTooltip {triggers}/>  
  <VisDonut {value}/>  
</VisSingleContainer>  
```

--------------------------------

### Vertical Plotline Example

Source: https://unovis.dev/docs/auxiliary/Plotline

Sets the plotline to be vertical by specifying axis: 'y'. This typically marks a specific x-value.

```html
<VisPlotline axis="y" value={5}/>  
```

```html
<vis-plotline axis="y" [value]="5"></vis-plotline>  
```

```html
<VisPlotline axis="y" :value="5" />  
```

--------------------------------

### Basic Line Chart in Solid

Source: https://unovis.dev/docs/guides/js-usage

Render a basic line chart with Unovis in a SolidJS application. The example includes setting a container height and defining data accessors.

```tsx
import { VisXYContainer, VisLine, VisAxis } from '@unovis/solid'  
  
const data = [  
  { x: 0, y: 0 },  
  { x: 1, y: 2 },  
  { x: 2, y: 1 },  
]  
  
const BasicLineChart = () => {  
  return (  
    <VisXYContainer height='50dvh'>  
      <VisLine data={data} x={(d) => d.x} y={(d) => d.y} />  
      <VisAxis type='x' />  
      <VisAxis type='y' />  
    </VisXYContainer>  
  )  
}  
  
export default BasicLineChart  

```

--------------------------------

### SolidJS Sankey Configuration

Source: https://unovis.dev/docs/networks-and-flows/Sankey

Basic setup for a Sankey diagram in SolidJS. Data is accessed as a function from props.

```tsx
import { VisSingleContainer, VisSankey } from '@unovis/solid'  
  
function Component(props) {  
  const data: SankeyData = () => props.data  
  
  return (  
    <VisSingleContainer data={data()}>  
      <VisSankey/>  
    </VisSingleContainer>  
  )  
}  

```

--------------------------------

### Tooltip Triggers Configuration

Source: https://unovis.dev/docs/auxiliary/Tooltip

Define the structure and example usage for the triggers property to map selectors to tooltip content.

```typescript
{
 [selectorString]: (d: unknown) => string | HTMLElement
}
```

```typescript
{
 [Area.selectors.area]: (d: AreaDatum[]) => `<div>${d.value.toString()}</div>
}
```

--------------------------------

### Basic Stacked Bar Configuration in Vanilla TypeScript

Source: https://unovis.dev/docs/xy-charts/StackedBar

Demonstrates the core setup of a Stacked Bar chart using vanilla Unovis TypeScript. Initializes an XYContainer with the StackedBar component.

```typescript
import { XYContainer, StackedBar } from '@unovis/ts'
import { data, DataRecord } from './data'

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

--------------------------------

### Instantiate Graph with Node Styling Options

Source: https://unovis.dev/docs/networks-and-flows/Graph

Initialize a Graph instance directly with functions for node fill, stroke, and stroke width. This is a direct, programmatic way to set styles.

```typescript
const graph = new Graph<NodeDatum, LinkDatum>({
  nodeFill: (n: NodeDatum, i: number) =>  getColorByIndex(i),
  nodeStroke: (n: NodeDatum, i: number) =>  getColorByIndex(i  +  1),
  nodeStrokeWidth: (d: NodeDatum, i: number) =>  1  +  i  *  3
})

```

--------------------------------

### GroupedBar Initialization with TypeScript

Source: https://unovis.dev/docs/xy-charts/GroupedBar

Shows how to instantiate the GroupedBar component using its TypeScript constructor, passing x and y data.

```typescript
const groupedBar = new GroupedBar<DataRecord>({ x, y }) 
```

--------------------------------

### Vue Leaflet Map Component

Source: https://unovis.dev/docs/maps/LeafletMap

Example of using the VisLeafletMap component in Vue with property bindings for map configurations.

```vue
<VisLeafletMap 
  :style="style" 
  :pointBottomLabel="pointBottomLabel" 
  :pointRadius="pointRadius" 
  :clusterRingWidth="2" 
  :colorMap="colorMap" 
  :data="data" 
 />
```

--------------------------------

### Basic TopoJSON Map in Solid

Source: https://unovis.dev/docs/maps/TopoJSONMap

Demonstrates a TopoJSON map implementation in Solid.js, using VisSingleContainer and VisTopoJSONMap. Ensure correct data binding for reactive properties.

```typescript
import { VisSingleContainer, VisTopoJSONMap } from '@unovis/solid'  
import { WorldMapTopoJSON } from '@unovis/ts/maps'  
import { MapData } from '@unovis/ts'  
  
function Component(props) {  
  const data: MapData = () => props.data  
  
  return (  
    <VisSingleContainer data={data()}>  
      <VisTopoJSONMap topojson={WorldMapTopoJSON}/>  
    </VisSingleContainer>  
  )  
}
```

--------------------------------

### Angular Leaflet Map Component

Source: https://unovis.dev/docs/maps/LeafletMap

Example of using the vis-leaflet-map component in Angular with data binding for various properties.

```html
<vis-leaflet-map 
  [style]="style" 
  [pointBottomLabel]="pointBottomLabel" 
  [pointRadius]="pointRadius" 
  [clusterRingWidth]="2" 
  [colorMap]="colorMap" 
  [data]="data"
></vis-leaflet-map>
```

--------------------------------

### Show/Hide Behavior

Source: https://unovis.dev/docs/auxiliary/Crosshair

Configuring visibility behavior based on pointer proximity and viewport visibility.

```APIDOC
## Crosshair Visibility Settings

### Description
Control when the Crosshair is rendered based on pointer distance or viewport visibility.

### Properties
- **hideWhenFarFromPointer** (boolean) - Optional - If true, hides the crosshair when the cursor is far from a valid x value.
- **hideWhenFarFromPointerDistance** (number) - Optional - Sets the pixel distance threshold for hiding the crosshair.
- **visibilityThreshold** (number) - Optional - Sets the fraction of the container that must be visible in the viewport to display the crosshair.
```

--------------------------------

### React Leaflet Map Component

Source: https://unovis.dev/docs/maps/LeafletMap

Example of using the VisLeafletMap component in React with color map and other point/cluster configurations.

```jsx
<VisLeafletMap 
  style={style} 
  pointBottomLabel={pointBottomLabel} 
  pointRadius={pointRadius} 
  clusterRingWidth={2} 
  colorMap={colorMap} 
  data={data} 
/>
```

--------------------------------

### Point Data Structure with City Name

Source: https://unovis.dev/docs/maps/TopoJSONMap

Example of a MapPoint type including city name for bottom labels.

```typescript
type MapPoint = {
  id: string;
  latitude: number;
  longitude: number;
  city: string;
}

```

--------------------------------

### Basic Timeline Configuration in React

Source: https://unovis.dev/docs/xy-charts/Timeline

Demonstrates the minimal configuration for a Timeline component within a React XY Container. Ensure data is provided in the TimeDataRecord format.

```tsx
import { VisXYContainer, VisTimeline } from '@unovis/react'  
  
function Component(props) {  
  const data: TimeDataRecord[] = props.data  
  const lineDuration = (d: TimeDataRecord) =>  d.length  
  const lineRow = (d: TimeDataRecord) =>  d.type  
  const x = (d: TimeDataRecord) =>  d.timestamp  
  
  return (  
    <VisXYContainer data={data}>  
      <VisTimeline  
        lineDuration={lineDuration}   
        lineRow={lineRow}   
        x={x}  
      />  
    </VisXYContainer>  
  )  
}
```

--------------------------------

### Svelte Sankey Component Setup

Source: https://unovis.dev/docs/networks-and-flows/Sankey

Implements a Svelte component for Sankey diagrams, passing label and sub-label functions.

```svelte
<script lang='ts'>
  import { VisSingleContainer, VisSankey } from '@unovis/svelte'

  export let data: SankeyData
  const label = (d: SankeyNode) =>  d.id
  const subLabel = (d: SankeyNode) =>  d.val
</script>

<VisSankey {label} {subLabel}/>
```

--------------------------------

### Angular Sankey Component Setup

Source: https://unovis.dev/docs/networks-and-flows/Sankey

Configures an Angular component for a Sankey diagram, binding label and sub-label properties.

```typescript
@Component({
  template: '<vis-sankey [label]="label" [subLabel]="subLabel"></vis-sankey>'
})
export class Component {
  @Input data: SankeyData;
  label = (d: SankeyNode) =>  d.id
  subLabel = (d: SankeyNode) =>  d.val
}
```

--------------------------------

### Vue Sankey Configuration

Source: https://unovis.dev/docs/networks-and-flows/Sankey

Basic setup for a Sankey diagram in Vue. Uses defineProps for data and :data binding.

```vue
<script setup lang="ts">
import { VisSingleContainer, VisSankey } from '@unovis/vue'  
  
const props = defineProps<{ data: SankeyData }>()  
</script>  
  
<template>
  <VisSingleContainer :data="data">
    <VisSankey />
  </VisSingleContainer>
</template>

```

--------------------------------

### Configure Brush in Solid

Source: https://unovis.dev/docs/auxiliary/Brush

Integrate the Brush component using the SolidJS framework.

```tsx
import { VisXYContainer, VisArea, VisBrush } 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()}>  
      <VisArea x={x} y={y}/>  
      <VisBrush/>  
    </VisXYContainer>  
  )  
}  
```

--------------------------------

### Configure Crosshair Attributes

Source: https://unovis.dev/docs/auxiliary/Crosshair

Defines the structure for custom DOM attributes and provides an example of setting a test value attribute.

```typescript
{
	[selectorString]: {
    	[attributeName]: attribute constant value or accessor function
 }
}
```

```typescript
{
	[Area.selectors.area]: {
   "test-value": d => d.value
 }
}
```

--------------------------------

### Configure Crosshair Events

Source: https://unovis.dev/docs/auxiliary/Crosshair

Defines the structure for event configuration and provides an example of attaching a click listener to an area selector.

```typescript
{
	[selectorString]: {
    	[eventType]: callbackFunction
 }
}
```

```typescript
{
	[Area.selectors.area]: {
   click: (d) => console.log("Clicked Area", d)
 }
}
```

--------------------------------

### Basic Line Chart Configuration in TypeScript (Plain JS)

Source: https://unovis.dev/docs/xy-charts/Line

Instantiate a basic line chart using the XYContainer and Line classes from '@unovis/ts'. Requires a DOM node, configuration, and data.

```typescript
import { XYContainer, Line } from '@unovis/ts'
import { data, DataRecord } from './data'

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

```

--------------------------------

### Configure Node Fill, Stroke, and Stroke Width in SolidJS

Source: https://unovis.dev/docs/networks-and-flows/Graph

Demonstrates setting node fill, stroke, and stroke width using SolidJS's reactive system. This is suitable for applications built with SolidJS.

```typescript
function Component(props) {
  const data: NodeData = () => props.data
  const nodeFill = (n: NodeDatum, i: number) =>  getColorByIndex(i)
  const nodeStroke = (n: NodeDatum, i: number) =>  getColorByIndex(i  +  1)
  const nodeStrokeWidth = (d: NodeDatum, i: number) =>  1  +  i  *  3

  return (
    <VisGraph
      nodeFill={nodeFill}
      nodeStroke={nodeStroke}
      nodeStrokeWidth={nodeStrokeWidth}
    />
  )
}

```

--------------------------------

### Vue Bullet Legend Usage

Source: https://unovis.dev/docs/auxiliary/BulletLegend

Provides an example of using the VisBulletLegend component within a Vue.js application with the Composition API.

```typescript
<script setup lang="ts">
import { VisBulletLegend } from '@unovis/vue'
import { labels } from './data'

const items = labels.map(label => ({ name: label }))
</script>

<template>
  <VisBulletLegend :items="items" />
</template>
```

--------------------------------

### Vue Sankey Component Setup

Source: https://unovis.dev/docs/networks-and-flows/Sankey

Defines a Vue component for Sankey charts, utilizing `defineProps` and template bindings for labels.

```vue
<script setup lang="ts">
import { VisSingleContainer, VisSankey } from '@unovis/vue'

const props = defineProps<{ data: SankeyData }>()
const label = (d: SankeyNode) =>  d.id
const subLabel = (d: SankeyNode) =>  d.val
</script>

<template>
  <VisSankey :label="label" :subLabel="subLabel" />
</template>
```
Tokens:
Raw