{"id":19978135,"url":"https://github.com/visactor/vgrammar","last_synced_at":"2025-10-27T23:36:54.943Z","repository":{"id":173905394,"uuid":"649506002","full_name":"VisActor/VGrammar","owner":"VisActor","description":"VGrammar is a kind of grammar of data visualization","archived":false,"fork":false,"pushed_at":"2025-03-27T09:27:42.000Z","size":23602,"stargazers_count":96,"open_issues_count":10,"forks_count":18,"subscribers_count":18,"default_branch":"develop","last_synced_at":"2025-03-29T19:01:35.405Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/VisActor.png","metadata":{"files":{"readme":"README.ja-JP.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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}},"created_at":"2023-06-05T02:54:52.000Z","updated_at":"2025-03-28T16:18:40.000Z","dependencies_parsed_at":null,"dependency_job_id":"9dfed2f0-335e-4db0-9932-0cb79b1ab9b2","html_url":"https://github.com/VisActor/VGrammar","commit_stats":null,"previous_names":["visactor/vgrammar"],"tags_count":140,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VisActor%2FVGrammar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VisActor%2FVGrammar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VisActor%2FVGrammar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VisActor%2FVGrammar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/VisActor","download_url":"https://codeload.github.com/VisActor/VGrammar/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247393552,"owners_count":20931811,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":[],"created_at":"2024-11-13T03:30:55.604Z","updated_at":"2025-10-27T23:36:49.908Z","avatar_url":"https://github.com/VisActor.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://github.com/VisActor#gh-light-mode-only\" target=\"_blank\"\u003e\n    \u003cimg alt=\"VisActor Logo\" width=\"200\" src=\"https://github.com/VisActor/.github/blob/main/profile/logo_500_200_light.svg\"/\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/VisActor#gh-dark-mode-only\" target=\"_blank\"\u003e\n    \u003cimg alt=\"VisActor Logo\" width=\"200\" src=\"https://github.com/VisActor/.github/blob/main/profile/logo_500_200_dark.svg\"/\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003ch1\u003eVGrammar\u003c/h1\u003e\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n\nVGrammarは、チャートを生成するだけでなく、データビジュアライゼーションツールも提供します。\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.visactor.io/vgrammar\"\u003e紹介\u003c/a\u003e •\n  \u003ca href=\"https://www.visactor.io/vgrammar/example\"\u003eデモ\u003c/a\u003e •\n  \u003ca href=\"https://www.visactor.io/vgrammar/guide/guides/quick-start\"\u003eチュートリアル\u003c/a\u003e •\n  \u003ca href=\"https://www.visactor.io/vgrammar/api/API/View\"\u003eAPI\u003c/a\u003e•\n  \u003ca href=\"https://www.visactor.io/vgrammar/option/\"\u003eオプション\u003c/a\u003e\n\u003c/p\u003e\n\n![image test](https://github.com/visactor/vgrammar/actions/workflows/bug-server.yml/badge.svg?event=push)\n![unit test](https://github.com/visactor/vgrammar/actions/workflows/unit-test.yml/badge.svg?event=push)\n[![npm Version](https://img.shields.io/npm/v/@visactor/vgrammar.svg)](https://www.npmjs.com/package/@visactor/vgrammar)\n[![npm Download](https://img.shields.io/npm/dm/@visactor/vgrammar.svg)](https://www.npmjs.com/package/@visactor/vgrammar)\n[![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/visactor/vgrammar/blob/main/LICENSE)\n\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n[English](./README.md) | [简体中文](./README.zh-CN.md) | 日本語\n\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n（ビデオ）\n\n\u003c/div\u003e\n\n# 紹介\n\nVGrammarは、ビジュアルレンダリングエンジン[VRender](https://github.com/VisActor/VRender)に基づくビジュアルグラマライブラリです。主な機能は以下の通りです：\n\n1. デフォルトで使いやすい：VGrammarは簡潔な構文、包括的なインターフェース、豊富なコンポーネントライブラリ、簡素化された開発プロセスを特徴としています。\n2. 機能が豊富：VGrammarは、チャート定義、アニメーションの配置、芸術的表現など、さまざまなニーズを完全にカバーする広範な機能を提供します。\n3. 柔軟で拡張可能：VGrammarは、カスタムレンダリング、データマッピング、自動レイアウトなど、柔軟な拡張オプションを提供し、簡単に拡張できます。\n\n# リポジトリの紹介\n\nこのリポジトリには以下のパッケージが含まれています：\n\n1. VGrammar: VGrammarのメインパッケージ\n\n# 使用方法\n\n## インストール\n\n[npm package](https://www.npmjs.com/package/@visactor/vgrammar)\n\n```bash\n// npm\nnpm install @visactor/vgrammar\n\n// yarn\nyarn add @visactor/vgrammar\n```\n\n## クイックスタート\n\n```javascript\nimport { View } from '@visactor/vgrammar';\n\nconst spec = {\n  data: [\n    {\n      id: 'table',\n      values: [\n        {\n          value: 3676,\n          name: ' ~ 29'\n        },\n        {\n          value: 3872,\n          name: '30 ~ 39'\n        },\n        {\n          value: 1668,\n          name: '40 ~ 49'\n        },\n        {\n          value: 610,\n          name: '50 ~'\n        }\n      ]\n    },\n    {\n      id: 'pie',\n      source: 'table',\n      transform: [\n        {\n          type: 'pie',\n          field: 'value',\n          asStartAngle: 'startAngle',\n          asEndAngle: 'endAngle'\n        }\n      ]\n    }\n  ],\n\n  scales: [\n    {\n      id: 'colorScale',\n      type: 'ordinal',\n      domain: { data: 'table', field: 'name' },\n      range: [\n        '#6690F2',\n        '#70D6A3',\n        '#B4E6E2',\n        '#63B5FC',\n        '#FF8F62',\n        '#FFDC83',\n        '#BCC5FD',\n        '#A29BFE',\n        '#63C4C7',\n        '#F68484'\n      ]\n    }\n  ],\n\n  marks: [\n    {\n      type: 'arc',\n      from: { data: 'pie' },\n      dependency: ['viewBox', 'colorScale'],\n      encode: {\n        update: (datum, element, params) =\u003e {\n          const viewBox = params.viewBox;\n          const maxR = Math.min(viewBox.width() / 2, viewBox.height() / 2);\n          return {\n            x: viewBox.x1 + viewBox.width() / 2,\n            y: viewBox.y1 + viewBox.height() / 2,\n            startAngle: datum.startAngle,\n            endAngle: datum.endAngle,\n            innerRadius: 100,\n            outerRadius: maxR,\n            fill: params.colorScale.scale(datum.name)\n          };\n        },\n        hover: {\n          fill: 'red'\n        }\n      }\n    }\n  ]\n};\n\nconst vGrammarView = new View({\n  autoFit: true,\n  container: 'chart',\n  hover: true\n});\nvGrammarView.parseSpec(spec);\n\nvGrammarView.runAsync();\n```\n\n##\n\n[詳細なチュートリアルとデモ](https://visactor.io/vgrammar)\n\n# 関連リンク\n\n- [公式サイト](https://visactor.io/vgrammar)\n\n# エコシステム\n\n| プロジェクト                                                     | 説明                                                                            |\n| ----------------------------------------------------------- | -------------------------------------------------------------------------------------- |\n| [VChart](https://visactor.io/vchart)                        | [VisActor/VGrammar](https://visactor.io/vgrammar)に基づくチャートライブラリ                |\n| [Reactコンポーネントライブラリ](https://visactor.io/react-vchart) | [VisActor/VChart](https://visactor.io/vchart)に基づくReactチャートコンポーネントライブラリ |\n| [AI生成コンポーネント](https://visactor.io/ai-vchart)    | AI生成のチャートコンポーネント                                                          |\n\n# 貢献\n\n貢献したい場合は、まず[行動規範](./CODE_OF_CONDUCT.md)と[ガイド](./CONTRIBUTING.md)をお読みください。\n\n小さな流れが大きな川や海に集まります！\n\n\u003ca href=\"https://github.com/visactor/vgrammar/graphs/contributors\"\u003e\u003cimg src=\"https://contrib.rocks/image?repo=visactor/vgrammar\" /\u003e\u003c/a\u003e\n\n# ライセンス\n\n[MITライセンス](./LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvisactor%2Fvgrammar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvisactor%2Fvgrammar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvisactor%2Fvgrammar/lists"}