Awesome
<div align="center"> <a href="https://github.com/VisActor#gh-light-mode-only" target="_blank"> <img alt="VisActor Logo" width="200" src="https://github.com/VisActor/.github/blob/main/profile/logo_500_200_light.svg"/> </a> <a href="https://github.com/VisActor#gh-dark-mode-only" target="_blank"> <img alt="VisActor Logo" width="200" src="https://github.com/VisActor/.github/blob/main/profile/logo_500_200_dark.svg"/> </a> </div> <div align="center"> <h1>VGrammar</h1> </div> <div align="center">VGrammar, not only generate charts, but also provide data visualization tools.
<p align="center"> <a href="https://www.visactor.io/vgrammar">Introduction</a> • <a href="https://www.visactor.io/vgrammar/example">Demo</a> • <a href="https://www.visactor.io/vgrammar/guide/guides/quick-start">Tutorial</a> • <a href="https://www.visactor.io/vgrammar/api/API/View">API</a>• <a href="https://www.visactor.io/vgrammar/option/">Option</a> </p> </div> <div align="center">English| 简体中文
</div> <div align="center">(video)
</div>Introduction
VGrammar is a visual grammar library based on visual rendering engine VRender. The core capabilities are as follows:
- Easy to Use by Default: VGrammar features a concise syntax, comprehensive interface, rich component library, and simplified development process.
- Rich in Capabilities: VGrammar provides extensive capabilities for chart definition, animation arrangement, artistic expression, and complete coverage of various needs.
- Flexible and Extensible: VGrammar offers flexible extension options, including custom rendering of graphical elements, data mapping, automatic layout, and effortless expansion possibilities.
Repo Intro
This repository includes the following packages:
- VGrammar: The main package of VGrammar
Usage
Installation
// npm
npm install @visactor/vgrammar
// yarn
yarn add @visactor/vgrammar
Quick Start
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();
More demos and detailed tutorials
Related Links
Ecosystem
Project | Description |
---|---|
VChart | A charts lib based on VisActor/VGrammar |
React Component Library | A React chart component library based on VisActor/VChart |
AI-generated Components | AI-generated chart component. |
Contribution
If you would like to contribute, please read the Code of Conduct and Guide first。
Small streams converge to make great rivers and seas!
<a href="https://github.com/visactor/vgrammar/graphs/contributors"><img src="https://contrib.rocks/image?repo=visactor/vgrammar" /></a>