DEV Community

Hao Chen
Hao Chen

Posted on

Graphic-Walker: A different type of open-source alternative to Tableau

Hello, guys~ Recently, I have been participating in development of a data exploration and visualization app which can be used as a different type of open-source alternative to Tableau. It is extremely easy to embed in your apps just as a react component. The original purpose is to develop a lite plugin that can be easily embedded in most cases, it doesn't have to be a large heavy BI system, but a lite graphic plugin.

GitHub: Kanaries/graphic-walker, https://github.com/Kanaries/graphic-walker

The main features implemented:

  • A user-friendly drag-and-drop-based interaction for exploratory data analysis with visualizations.
  • A grammar of graphics-based visual analytic user interface where users can build visualization from low-level visual channel encodings.
  • A Data Explainer explains why some patterns occur / what may cause them.
  • Using web workers and indexed DB to handle computation tasks which allows you to use it as a pure front-end app. (working on use duckDB as data engine.)

And you can use it in your app as a react component!

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

const YourEmbeddingTableauStyleApp: React.FC = props => {
    const { dataSource, fields } = props;
    return <GraphicWalker
        dataSource={dataSource}
        rawFields={fields}
        spec={graphicWalkerSpec}
        i18nLang={langStore.lang}
    />
}

export default YourEmbeddingTableauStyleApp;
Enter fullscreen mode Exit fullscreen mode

Feedbacks and advice are welcome! What features do you think are important to add?

Top comments (0)

An Animated Guide to Node.js Event Loop

Node.js doesnโ€™t stop from running other operations because of Libuv, a C++ library responsible for the event loop and asynchronously handling tasks such as network requests, DNS resolution, file system operations, data encryption, etc.

What happens under the hood when Node.js works on tasks such as database queries? We will explore it by following this piece of code step by step.