Level to HN: Graphic-Walker – A special kind of originate-offer different to Tableau

English | 简体中文

Graphic Walker is a different kind of originate-offer different to Tableau. It enables knowledge scientists to examine knowledge and visualize patterns with straightforward race-and-tumble operations.

Why is it different?

It is very easy to embed on your apps factual as a React recount 🎉! The distinctive aim of graphic-walker is to now not be a heavy BI platform, however a easy to embed, lite, plugin.

Significant aspects

• A user edifying race and tumble primarily based interplay for exploratory knowledge prognosis with visualizations.
• A grammar of graphics-primarily based visible analytic user interface where users can make visualizations from low-level visible channel encodings. (in step with vega-lite)
• A Data Explainer which explains why some patterns occur / what would possibly maybe maybe maybe also build off them.
• The utilization of webworker to handle computational projects which allow you utilize it as a pure entrance-reside app.

Graphic Walker is a lite visible analytic recount. Within the occasion you are drawn to extra correct knowledge prognosis application, test our related mission RATH, an augmented analytic BI with automated insight discovery, causal prognosis and visualization auto expertise in step with human’s visible perception.

Utilization

First, add your CSV file, preview your knowledge, and description the analytic kind of columns (dimension or measure).

We are establishing extra styles of knowledge sources. You are welcome to take an anxiousness telling us the styles of sources you’re the utilization of. Within the occasion you’re a developer, graphic-walker would possibly maybe maybe maybe also additionally be broken-down as an embedding recount, and also you would possibly maybe maybe tear your parsed knowledge offer to it. For instance, Rath makes exhaust of graphic-walker as an embeding parts, and it helps many approved knowledge sources. It is probably you’ll maybe maybe load your knowledge in Rath and lift the info into graphic-walker. On this suggests, users can additionally wait on from knowledge cleaning and transformation aspects in Rath.

When the info is willing, click the ‘Post’ button to make exhaust of the info. On the left-hand facet, Field Checklist is all of your fashioned columns in the table. It is probably you’ll maybe maybe race them into visible channels (rows, columns, color, opacity, etc.) and assemble visualizations.

Visualize your knowledge with race and tumble operation. For measures, you would possibly maybe maybe outline the aggregation suggestions (sum, mean, depend etc.)

It is probably you’ll maybe maybe change the imprint kind into others to assemble different charts, as an illustration a line chart.

To envision different measures, you would possibly maybe maybe fabricate a concat take into fable by adding a few measure into rows/columns.

To assemble a ingredient take into fable of several subviews divided by the price in dimension, establish dimensions into rows or columns to assemble a facets take into fable. The principles are identical to Tableau.

Whenever you assemble exploration, you would possibly maybe maybe establish the consequence proper into a local file, which is willing to be imported subsequent time.

Every so often that you just would possibly maybe also have futher questions, equivalent to why gross sales in Dec. is high. Graphic Walker offers a knowledge explainer for these cases.

For instance, in bike sharing dataset, quiz why registered rents in Jan. is lower than expectation, the explainer will are trying to search out some ability explanations:

(percent of option of workingday is lower than realistic)

Deploy

Within the occasion you must make exhaust of Graphic Walker as a knowledge exploration application without enraged by deployment particulars, you would possibly maybe maybe exhaust our on-line out-of-the-field model.

Employ it here: Graphic Walker Online

Scheme 1: exhaust as an self sustaining app.

fable set up
fable workspace @kanaries/graphic-walker make

Scheme 2: Employ as an embedding recount module 🔥

The utilization of graphic walker would possibly maybe maybe maybe also additionally be extremely easy. It offers a single React recount which enables you to without issues embed it on your app.

fable add @kanaries/graphic-walker
# or
npm i --establish @kanaries/graphic-walker

On 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;

are trying local (dev mode)

# programs/graphic-walker
npm flee dev

I18n Toughen

Graphic Walker now beef up English (as "en" or "en-US") and Chinese (as "zh" or "zh-CN") with built-in locale resources. It is probably you’ll maybe maybe simply present a excellent string price (enumerated above) as props.i18nLang to construct a language or synchronize your worldwide i18n language with the recount admire the following instance:

const YourApp = props => {
    // ...
    const curLang = /fetch your i18n language */;
    return GraphicWalker
        dataSource={dataSource}
        rawFields={fields}
        i18nLang={curLang}
    />
}

Customise I18n

Within the occasion you’d like i18n beef up to duvet languages now not supported at existing, or to utterly rewrite the convey of any built-in handy resource(s), you would possibly maybe maybe additionally present your handy resource(s) as props.i18nResources to Graphic Walker admire this.

const yourResources = {
    'de-DE': {
        'key': 'price',
        ...
    },
    'fr-FR': {
        ...
    },
};
const YourApp = props => {
    // ...
    const curLang = /fetch your i18n language */;
    return GraphicWalker
        dataSource={dataSource}
        rawFields={fields}
        i18nLang={curLang}
        i18nResources={yourResources}
    />
}

Graphic Walker makes exhaust of react-i18subsequent to beef up i18n, which is in step with i18subsequent, so your translation resources ought to notice this format. It is probably you’ll maybe maybe simply fork and edit /locales/en-US.json to originate up your translation.

API

Graphic Walker Props interfacer

export interface EditorProps {
	dataSource?: IRow[];
	rawFields?: IMutField[];
	spec?: Specification;
	hideDataSourceConfig?: boolean;
	i18nLang?: string;
	i18nResources?: { [lang: string]: Filestring, string | any> };
	keepAlive?: boolean;
}

property description

• dataSource, kind Array, array of key-price object knowledge.
• rawFields, kind IMutField. array of fields(columns) of the info.
• spec, kind Specification. visualization specification
• hideDataSourceConfig on the tip of graphic walker, you would possibly maybe maybe import or add dataset recordsdata. Within the occasion you must make exhaust of g

{[key:>