{"id":15282076,"url":"https://github.com/visa/visa-chart-components","last_synced_at":"2025-05-16T03:05:28.515Z","repository":{"id":40807937,"uuid":"311829813","full_name":"visa/visa-chart-components","owner":"visa","description":"Visa Chart Components (VCC) is an accessibility focused, framework agnostic set of data experience design systems components for the web. VCC attempts to provide a toolset to enable developers to build equal data experiences for everyone, everywhere.","archived":false,"fork":false,"pushed_at":"2024-11-15T18:02:48.000Z","size":39950,"stargazers_count":169,"open_issues_count":3,"forks_count":35,"subscribers_count":24,"default_branch":"main","last_synced_at":"2025-05-09T04:39:13.850Z","etag":null,"topics":["accessibility","charts","d3","data-experience","data-visualization","graphs","stencil","visualization"],"latest_commit_sha":null,"homepage":"https://visa.github.io/visa-chart-components/","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/visa.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","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}},"created_at":"2020-11-11T01:29:46.000Z","updated_at":"2025-05-05T16:57:24.000Z","dependencies_parsed_at":"2024-11-07T00:37:04.783Z","dependency_job_id":"1922ebc1-b037-4926-8967-347f9fecd75a","html_url":"https://github.com/visa/visa-chart-components","commit_stats":{"total_commits":242,"total_committers":6,"mean_commits":"40.333333333333336","dds":0.4049586776859504,"last_synced_commit":"bd031cb587770f3c0fffd99a9abfe17840ff6257"},"previous_names":[],"tags_count":507,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/visa%2Fvisa-chart-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/visa%2Fvisa-chart-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/visa%2Fvisa-chart-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/visa%2Fvisa-chart-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/visa","download_url":"https://codeload.github.com/visa/visa-chart-components/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254459088,"owners_count":22074605,"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":["accessibility","charts","d3","data-experience","data-visualization","graphs","stencil","visualization"],"created_at":"2024-09-30T14:18:35.851Z","updated_at":"2025-05-16T03:05:23.506Z","avatar_url":"https://github.com/visa.png","language":"TypeScript","readme":"# Visa Chart Components\n\n![Image showing three examples of Visa Chart Components for demonstration purposes only.](docs/vcc-components.png 'clustered bar chart component')\n\n**Visa Chart Components (VCC)** is an accessibility focused, framework agnostic set of data experience design systems components for the web. VCC attempts to provide a toolset to enable developers to build equal data experiences for everyone, everywhere.\n\nVisa Chart Components (VCC) is provided under the [MIT license](LICENSE).\n\n\u003chr\u003e\n\n### Installation Process:\n\nTo use VCC in your projects run `yarn add @visa/charts`, or you can also install a single component by running `yarn add @visa/bar-chart`. We recommend leveraging bundles if you are going to install three (3) or more specific components for your project.\n\nWhile we do deliver React (`@visa/charts-react`) and Angular (`@visa/charts-angular`) bundles, VCC components are compiled to standard web components within (`@visa/charts`), leveraging [Stencil.js](https://stenciljs.com/) and can be reused directly in many web environments and/or frameworks.\n\n#### Bundles\n\n- [@visa/charts](packages/charts) (web components)\n- [@visa/charts-react](packages/charts-react) (react)\n- [@visa/charts-angular](packages/charts-angular) (angular)\n- [@visa/charts-R](packages/charts-R) (R), `visachartR` function in R\n- [@visa/charts-python](packages/charts-python) (Python), `pyvisacharts` package in Python\n- [@visa/charts-figma](packages/charts-figma) (Figma), `Visa Chart Components` plugin for Figma\n\n#### Components with `Ready` status\n\n- [@visa/bar-chart](packages/bar-chart)\n- [@visa/clustered-bar-chart](packages/clustered-bar-chart)\n- [@visa/stacked-bar-chart](packages/stacked-bar-chart)\n- [@visa/line-chart](packages/line-chart)\n- [@visa/pie-chart](packages/pie-chart)\n- [@visa/scatter-plot](packages/scatter-plot)\n- [@visa/heat-map](packages/heat-map)\n- [@visa/circle-packing](packages/circle-packing)\n- [@visa/parallel-plot](packages/parallel-plot)\n- [@visa/dumbbell-plot](packages/dumbbell-plot)\n- [@visa/world-map](packages/world-map)\n- [@visa/alluvial-diagram](packages/alluvial-diagram)\n- [@visa/visa-charts-data-table](packages/data-table)\n- [@visa/keyboard-instructions](packages/keyboard-instructions)\n\n\u003c!-- #### Components with `Development` status --\u003e\n\n#### Our utilities can also be leveraged directly\n\n- [@visa/visa-charts-utils](packages/utils)\n- [@visa/visa-charts-utils-dev](packages/utils-dev)\n\n\u003chr\u003e\n\n### Development\n\nVCC is built as a monorepo containing a set of packages. These packages include specific chart components (e.g., `@visa/bar-chart`), our utilities (e.g., `@visa/visa-charts-utils`) as well as component bundles (e.g., `@visa/charts` or `@visa/charts-react`).\n\n##### Steps to get up and running for development\n\n_note: the initial install and build process can take some time._\n\n- Clone the repo\n- run `yarn install`\n- run `yarn dev --i` to install the monorepo\n- run `yarn dev --b` to build the packages across the monorepo\n- You can also run `yarn dev --bR` to build \u0026 copy the @visa/charts bundle to our R wrapper.\n\n\u003cbr\u003e\n\n##### Single component development\n\nFor development work on a single component, we launch local stencil applications, which allow for faster development iterations and features like hot reloading. To run a single component development environment run the below command. _Note: these local/dev applications are not included in our builds._\n\n`yarn dev --ibsw=@visa/\u003ccomponent-name\u003e`\n\nThe switches in the command relate to:\n\n- `i` = install the component\n- `b` = build the component\n- `sw` = start watching the component\n\nYou can run `--ibsw`, `--bsw`, or `--sw` if you need to. You can also build packages together (once installed) using commands like:\n\n`yarn build --scope=@visa/visa-charts-utils \u0026\u0026 yarn build --scope=@visa/bar-chart`\n\nThis can helpful if you are making changes to dependencies of the chart component, for example, our utilities package.\n\n\u003cbr\u003e\n\n##### Running unit tests\n\nWe have built extensive unit testing out for some of our components and are working towards propagating this across the rest. To run unit tests the command is:\n\n- test all components at once: `yarn dev --t`\n- test a specific component: `yarn dev --test=@visa/\u003ccomponent-name\u003e`\n\nAlso, in some cases, component snapshots may need to be updated after changes have been implemented on components themselves (take caution when updating testing snapshots). In this situation, run the update snapshot command as follows:\n\n`yarn dev --updateSnapshot=@visa/\u003ccomponent-name\u003e`\n\nOnce you have finished running your tests you can leverage the below scripts to evaluate them:\n\n- `yarn combine-test-results` - This script will combine all tests results across the monorepo, both coverage and test summary/failures.\n- `yarn compare-test-results` - This script will do a snapshot test of your test results to the current snapshot.\n- `yarn update-test-results` - This script will update the combined test snapshot, useful in situations when you have added more tests, cleaned up tests or enabled new components.\n\nWe use [vscode](https://code.visualstudio.com/) as our development environment, you can also leverage the built in debugging capability in this tool to evaluate the unit tests themselves.\n\n\u003cbr\u003e\n\n##### Running components through yarn audit / dependency check\n\nWe enable a repo wide scan using [yarn audit](https://classic.yarnpkg.com/en/docs/cli/audit/) to check for known dependency vulnerabilities. To run the audit command(s):\n\n- all components: `yarn dev --a=ALL`\n- OR, component specific: `yarn dev --a=@visa/\u003ccomponent-name\u003e`\n\nOnce you have finished running your audit you can leverage the below scripts to evaluate the results:\n\n- `yarn combine-audit-results` - This script will combine all audit results across the monorepo.\n- `yarn compare-audit-results` - This script will do a snapshot test of your audit results to the current snapshot.\n- `yarn update-audit-results` - This script will update the combined audit snapshot, useful in situations when you have added more dependencies, cleaned up dependencies or enabled new components.\n\n\u003cbr\u003e\n\n##### Cleaning the repo\n\n_caution: this will require you to re-install the entire monorepo, which can take some time_\n\nTo clean repo we have clean command with options\n\n`yarn dev --c=\u003coptions\u003e`\n\nHere, `\u003coptions\u003e` can be\n\n`ALL`-- deletes all lock files, node_modules and build folders.\n\n`LOCK`-- deletes only lock files.\n\n`BUILD`-- deletes only build folders and files.\n\n`NODE`-- deletes only node_modules folder across repo.\n\n\u003chr\u003e\n\n#### Credits\n\nYou can find license information for all dependencies included in our build [here](packages/utils/src/utils/license.ts). Below is a list of key dependencies.\n\n- [d3.js](https://d3js.org/)\n- [stencil.js](https://stenciljs.com/)\n- [d3-svg-annotation](https://d3-annotation.susielu.com/)\n- [numeral.js](http://numeraljs.com/)\n- [node-uuid](https://github.com/uuidjs/uuid)\n- [vega-label](https://github.com/vega/vega-label)\n- [storybook](https://storybook.js.org/)\n- [htmlwidgets](https://www.htmlwidgets.org/)\n- [widget-cookiecutter](https://github.com/jupyter-widgets/widget-cookiecutter)\n- [figma plugin api](https://www.figma.com/plugin-docs/api/api-reference)\n\nThis project was/is built with tireless efforts from:\n\n- Chris DeMartini ([@visa](https://github.com/chris-demartini) / [personal](https://github.com/demartsc))\n- David Kutas ([@visa](https://github.com/david-kutas))\n- Lilach Manheim ([personal](https://github.com/lmanheim))\n- Tanvi Modi ([@visa](https://github.com/tan-modi))\n- Stephanie Modica ([personal](https://github.com/stephmod))\n- Jaime Tanner ([personal](https://github.com/tannerjaime))\n- Frank Elavsky ([personal](https://github.com/frankelavsky))\n- Tica Lin ([personal](https://github.com/ticahere))\n- Basavaraj Kabbure ([personal](https://github.com/basavarajk))\n- Akhil Gupta ([personal](https://github.com/akhil9tiet))\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvisa%2Fvisa-chart-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvisa%2Fvisa-chart-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvisa%2Fvisa-chart-components/lists"}