https://github.com/visactor/vgrammar
VGrammar is a kind of grammar of data visualization
https://github.com/visactor/vgrammar
Last synced: 3 months ago
JSON representation
VGrammar is a kind of grammar of data visualization
- Host: GitHub
- URL: https://github.com/visactor/vgrammar
- Owner: VisActor
- License: mit
- Created: 2023-06-05T02:54:52.000Z (over 2 years ago)
- Default Branch: develop
- Last Pushed: 2025-03-27T09:27:42.000Z (10 months ago)
- Last Synced: 2025-03-29T19:01:35.405Z (10 months ago)
- Language: TypeScript
- Homepage:
- Size: 22.5 MB
- Stars: 96
- Watchers: 18
- Forks: 18
- Open Issues: 10
-
Metadata Files:
- Readme: README.ja-JP.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
VGrammar
VGrammarは、チャートを生成するだけでなく、データビジュアライゼーションツールも提供します。
紹介 •
デモ •
チュートリアル •
API•
オプション
[](https://www.npmjs.com/package/@visactor/vgrammar)
[](https://www.npmjs.com/package/@visactor/vgrammar)
[](https://github.com/visactor/vgrammar/blob/main/LICENSE)
[English](./README.md) | [简体中文](./README.zh-CN.md) | 日本語
（ビデオ）
# 紹介
VGrammarは、ビジュアルレンダリングエンジン[VRender](https://github.com/VisActor/VRender)に基づくビジュアルグラマライブラリです。主な機能は以下の通りです：
1. デフォルトで使いやすい：VGrammarは簡潔な構文、包括的なインターフェース、豊富なコンポーネントライブラリ、簡素化された開発プロセスを特徴としています。
2. 機能が豊富：VGrammarは、チャート定義、アニメーションの配置、芸術的表現など、さまざまなニーズを完全にカバーする広範な機能を提供します。
3. 柔軟で拡張可能：VGrammarは、カスタムレンダリング、データマッピング、自動レイアウトなど、柔軟な拡張オプションを提供し、簡単に拡張できます。
# リポジトリの紹介
このリポジトリには以下のパッケージが含まれています：
1. VGrammar: VGrammarのメインパッケージ
# 使用方法
## インストール
[npm package](https://www.npmjs.com/package/@visactor/vgrammar)
```bash
// npm
npm install @visactor/vgrammar
// yarn
yarn add @visactor/vgrammar
```
## クイックスタート
```javascript
import { View } from '@visactor/vgrammar';
const spec = {
data: [
{
id: 'table',
values: [
{
value: 3676,
name: ' ~ 29'
},
{
value: 3872,
name: '30 ~ 39'
},
{
value: 1668,
name: '40 ~ 49'
},
{
value: 610,
name: '50 ~'
}
]
},
{
id: 'pie',
source: 'table',
transform: [
{
type: 'pie',
field: 'value',
asStartAngle: 'startAngle',
asEndAngle: 'endAngle'
}
]
}
],
scales: [
{
id: 'colorScale',
type: 'ordinal',
domain: { data: 'table', field: 'name' },
range: [
'#6690F2',
'#70D6A3',
'#B4E6E2',
'#63B5FC',
'#FF8F62',
'#FFDC83',
'#BCC5FD',
'#A29BFE',
'#63C4C7',
'#F68484'
]
}
],
marks: [
{
type: 'arc',
from: { data: 'pie' },
dependency: ['viewBox', 'colorScale'],
encode: {
update: (datum, element, params) => {
const viewBox = params.viewBox;
const maxR = Math.min(viewBox.width() / 2, viewBox.height() / 2);
return {
x: viewBox.x1 + viewBox.width() / 2,
y: viewBox.y1 + viewBox.height() / 2,
startAngle: datum.startAngle,
endAngle: datum.endAngle,
innerRadius: 100,
outerRadius: maxR,
fill: params.colorScale.scale(datum.name)
};
},
hover: {
fill: 'red'
}
}
}
]
};
const vGrammarView = new View({
autoFit: true,
container: 'chart',
hover: true
});
vGrammarView.parseSpec(spec);
vGrammarView.runAsync();
```
##
[詳細なチュートリアルとデモ](https://visactor.io/vgrammar)
# 関連リンク
- [公式サイト](https://visactor.io/vgrammar)
# エコシステム
| プロジェクト | 説明 |
| ----------------------------------------------------------- | -------------------------------------------------------------------------------------- |
| [VChart](https://visactor.io/vchart) | [VisActor/VGrammar](https://visactor.io/vgrammar)に基づくチャートライブラリ |
| [Reactコンポーネントライブラリ](https://visactor.io/react-vchart) | [VisActor/VChart](https://visactor.io/vchart)に基づくReactチャートコンポーネントライブラリ |
| [AI生成コンポーネント](https://visactor.io/ai-vchart) | AI生成のチャートコンポーネント |
# 貢献
貢献したい場合は、まず[行動規範](./CODE_OF_CONDUCT.md)と[ガイド](./CONTRIBUTING.md)をお読みください。
小さな流れが大きな川や海に集まります！
# ライセンス
[MITライセンス](./LICENSE)