{"id":19282814,"url":"https://github.com/kanaries/graphic-walker","last_synced_at":"2026-01-22T11:25:27.462Z","repository":{"id":62878576,"uuid":"542017915","full_name":"Kanaries/graphic-walker","owner":"Kanaries","description":"An open source alternative to Tableau. Embeddable visual analytic","archived":false,"fork":false,"pushed_at":"2026-01-16T08:45:40.000Z","size":3576,"stargazers_count":3035,"open_issues_count":41,"forks_count":165,"subscribers_count":12,"default_branch":"main","last_synced_at":"2026-01-18T08:23:29.959Z","etag":null,"topics":["bi","data","data-analysis","data-mining","data-visualization","eda","k6s","kanaries","low-code","pivot-table","react","tableau","tableau-alternative","typescript","vega","vega-lite","visualization"],"latest_commit_sha":null,"homepage":"https://kanaries.net/graphic-walker","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Kanaries.png","metadata":{"files":{"readme":"README.ja-JP.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2022-09-27T10:02:28.000Z","updated_at":"2026-01-16T16:21:59.000Z","dependencies_parsed_at":"2024-02-07T07:31:06.875Z","dependency_job_id":"cd0d6fc7-6532-44f7-9c6e-709e9523dde0","html_url":"https://github.com/Kanaries/graphic-walker","commit_stats":null,"previous_names":[],"tags_count":86,"template":false,"template_full_name":null,"purl":"pkg:github/Kanaries/graphic-walker","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kanaries%2Fgraphic-walker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kanaries%2Fgraphic-walker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kanaries%2Fgraphic-walker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kanaries%2Fgraphic-walker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Kanaries","download_url":"https://codeload.github.com/Kanaries/graphic-walker/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kanaries%2Fgraphic-walker/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28662020,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-22T01:17:37.254Z","status":"online","status_checked_at":"2026-01-22T02:00:07.137Z","response_time":144,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bi","data","data-analysis","data-mining","data-visualization","eda","k6s","kanaries","low-code","pivot-table","react","tableau","tableau-alternative","typescript","vega","vega-lite","visualization"],"created_at":"2024-11-09T21:28:30.215Z","updated_at":"2026-01-22T11:25:27.433Z","avatar_url":"https://github.com/Kanaries.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cimg src=\"https://ch-resources.oss-cn-shanghai.aliyuncs.com/images/lang-icons/icon128px.png\" width=\"22px\" /\u003e [English](./README.md) | [简体中文](./README.zh-CN.md) | 日本語\n\n![graphic-walker-banner](https://pub-8e7aa5bf51e049199c78b4bc744533f8.r2.dev/graphic-walker-banner202402.png)\n\n# graphic-walker\n![](https://img.shields.io/github/license/Kanaries/graphic-walker?style=flat-square)\n![](https://img.shields.io/npm/v/@kanaries/graphic-walker?style=flat-square)\n![](https://img.shields.io/github/actions/workflow/status/kanaries/graphic-walker/auto-build.yml?style=flat-square)\n[![](https://img.shields.io/twitter/follow/kanaries_data?style=social)](https://twitter.com/kanaries_data)\n[![](https://img.shields.io/discord/987366424634884096?color=%237289da\u0026label=Discord\u0026logo=discord\u0026logoColor=white\u0026style=flat-square)](https://discord.gg/WWHraZ8SeV)\n[![](https://img.shields.io/badge/YouTube-red?style=flat-square\u0026logo=youtube\u0026logoColor=white)](https://www.youtube.com/@kanaries_data)\n[![](https://img.shields.io/badge/Medium-grey?style=flat-square\u0026logo=medium\u0026logoColor=white)](https://medium.com/@observedobserver)\n[![](https://img.shields.io/badge/LinkedIn-blue?style=flat-square\u0026logo=linkedin\u0026logoColor=white)](https://www.linkedin.com/company/kanaries-data/)\n\nGraphic Walker は Tableau と異なる形で仕組みされて、Tableau のオープンソースの代用品です。簡単なドラッグ・アンド・ドロップ操作でデータ分析と可視化を実現します。データサイエンティストの分析需要を支援する機能を備えています。\n\n#### Tableau との違い\n\nGraphic Walker は React コンポーネントの形で、プラグインとして Web アプリに簡単に埋め込めます。Tableau と違って、Graphic Walker は豊かな機能でできているのではなく、基本の機能を簡単に使用できるようにデザインされている軽量なツールです。Graphic Walker を React アプリに埋め込むことは非常に簡単です ！\n\n#### 主な機能\n\n+ 使いやすいインタラクション。簡単な手順でデータの分析と可視化を完成できます。\n+ Grammar of graphics に基づく [vega-lite](https://vega.github.io/vega-lite/) で実現する可視化。\n+ データの中のパターンと期待はずれの値になったマークを解釈する情報の生成。\n+ WebWorker の使用によって純粋なフロントエンドとして埋め込める高い拡張性。\n\n\u003e Graphic Walker は軽量なコンポーネントです。もしより多くの機能がお望みなら、同じくわたしたちのチームで開発した [RATH](https://github.com/Kanaries/Rath) という拡張分析エンジンを使い、自動的なパターン発見、洞察探索、因果分析など多様な機能が備えるツールをご覧ください。\n\n## 手順\n\n最初は、分析したいデータを CSV ファイルとして導入します。データを確認する際に、各列どれがディメンションか、どれがメジャーかを決めます。\n\n\u003e 導入できるデータソースの種類を増やす予定がありますので、追加をご希望する方は気軽に私たちに連絡または issue で教えてください。開発者には、直接にデータを props として Graphic Walker に入力することができます。[Rath](https://github.com/Kanaries/Rath) はその方法で、多くのデータソースをサポートします。また、[Rath](https://github.com/Kanaries/Rath) でデータを導入してセーブするファイルを Graphic Walker に取り込むこともできます。Graphic Walker で導入できないデータを [Rath](https://github.com/Kanaries/Rath) で処理したり、変換したりしてから Graphic Walker で分析する選択肢もあります。\n\n![graphic walker dataset upload](https://pub-8e7aa5bf51e049199c78b4bc744533f8.r2.dev/gw-readme-202402%2Fgw-ds-import.png)\n\n確認が完了したら、『Submit』をクリックしましょう。データの各ディメンションとメジャーは左のリストに表示されます。それらをその右側のスペース（行、列、色、不透明度など）にドロップしたら、可視化が生成します。\n\n![](https://pub-8e7aa5bf51e049199c78b4bc744533f8.r2.dev/gw-readme-202402%2Fgw-ui.png)\n\n\nメジャーには、合計、平均、個数などの統計関数が利用できます。\n\n![graphic walker bar chart](https://pub-8e7aa5bf51e049199c78b4bc744533f8.r2.dev/gw-readme-202402%2Fgw-bar01.png)\n\n\nマークを設置して、グラフを別種類、例えば折れ線グラフに変更しましょう。\n\n![graphic walker line chart](https://pub-8e7aa5bf51e049199c78b4bc744533f8.r2.dev/gw-readme-202402%2Fgw-line-02.png)\n\n\n多数のメジャーを比較するために、行や列の空欄に複数のメジャーを入れましょう。\n\n![graphic walker area chart](https://pub-8e7aa5bf51e049199c78b4bc744533f8.r2.dev/gw-readme-202402%2Fgw-area.png)\n\nTableau に似ていて、複数のディメンションを行や列に設置したら、複数のグラフが生成されます。\n\n![graphic walker scatter chart](https://pub-8e7aa5bf51e049199c78b4bc744533f8.r2.dev/gw-readme-202402%2Fgw-scatter.png)\n\nGraphic Walker は編集した結果をファイルとして保存することができます。今回の分析を続けたい時または結果を残したい時は、セーブ・アンド・ロード機能を利用しましょう。\n\nデータを探索する時に気になるとこがあったら、インサイト機能を使って補助情報をチェックしてみましょう。\n\n例えば、bike sharing データセットを分析するとき、１月の登録者の利用数が期待された値よりあきらかに低いということに気付きました。マークをクリックしてインサイト機能を使ってみよう。\n\n![](https://docs-us.oss-us-west-1.aliyuncs.com/images/graphic-walker/explain-data-start.png)\n\nインサイト機能が提供した情報によると、１月には就業日の数が平均より少ないとのことです。\n\n![](https://docs-us.oss-us-west-1.aliyuncs.com/images/graphic-walker/explain-data-result.png)\n\n## デプロイ\n\nデプロイより、今すぐ試すことをご希望する方は、オンラインバージョンをご利用ください：[Graphic Walker Online](https://graphic-walker.kanaries.net)\n\n### 方法１：本リポジトリを配置\n\n```bash\nyarn install\n\nyarn workspace @kanaries/graphic-walker build\n```\n\n### 方法２：あなたの Web アプリに実装 \n\nGraphic Walker の埋め込みは非常に簡単です。まずはインストールです。\n\n```bash\nyarn add @kanaries/graphic-walker\n\n# or\n\nnpm i --save @kanaries/graphic-walker\n```\n\nあなたの React アプリで：\n```typescript\nimport { GraphicWalker } from '@kanaries/graphic-walker';\n\nconst YourEmbeddingApp: React.FC = props =\u003e {\n    const { data, fields } = props;\n    return \u003cGraphicWalker\n        data={data}\n        fields={fields}\n        spec={graphicWalkerSpec}\n        i18nLang={langStore.lang}\n    /\u003e\n}\n\nexport default YourEmbeddingApp;\n```\n\nもし Graphic Walker のコンフィグがある場合、`PureRenderer` コンポーネントを使ってコントロール UI なしのチャートを表示できます。\n\n```typescript\nimport { PureRenderer } from '@kanaries/graphic-walker';\n\nconst YourChart: React.FC = props =\u003e {\n    const { rawData, visualState, visualConfig } = props;\n    return \u003cGraphicWalker\n        rawData={rawData}\n        visualState={visualState}\n        visualConfig={visualConfig}\n    /\u003e\n}\n\nexport default YourChart;\n```\n\n### ローカルに試す (dev mode)\n```bash\n# packages/graphic-walker\nnpm run dev\n```\n\n## オープンソースコミュニティに共有\n\u003e もし [graphic walker](https://github.com/Kanaries/graphic-walker) がよいと思ったら、ぜひオープンソースコミュニティにご意見をシェアしてください。\n\n[![GitHub Repo stars](https://img.shields.io/badge/share%20on-twitter-03A9F4?style=flat-square\u0026logo=twitter)](https://twitter.com/share?url=https://github.com/Kanaries/graphic-walker\u0026text=Graphic-Walker:%20A%20different%20type%20of%20open-source%20alternative%20to%20Tableau)\n[![GitHub Repo stars](https://img.shields.io/badge/share%20on-facebook-1976D2?style=flat-square\u0026logo=facebook)](https://www.facebook.com/sharer/sharer.php?u=https://github.com/Kanaries/graphic-walker)\n[![GitHub Repo stars](https://img.shields.io/badge/share%20on-linkedin-3949AB?style=flat-square\u0026logo=linkedin)](https://www.linkedin.com/shareArticle?url=https://github.com/Kanaries/graphic-walker\u0026title=Graphic-Walker:%20A%20different%20type%20of%20open-source%20alternative%20to%20Tableau)\n[![GitHub Repo stars](https://img.shields.io/badge/share%20on-hacker%20news-orange?style=flat-square\u0026logo=ycombinator)](https://news.ycombinator.com/submitlink?u=https://github.com/Kanaries/graphic-walker)\n[![GitHub Repo stars](https://img.shields.io/badge/share%20on-reddit-red?style=flat-square\u0026logo=reddit)](https://reddit.com/submit?url=https://github.com/Kanaries/graphic-walker\u0026title=Graphic-Walker:%20A%20different%20type%20of%20open-source%20alternative%20to%20Tableau)\n\n\n## 多言語サポート\n\nGraphic Walker は現在_英語_（コード `\"en\"` または `\"en-US\"`）と中国語（コード `\"zh\"` または `\"zh-CN\"`）を完全にサポートします。以下のように `props.i18nLang` で指定した言語が設置できます：\n\n```typescript\nconst YourApp = props =\u003e {\n    // ...\n\n    const curLang = /* get your i18n language */;\n\n    return \u003cGraphicWalker\n        data={data}\n        fields={fields}\n        i18nLang={curLang}\n    /\u003e\n}\n```\n\n### 多言語インタフェース\n\nもしいまだにサポートされていない言語を使いたいなら、Graphic Walker はリソースを JSON として読み取ることができます。開発者は\n Graphic Walker のソースコードを変更する必要なく、多言語データを入力することで他の言語を使えます。以下のように、`props.i18nResources` を設置します。\n\n```typescript\nconst yourResources = {\n    'ja-JP': {\n        'key': 'value',\n        ...\n    },\n    'fr-FR': {\n        ...\n    },\n};\n\nconst YourApp = props =\u003e {\n    // ...\n\n    const curLang = /* get your i18n language */;\n\n    return \u003cGraphicWalker\n        data={data}\n        fields={fields}\n        i18nLang={curLang}\n        i18nResources={yourResources}\n    /\u003e\n}\n```\n\nGraphic Walker は `i18next` に基づく `react-i18next` を使用します。多言語インタフェースについては[こちら](https://www.i18next.com/misc/json-format)で参照しましょう。また、本リポジトリにある `/locales/en-US.json` を参照して翻訳を始めることもおすすめです。\n\n## API\n\nGraphic Walker Props interface\n\n```ts\nexport interface IGWProps {\n\tdata?: IRow[];\n\tfields?: IMutField[];\n\tspec?: Specification;\n\ti18nLang?: string;\n\ti18nResources?: { [lang: string]: Record\u003cstring, string | any\u003e };\n\tkeepAlive?: boolean;\n}\n```\n\n関数\n\n+ `data`, type `Array\u003c{[key: string]: any}\u003e`, key-value オブジェクトの配列。\n+ `fields`, type [IMutField](./packages/graphic-walker/src/interfaces.ts). 列の配列。\n+ `spec`, type [Specification](./packages/graphic-walker/src/interfaces.ts). 可視化の配置データ。\n+ `i18nLang`, type `string`. 言語コード。\n+ `i18nResources` 多言語データ。\n+ `keepAlive`, type `boolean`. `true` に設置したら、Graphic Walker はコンポーネントが削除されても、また使う必要のあるデータをセーブします。\n\n## つづく\n\nGraphic Walker は主に基本的な分析任務をサポートします。複雑なデータを分析するには、少し足りない部分があるかも知れません。その時に [Rath](https://github.com/Kanaries/Rath) がおすすめです。\n\n## LICENSE\n\nPlease refer to [LICENSE](./LICENSE) and [LICENSE2](./LICENSE2) file.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkanaries%2Fgraphic-walker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkanaries%2Fgraphic-walker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkanaries%2Fgraphic-walker/lists"}