Quick start

GraphicWalker is a react component, so we suggest you use it in a React project. Here is a quick start guide to help you get started.

Create project

Start by creating a new React project using vite:

yarn create vite@latest

Install Graphic Walker

Install GraphicWalker and its dependencies:

yarn add @kanaries/graphic-walker styled-components

Prepare your data to be visualized

Create a JSON file with the data you want to visualize. For example, a simple graph:

data.json

[
    {
        "id": "1",
        "label": "Node 1",
        "x": 0,
        "y": 0
    },
    {
        "id": "2",
        "label": "Node 2",
        "x": 100,
        "y": 0
    },
    {
        "id": "3",
        "label": "Node 3",
        "x": 50,
        "y": 100
    }
]

Then you can use the GraphicWalker component to visualize it:

In this snippet, we use the transData function to infer the meta of the data automatically and pass it to the GraphicWalker component.

app.tsx

import { useMemo } from 'react';
import { GraphicWalker } from '@kanaries/graphic-walker';
import { transData } from '@kanaries/graphic-walker/dataSource/utils';
import data from './data.json';
 
export default function App() {
    const { dataSource, fields } = useMemo(() => transData(data), [data]);
    return (
        <GraphicWalker data={dataSource} fields={fields} />
    );
}

Or you can define the meta of the data manually:

app.tsx

import { GraphicWalker, type IMutField } from '@kanaries/graphic-walker';
import data from './data.json';
 
const fields: IMutField[] = [
    {
        fid: 'id',
        semanticType: 'nominal',
        analyticType: 'dimension',
    },
    {
        fid: 'label',
        semanticType: 'nominal',
        analyticType: 'dimension',
    },
    {
        fid: 'x',
        semanticType: 'quantitative',
        analyticType: 'measure',
    },
    {
        fid: 'y',
        semanticType: 'quantitative',
        analyticType: 'measure',
    },
];
 
export default function App() {
    return (
        <GraphicWalker data={data} fields={fields} />
    );
}

So you will get a visualization editor of the data like this:

Overview Using Graphic Walker in React