Graphic Walker: An Open-Source, Embeddable Tableau Alternative for Visual Analytics

Introduction

Graphic Walker, developed by Kanaries, is an open-source visual analytics tool that serves as a lightweight, embeddable alternative to Tableau. Built primarily with TypeScript and React, it simplifies data analysis and visualization through an intuitive drag-and-drop interface. With over 3,000 stars on GitHub, it's gaining traction among developers and data enthusiasts looking for flexible and powerful data exploration capabilities.

Key features of Graphic Walker include:

User-Friendly Interaction: Easily analyze and visualize data with simple drag-and-drop operations.
Vega-Lite Powered Visualizations: Leverages the Grammar of Graphics through Vega-Lite for robust and customizable charts.
Insight Generation: Helps interpret patterns and anomalies in your data by generating auxiliary information.
High Extensibility: Designed as a pure frontend component using WebWorker, making it highly embeddable in any web application.

For users requiring more advanced features like automatic pattern discovery, insight exploration, and causal analysis, the Kanaries team also offers RATH, an augmented analytics engine that complements Graphic Walker.

Installation

Graphic Walker is designed to be easily integrated into your web applications, especially those built with React.

First, install the package using npm or yarn:

yarn add @kanaries/graphic-walker
# or
npm i --save @kanaries/graphic-walker

Then, you can embed the GraphicWalker component into your React application:

import { GraphicWalker } from '@kanaries/graphic-walker';

const YourEmbeddingApp: React.FC = props => {
    const { data, fields } = props;
    return <GraphicWalker
        data={data}
        fields={fields}
        // spec={graphicWalkerSpec} // Optional: for predefined visualization specs
        // i18nLang={langStore.lang} // Optional: for internationalization
    />
}

export default YourEmbeddingApp;

If you have a pre-configured visualization and only need to render the chart without the control UI, you can use the PureRenderer component:

import { PureRenderer } from '@kanaries/graphic-walker';

const YourChart: React.FC = props => {
    const { rawData, visualState, visualConfig } = props;
    return <PureRenderer
        rawData={rawData}
        visualState={visualState}
        visualConfig={visualConfig}
    />
}

export default YourChart;

Examples

Using Graphic Walker is straightforward. You start by importing your data, typically a CSV file. Once loaded, you define which columns are dimensions and which are measures.

The intuitive user interface allows you to drag dimensions and measures from a left-hand list onto various shelves like "Rows," "Columns," "Color," or "Opacity." As you drag and drop, visualizations are automatically generated.

For measures, you can apply statistical functions such as sum, average, or count. You can easily switch between different chart types, for example, from a bar chart to a line chart, by adjusting the "Mark" type.

Graphic Walker also supports creating multiple graphs by placing several dimensions or measures on the rows and columns, similar to Tableau's small multiples feature.

A powerful "Insight" feature helps you understand anomalies in your data. For instance, if you notice an unexpected dip in usage data for a specific month, clicking on the mark and using the insight feature can provide explanations, such as a lower number of working days in that period.

You can save and load your analysis results, allowing you to resume your work or share your findings easily.

Why Use Graphic Walker?

Graphic Walker stands out for several reasons:

Open-Source and Free: A powerful, community-driven alternative to proprietary tools like Tableau.
Embeddable Component: Seamlessly integrate data visualization capabilities into your existing web applications with its React component.
Lightweight and Performant: Designed to be a lean tool focusing on core functionalities, ensuring high performance.
Intuitive Drag-and-Drop: Empowers users of all skill levels to explore data and create visualizations without writing code.
Robust Visualization Engine: Built on Vega-Lite, offering a declarative grammar for creating a wide range of statistical graphics.
Insightful Data Exploration: Features like the "Insight" tool help users uncover hidden patterns and explanations within their data.
Multilingual Support: Supports English and Chinese out-of-the-box, with options for developers to add custom language resources.