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

Skip to content Toggle navigation
 
Sign up

  * Product
      +  
        Actions
        Automate any workflow
      +  
        Packages
        Host and manage packages
      +  
        Security
        Find and fix vulnerabilities
      +  
        Codespaces
        Instant dev environments
      +  
        Copilot
        Write better code with AI
      +  
        Code review
        Manage code changes
      +  
        Issues
        Plan and track work
      +  
        Discussions
        Collaborate outside of code
      + Explore
      + All features
      + Documentation
      + GitHub Skills
      + Blog
  * Solutions
      + For
      + Enterprise
      + Teams
      + Startups
      + Education
      + By Solution
      + CI/CD & Automation
      + DevOps
      + DevSecOps
      + Case Studies
      + Customer Stories
      + Resources
  * Open Source
      +  
        GitHub Sponsors
        Fund open source developers
      +  
        The ReadME Project
        GitHub community articles
      + Repositories
      + Topics
      + Trending
      + Collections
  * Pricing

[                    ] 

  *  
    #
    In this repository All GitHub |
    Jump to |

  * No suggested jump to results

  *  
    #
    In this repository All GitHub |
    Jump to |
  *  
    #
    In this organization All GitHub |
    Jump to |
  *  
    #
    In this repository All GitHub |
    Jump to |

Sign in
Sign up
{{ message }}
Kanaries / graphic-walker Public

  * Notifications
  * Fork 6
  * Star 185

An open source alternative to Tableau.

graphic-walker.kanaries.net/

License

Apache-2.0 license
185 stars 6 forks
Star
Notifications

  * Code
  * Issues 0
  * Pull requests 0
  * Actions
  * Projects 0
  * Security
  * Insights

More

  * Code
  * Issues
  * Pull requests
  * Actions
  * Projects
  * Security
  * Insights

Kanaries/graphic-walker

This commit does not belong to any branch on this repository, and may
belong to a fork outside of the repository.
main
Switch branches/tags
[                    ]
Branches Tags
Could not load branches
Nothing to show
{{ refName }} default View all branches
Could not load tags
Nothing to show
{{ refName }} default
View all tags

Name already in use

A tag already exists with the provided branch name. Many Git commands
accept both tag and branch names, so creating this branch may cause
unexpected behavior. Are you sure you want to create this branch?
Cancel Create
2 branches 1 tag
Code

  * Local
  * Codespaces

  *  
    Clone
    HTTPS GitHub CLI
    [https://github.com/K]

    Use Git or checkout with SVN using the web URL.

    [gh repo clone Kanari]

    Work fast with our official CLI. Learn more.

  * Open with GitHub Desktop
  * Download ZIP

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

@ObservedObserver
ObservedObserver fix: explainer style
...
1 63016ac Jan 10, 2023
fix: explainer style
63016ac 1

Git stats

  * 76 commits

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
.github/workflows
 
 
packages
 
 
.gitattributes
 
 
.gitignore
 
 
.npmignore
 
 
LICENSE
 
 
README.md
 
 
README.zh-CN.md
 
 
package.json
 
 
yarn.lock
 
 
View code
[                    ]
graphic-walker Why is it different? Main features Usage Deploy Method
1: use as an independent app. Method 2: Use as an embedding component
module  try local (dev mode) I18n Support Customize I18n What's next
LICENSE

README.md

[68] English | Jian Ti Zhong Wen 

 graphic-walker

[6874747073] [6874747073] [6874747073] [6874747073] [6874747073]

Graphic Walker is a different type of open-source alternative to
Tableau. It allows data scientists to analyze data and visualize
patterns with simple drag-and-drop operations.

 Why is it different?

It is extremely easy to embed in your apps just as a React component
! The original purpose of graphic-walker is not to be a heavily BI
platform, but easy to embed, lite, plugin or components.

 Main features

  * 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 visualizations from low-level visual channel
    encodings. (based on vega-lite)
  * A Data Explainer which explains why some patterns occur / what
    may cause them.
  * Using webworker to handle computational tasks which allow you to
    use it as a pure front-end app.

 Usage

First, upload your CSV file, preview your data, and define the
analytic type of columns (dimension or measure).

    We are developing more types of data sources. You are welcome to
    raise an issue telling us the types of sources you are using. If
    you are a developer, graphic-walker can be used as an embedding
    component, and you can pass your parsed data source to it. For
    example, Rath uses graphic-walker as an embeding components, and
    it supports many common data sources. You can load your data in
    Rath and bring the data into graphic-walker. In this way, users
    can also benefit from data cleaning and transformation features
    in Rath.

[6874747073]

When the data is ready, click the 'Submit' button to use the data. On
the left-hand side, Field List is all of your original columns in the
table. You can drag them into visual channels (rows, columns, color,
opacity, etc.) and make visualizations.

[6874747073]

Visualize your data with drag and drop operation. For measures, you
can define the aggregation methods (sum, mean, count etc.)

[6874747073]

You can change the mark type into others to make different charts,
for example a line chart.

[6874747073]

To compare different measures, you can create a concat view by adding
more than one measure into rows/columns.

[6874747073]

To make a facet view of several subviews divided by the value in
dimension, put dimensions into rows or columns to make a facets view.
The rules are similar to Tableau.

[6874747073]

When you finish exploration, you can save the result into a local
file, which can be imported next time.

Sometimes you may have futher questions, such as why sales in Dec. is
high. Graphic Walker provides a data explainer for these cases.

For example, in bike sharing dataset, ask why registered rents in
Jan. is lower than expectation, the explainer will try to find some
potential explanations:

[6874747073]

(percent of number of workingday is less than average)

[6874747073]

 Deploy

If you want to use Graphic Walker as a data exploration tool without
thinking about deployment details, you can use our online
out-of-the-box version.

Use it here: Graphic Walker Online

 Method 1: use as an independent app.

yarn install

yarn workspace @kanaries/graphic-walker build

 Method 2: Use as an embedding component module 

Using graphic walker can be extremely easy. It provides a single
React component which allows you to easily embed it in your app.

yarn add @kanaries/graphic-walker

# or

npm i --save @kanaries/graphic-walker

In your app:

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;

 try local (dev mode)

# packages/graphic-walker
npm run dev

 I18n Support

Graphic Walker now support English (as "en" or "en-US") and Chinese
(as "zh" or "zh-CN") with built-in locale resources. You can simply
provide a valid string value (enumerated above) as props.i18nLang to
set a language or synchronize your global i18n language with the
component like the following example:

const YourApp = props => {
    // ...

    const curLang = /* get your i18n language */;

    return <GraphicWalker
        dataSource={dataSource}
        rawFields={fields}
        i18nLang={curLang}
    />
}

 Customize I18n

If you need i18n support to cover languages not supported currently,
or to totally rewrite the content of any built-in resource(s), you
can also provide your resource(s) as props.i18nResources to Graphic
Walker like this.

const yourResources = {
    'de-DE': {
        'key': 'value',
        ...
    },
    'fr-FR': {
        ...
    },
};

const YourApp = props => {
    // ...

    const curLang = /* get your i18n language */;

    return <GraphicWalker
        dataSource={dataSource}
        rawFields={fields}
        i18nLang={curLang}
        i18nResources={yourResources}
    />
}

Graphic Walker uses react-i18next to support i18n, which is based on
i18next, so your translation resources should follow this format. You
can simply fork and edit /locales/en-US.json to start your
translation.

 What's next

Graphic Walker is basically manual data exploration software. When
facing more complex datasets, manual exploration can cost a lot of
time, Rath is software providing a different data analysis experience
with automation enhancement.

 LICENSE

Please refer to LICENSE file.

About

An open source alternative to Tableau.

graphic-walker.kanaries.net/

Topics

visualization vega-lite tableau

Resources

Readme

License

Apache-2.0 license

Stars

185 stars

Watchers

0 watching

Forks

6 forks

Releases 1

 
init version Latest
Sep 27, 2022

Packages 0

No packages published

Used by 4

  * @Kanaries @Kanaries / graphic-walker
  * @Kanaries @Kanaries / Rath
  * @Kanaries @Kanaries / rath-in-airtable

Contributors 4

  * 
     
  * 
     
  * 
     
  * 
     

Languages

  * TypeScript 97.5%
  * JavaScript 1.6%
  * Other 0.9%

Footer

 (c) 2023 GitHub, Inc.

Footer navigation

  * Terms
  * Privacy
  * Security
  * Status
  * Docs
  * Contact GitHub
  * Pricing
  * API
  * Training
  * Blog
  * About

You can't perform that action at this time.
You signed in with another tab or window. Reload to refresh your
session. You signed out in another tab or window. Reload to refresh
your session.