{"id":15012320,"url":"https://github.com/microsoft/vistalk","last_synced_at":"2025-10-19T13:32:25.566Z","repository":{"id":62623934,"uuid":"507592244","full_name":"microsoft/VisTalk","owner":"microsoft","description":"A JavaScript toolkit for Natural Language-based Visualization Authoring","archived":false,"fork":false,"pushed_at":"2023-10-07T07:50:30.000Z","size":13797,"stargazers_count":38,"open_issues_count":8,"forks_count":5,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-01-30T11:33:52.916Z","etag":null,"topics":["nlp","nx","reactjs","tensorflowjs","transformer","vega","vega-lite","visualization"],"latest_commit_sha":null,"homepage":"https://microsoft.github.io/VisTalk/","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/microsoft.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":"SUPPORT.md","governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-06-26T14:12:28.000Z","updated_at":"2024-04-22T16:15:48.000Z","dependencies_parsed_at":"2024-09-20T07:02:11.802Z","dependency_job_id":"e37f3f50-0ab6-4b25-8a4f-656f65349736","html_url":"https://github.com/microsoft/VisTalk","commit_stats":{"total_commits":58,"total_committers":4,"mean_commits":14.5,"dds":0.4482758620689655,"last_synced_commit":"3833d644f8b0020f34ba56becf22f8e49df6821b"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/microsoft%2FVisTalk","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/microsoft%2FVisTalk/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/microsoft%2FVisTalk/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/microsoft%2FVisTalk/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/microsoft","download_url":"https://codeload.github.com/microsoft/VisTalk/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":237143401,"owners_count":19262194,"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":["nlp","nx","reactjs","tensorflowjs","transformer","vega","vega-lite","visualization"],"created_at":"2024-09-24T19:42:25.970Z","updated_at":"2025-10-19T13:32:19.485Z","avatar_url":"https://github.com/microsoft.png","language":"TypeScript","readme":"\u003cimg src=\"https://microsoft.github.io/VisTalk/vistalk-icon.svg\" width=\"64px\" align=\"left\" style=\"margin-right: 10px;\" /\u003e Vis Talk: A JavaScript toolkit for Natural Language-based Visualization Authoring\n====\n\n[![npm version](https://img.shields.io/npm/v/@vis-talk/vega-builder.svg?color=0084ff)](https://www.npmjs.com/package/@vis-talk/vega-builder)\n[![DOI:10.1109/TVCG.2022.3209357](https://zenodo.org/badge/DOI/10.1109/TVCG.2022.3209357.svg)](https://doi.org/10.1109/TVCG.2022.3209357)\n[![arxiv badge](https://img.shields.io/badge/arXiv-2208.10947-red)](https://arxiv.org/abs/2208.10947)\n\n\n**Vis Talk** is a JavaScript library for developers create visualization using natural language.\n\u0026nbsp;\n\n## Try it out\nYou can try the [Playground Web App](https://microsoft.github.io/VisTalk/) or fork example [Observable Notebook](https://observablehq.com/@zhitao/vistalk)\n\n#### Playground Demo:\n![vis-talk-playground](https://user-images.githubusercontent.com/822440/200222498-11df1cd5-8426-4086-803d-50b7028032a9.gif)\n\n## For Developers\n### Installing\n\nInstall using yarn:\n```shell\n$ yarn add @vis-talk/vega-builder\n```\nor install using npm:\n```shell\n$ npm install @vis-talk/vega-builder\n```\n\n## Build a simple react sample app\n\n```\n$ npx create-react-app my-vis-app --template typescript\n$ cd my-vis-app\n$ npm install @vis-talk/vega-builder react-vega\n```\n\nModify _src/App.tsx_ to:\n\n```tsx\nimport React from 'react';\nimport { createBuilder } from \"@vis-talk/vega-builder\";\nimport { VegaLite } from \"react-vega\";\n\nfunction App() {\n  const table = [\n    { Brand: \"BrandA\", Category: \"SUV\", Sales: 40 },\n    { Brand: \"BrandB\", Category: \"SUV\", Sales: 20 },\n    { Brand: \"BrandC\", Category: \"SUV\", Sales: 30 },\n    { Brand: \"BrandD\", Category: \"SUV\", Sales: 10 },\n    { Brand: \"BrandA\", Category: \"Midsize\", Sales: 40 },\n    { Brand: \"BrandB\", Category: \"Midsize\", Sales: 10 },\n    { Brand: \"BrandC\", Category: \"Midsize\", Sales: 20 },\n    { Brand: \"BrandD\", Category: \"Midsize\", Sales: 5 },\n  ];\n  \n  const builder = createBuilder(table);\n  \n  builder.setInput([\n    \"total sales by brand\",\n    \"highlight midsize in orange\",\n    \"add line in 60 in red\",\n    \"add rect from 12 to 37 in green\"]);\n    \n  const spec = builder.build({ name: \"table\" });\n\n  return (\n    \u003cdiv className=\"App\"\u003e\n      \u003cVegaLite spec={spec} data={{ table }} /\u003e\n    \u003c/div\u003e\n  );\n}\n\nexport default App;\n```\n\nstart the app:\n\n```shell\n$ npm start\n```\n\u003cimg src=\"https://microsoft.github.io/VisTalk/sample-app.png\" width=\"400px\" alt=\"sample app\" /\u003e\n\n## API Reference\n\n### createBuilder(dataSource)\n\nCreate a new vega visual builder by load your data table.\n```ts\nfunction createBuilder(dataSource: DataSource): VegaBuilder;\n\n// data source is array of object, with optional column name list.\nexport interface DataSource extends Array\u003cobject\u003e {\n  // List of column names.\n  columns?: Array\u003cstring\u003e;\n}\n```\nFor example, you can create a session using inline records data like:\n```ts\nconst builder = createBuilder([\n  { Brand:'BrandA', Category: 'SUV', Sales: 100 },\n  { Brand:'BrandB', Category: 'SUV', Sales: 200 },\n  { Brand:'BrandC', Category: 'SUV', Sales: 300 }\n])\n```\n\n\n### session.setInput(input)\nThis method allow you specify the natural language input using a single block of text or a multi-line string arry\n```ts\nclass VegaBuilder {\n  // Provide your natural language input\n  public setInput(lines: string[]);\n  ...\n}\n```\nFor example:\n```ts\nbuilder.setInput(['total sales by brand', 'sort it'])\n```\n\n#### builder.build\nGenerate vega-lite spec as a javascript JSON object (Type defined in Vega-Lite package).\n```ts\nlet spec = builder.build({name: 'table'});\n```\n\n### Render Vega Chart:\n```shell\n$ yarn add vega vega-lite react-vega\n```\nor \n```shell\n$ npm install vega vega-lite react-vega\n```\n\n```jsx\nimport { VegaLite } from \"react-vega\";\n\n\u003cVegaLite spec={spec} data={{table: rows}} /\u003e\n```\n![Chart 1](https://microsoft.github.io/VisTalk/vistalk.svg \"Chart 1\")\n### More examples - donut chart\n```js\nbuilder.setInput([\n  'sales by brand as donut chart'\n])\n```\n![Chart 2](https://microsoft.github.io/VisTalk/vistalk-donut.svg \"Chart 2\")\n### More examples - column chart with highlights\n```js\nbuilder.setInput([\n  'sales by brand as column chart',\n  'sort desc',\n  'highlight top 2 in green',\n  'add line 100 in red',\n  'hide grid',\n  'make data point wider'\n])\n```\n![Chart 3](https://microsoft.github.io/VisTalk/vistalk-highlight.svg \"Chart 3\")\n\n# Build from source code\n\n## Enlist code\n```\n$ git clone https://github.com/microsoft/VisTalk.git\n$ cd VisTalk\n```\n\n## Build \u0026 Run\n```\n$ yarn\n$ yarn build\n$ yarn start\n```\nThen open browser and navigate to http://localhost:4200/\n\n## Run Unit Tests\n```shell\n$ yarn test\n```\n\n## Run E2E Tests\n```shell\n$ yarn e2e\n```\nThen you can explore captured screenshots and videos from \u003cproj\u003e/dist/cypress/apps/playground-e2e\n\n## Build package\n```shell\n$ yarn package\n```\n\n# Train deep learning model\n\n## Setup miniconda\nInstall [Miniconda](https://docs.conda.io/en/latest/miniconda.html)\n\n## Setup Environment\n\ncpu:\n```\n$ conda create -n vis-talk python=3.9.13 tensorflow=2.5.0  \n$ conda activate vis-talk\n$ pip install tensorflow-addons==0.13 tensorflowjs==3.18 seqeval==1.2.2\n```\n\ngpu:\n```\n$ conda create -n vis-talk-gpu tensorflow-gpu=2.1.0 python=3.6.12 cudatoolkit=10.1\n$ conda activate vis-talk-gpu\n$ pip install tensorflow-addons==0.9.1 tensorflowjs==3.8 seqeval==1.2.2\n```\n\n## Train Model\n```shell\n$ yarn train\n```\n\nManually replace the generated _model-data.ts_ to libs/interpreter/src/lib/model-data.ts\n\n\u0026nbsp;\n\n# Feedback\nIf you have any questions, feel free to [open an issue](https://github.com/microsoft/VisTalk/issues/new/choose) or contact us: [Vis Talk Team](mailto:vistalk@microsoft.com).\n\n\u0026nbsp;\n\n# Citation\n\nIf you use VisTalk in your research, please cite as follows:\n\n\u003e Y. Wang et al., \"Towards Natural Language-Based Visualization Authoring,\" in IEEE Transactions on Visualization and Computer Graphics, 2022, doi: 10.1109/TVCG.2022.3209357.\n\n\u0026nbsp;\n\n## License\nThis project is licensed under the [MIT License](LICENSE.txt).\n\n## Contributing\n\nThis project welcomes contributions and suggestions.  Most contributions require you to agree to a\nContributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us\nthe rights to use your contribution. For details, visit https://cla.opensource.microsoft.com.\n\nWhen you submit a pull request, a CLA bot will automatically determine whether you need to provide\na CLA and decorate the PR appropriately (e.g., status check, comment). Simply follow the instructions\nprovided by the bot. You will only need to do this once across all repos using our CLA.\n\nThis project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/).\nFor more information see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or\ncontact [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additional questions or comments.\n\n\n## Trademarks\n\nThis project may contain trademarks or logos for projects, products, or services. Authorized use of Microsoft \ntrademarks or logos is subject to and must follow \n[Microsoft's Trademark \u0026 Brand Guidelines](https://www.microsoft.com/en-us/legal/intellectualproperty/trademarks/usage/general).\nUse of Microsoft trademarks or logos in modified versions of this project must not cause confusion or imply Microsoft sponsorship.\nAny use of third-party trademarks or logos are subject to those third-party's policies.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmicrosoft%2Fvistalk","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmicrosoft%2Fvistalk","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmicrosoft%2Fvistalk/lists"}