Unlocking the Power of Data Visualization with Unovis

Data visualization is a crucial aspect of modern applications, enabling users to gain insights and make informed decisions. With numerous libraries available, choosing the right one can be daunting.

What sets Unovis apart?

• Tiny size: With a mere 25kb footprint, Unovis is an attractive choice for applications where size matters.
• Universal usage: Unovis supports multiple frameworks, including React, Angular, Svelte, and plain TypeScript, making it a versatile option for developers.
• Minimal approach: Unovis focuses on essential charts, avoiding unnecessary features that can clutter your application.
• Map and graph support: Unovis offers comprehensive and easy-to-use integrations with graph and map charts, setting it apart from other libraries.

Building a Unovis project

To demonstrate the capabilities of Unovis, we’ll build a simple project showcasing various chart types. We’ll use a template React.js application and initialize it with Vite.

npx vite init unovis-project
cd unovis-project
npm install @unovis/ts

Containers in Unovis

Unovis uses containers to hold components, creating a flexible and modular architecture. There are two types of containers:

• VisSingleContainer: For single charts, such as donut or graph charts.
• VisXYContainer: For charts with multiple components, like bar or line charts.

Creating charts with Unovis

We’ll explore the process of creating different chart types, including:

Donut chart

import { VisSingleContainer, DonutChart } from '@unovis/ts';

const donutChart = (
  <VisSingleContainer>
    <DonutChart
      data={[{ value: 10, label: 'Category 1' }, { value: 20, label: 'Category 2' }]}
      width={400}
      height={400}
    />
  </VisSingleContainer>
);

Bar chart

import { VisXYContainer, BarChart } from '@unovis/ts';

const barChart = (
  <VisXYContainer>
    <BarChart
      data={[
        { x: 'Category 1', y: 10 },
        { x: 'Category 2', y: 20 },
      ]}
      xAxisLabel="Category"
      yAxisLabel="Value"
    />
  </VisXYContainer>
);

And more chart types…

Customizing charts

Unovis offers a range of customization options, including:

• Tooltips: Adding context to charts with hover-over text.
• Colors: Changing the color scheme of charts to match your application’s style.
• Shapes: Modifying the shape of chart elements, such as nodes or points.

Graph charts

Unovis provides a powerful graph chart component, allowing you to create complex networks with ease. We’ll explore how to customize nodes and links, and add labels for better understanding.

import { GraphChart } from '@unovis/ts';

const graphChart = (
  <GraphChart
    nodes={[
      { id: 'node1', label: 'Node 1' },
      { id: 'node2', label: 'Node 2' },
    ]}
    links={[
      { source: 'node1', target: 'node2' },
    ]}
  />
);

Map charts

With Unovis, you can create interactive map charts using the VisLeafletMap component. We’ll demonstrate how to customize map points, shapes, and clusters, and add API keys for seamless integration.

import { VisLeafletMap } from '@unovis/ts';

const mapChart = (
  <VisLeafletMap
    center={[37.7749, -122.4194]}
    zoom={12}
    markers={[
      { lat: 37.7858, lng: -122.4364 },
      { lat: 37.8023, lng: -122.4056 },
    ]}
  />
);

Unovis is a robust and lightweight data visualization library that offers a wide range of chart types and customization options. Its tiny size, universal usage, and minimal approach make it an attractive choice for modern applications.