Data Visualization Library

Overview

This section explains how to leverage the Keen visualization libraries to create charts and metrics.

Architecture

The data visualization library is consisted of three packages that could be used separately based on requirements.

Plots

The @keen.io/charts is set of reusable plots components built with React and D3. Charts are part of a @keen.io/widgets and @keen.io/dataviz packages that could be used to seamlessly embed and deliver metrics within your user interface.

Charts plots theme could be fully customized by providing theme interface. Each of chart plot supports a lot of configuration options to adjust it to Your own needs.

Example

Line chart plot component

Use cases

• React ecosystem front-end applications.
• Create own visualization library by using production ready @keen.io/charts and Your custom React components.
• Simple data visualizations that do not require additional features like legend, filters etc.
• Use any data source to render plots

Widgets

The @keen.io/widgets package is a higher visualization layer that connects @keen.io/charts with other components that could be used to interact with charts plots.

Example

Use cases

• React ecosystem front-end applications.
• Build customer-facing dashboards and visualizations with set of production ready components.
• Use any data source to render widgets

DataViz

The @keen.io/dataviz is abstraction layer that connects Keen API with visualization components. It allows to seamlessly embed and deliver metrics within your user interface with minimal effort.

Example

Line chart widget powered by Keen API analysis.

Use cases

• Front-end ecosystems (Vanilla.js, React, Vue, Angular) that are targeted for browser.
• Embed visualizations on any website and user interface.
• Visualize events from Keen API without additional parsing and transformations.
• Deliver customer-facing dashboards and metrics with no-time.