{"id":13401192,"url":"https://github.com/airbnb/visx","last_synced_at":"2025-05-12T15:13:04.537Z","repository":{"id":37438241,"uuid":"85095608","full_name":"airbnb/visx","owner":"airbnb","description":"🐯 visx | visualization components","archived":false,"fork":false,"pushed_at":"2025-01-09T20:09:46.000Z","size":16402,"stargazers_count":19986,"open_issues_count":161,"forks_count":734,"subscribers_count":137,"default_branch":"master","last_synced_at":"2025-05-05T11:14:10.821Z","etag":null,"topics":["chart","d3","data-visualization","react","svg","visualization","visx","vx"],"latest_commit_sha":null,"homepage":"https://airbnb.io/visx","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/airbnb.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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,"zenodo":null}},"created_at":"2017-03-15T16:25:41.000Z","updated_at":"2025-05-05T10:30:28.000Z","dependencies_parsed_at":"2024-01-13T03:34:44.988Z","dependency_job_id":"161a1c90-d798-4f32-a927-160a0a811084","html_url":"https://github.com/airbnb/visx","commit_stats":{"total_commits":2723,"total_committers":163,"mean_commits":16.70552147239264,"dds":0.821520381931693,"last_synced_commit":"6a1417752737ffc1f6dd0d66092e54b8904c3d4f"},"previous_names":["hshoff/vx"],"tags_count":296,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/airbnb%2Fvisx","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/airbnb%2Fvisx/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/airbnb%2Fvisx/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/airbnb%2Fvisx/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/airbnb","download_url":"https://codeload.github.com/airbnb/visx/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252498804,"owners_count":21757869,"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":["chart","d3","data-visualization","react","svg","visualization","visx","vx"],"created_at":"2024-07-30T19:00:59.675Z","updated_at":"2025-05-05T12:38:26.823Z","avatar_url":"https://github.com/airbnb.png","language":"TypeScript","readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./assets/visx-geometry.png\" /\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca title=\"npm version\" href=\"https://www.npmjs.com/~visx\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/@visx/demo.svg?style=flat-square\" /\u003e\n  \u003c/a\u003e\n  \u003ca title=\"build status\" href=\"https://travis-ci.org/airbnb/visx\"\u003e\n    \u003cimg src=\"https://travis-ci.org/airbnb/visx.svg?branch=master\" /\u003e\n  \u003c/a\u003e\n  \u003ca href='https://coveralls.io/github/airbnb/visx?branch=master'\u003e\n    \u003cimg src='https://coveralls.io/repos/github/airbnb/visx/badge.svg?branch=master' alt='Coverage Status' /\u003e\n  \u003c/a\u003e\n  \u003ca title=\"@visx/shape npm downloads\" href=\"https://www.npmjs.com/package/@visx/shape\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/dm/@visx/shape.svg?style=flat-square\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://app.fossa.io/projects/git%2Bhttps%3A%2F%2Fgithub.com%2Fhshoff%2Fvx?ref=badge_shield\" alt=\"FOSSA Status\"\u003e     \u003cimg src=\"https://app.fossa.io/api/projects/git%2Bhttps%3A%2F%2Fgithub.com%2Fhshoff%2Fvx.svg?type=shield\"/\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://lernajs.io/\" alt=\"lerna\"\u003e\n     \u003cimg src=\"https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg\"/\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n### visx\n\nvisx is a collection of reusable low-level visualization components. visx combines the power of d3\nto generate your visualization with the benefits of react for updating the DOM.\n\n\u003cbr /\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cstrong\u003e\n    \u003ca href=\"https://airbnb.io/visx\"\u003eDocs\u003c/a\u003e\n  \u003c/strong\u003e\n  \u0026bull;\n  \u003cstrong\u003e\n    \u003ca href=\"https://airbnb.io/visx/gallery\"\u003eGallery\u003c/a\u003e\n  \u003c/strong\u003e\n  \u0026bull;\n  \u003cstrong\u003e\n    \u003ca href=\"https://medium.com/vx-code/getting-started-with-vx-1756bb661410\"\u003eBlog\u003c/a\u003e\n  \u003c/strong\u003e\n  \u0026bull;\n  \u003cstrong\u003e\n    \u003ca href=\"https://github.com/airbnb/visx/discussions\"\u003eDiscussions\u003c/a\u003e\n  \u003c/strong\u003e\n  \u0026bull;\n  \u003cstrong\u003e\n    \u003ca href=\"./CHANGELOG.md\"\u003eChangelog\u003c/a\u003e\n  \u003c/strong\u003e\n  \u0026bull;\n  \u003cstrong\u003e\n    \u003ca href=\"https://medium.com/vx-code/getting-started-with-vx-1756bb661410\"\u003eGetting started tutorial\u003c/a\u003e\n  \u003c/strong\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://airbnb.io/visx/gallery\"\u003e\n    \u003cimg src=\"./assets/visx-gallery.png\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n## Usage\n\n[![Remix on Glitch](https://cdn.glitch.com/2703baf2-b643-4da7-ab91-7ee2a2d00b5b%2Fremix-button.svg)](https://glitch.com/edit/#!/remix/kind-modem)\n\nLet's make a simple bar graph.\n\nFirst we'll install the relevant packages:\n\n```bash\nnpm install --save @visx/mock-data @visx/group @visx/shape @visx/scale\n```\n\n\u003cimg src=\"./assets/simplebar.png\" height=\"150\" /\u003e\n\n```javascript\nimport React from 'react';\nimport { letterFrequency } from '@visx/mock-data';\nimport { Group } from '@visx/group';\nimport { Bar } from '@visx/shape';\nimport { scaleLinear, scaleBand } from '@visx/scale';\n\n// We'll use some mock data from `@visx/mock-data` for this.\nconst data = letterFrequency;\n\n// Define the graph dimensions and margins\nconst width = 500;\nconst height = 500;\nconst margin = { top: 20, bottom: 20, left: 20, right: 20 };\n\n// Then we'll create some bounds\nconst xMax = width - margin.left - margin.right;\nconst yMax = height - margin.top - margin.bottom;\n\n// We'll make some helpers to get at the data we want\nconst x = d =\u003e d.letter;\nconst y = d =\u003e +d.frequency * 100;\n\n// And then scale the graph by our data\nconst xScale = scaleBand({\n  range: [0, xMax],\n  round: true,\n  domain: data.map(x),\n  padding: 0.4,\n});\nconst yScale = scaleLinear({\n  range: [yMax, 0],\n  round: true,\n  domain: [0, Math.max(...data.map(y))],\n});\n\n// Compose together the scale and accessor functions to get point functions\nconst compose = (scale, accessor) =\u003e data =\u003e scale(accessor(data));\nconst xPoint = compose(xScale, x);\nconst yPoint = compose(yScale, y);\n\n// Finally we'll embed it all in an SVG\nfunction BarGraph(props) {\n  return (\n    \u003csvg width={width} height={height}\u003e\n      {data.map((d, i) =\u003e {\n        const barHeight = yMax - yPoint(d);\n        return (\n          \u003cGroup key={`bar-${i}`}\u003e\n            \u003cBar\n              x={xPoint(d)}\n              y={yMax - barHeight}\n              height={barHeight}\n              width={xScale.bandwidth()}\n              fill=\"#fc2e1c\"\n            /\u003e\n          \u003c/Group\u003e\n        );\n      })}\n    \u003c/svg\u003e\n  );\n}\n\n// ... somewhere else, render it ...\n// \u003cBarGraph /\u003e\n```\n\nFor more examples using `visx`, check out the [gallery](https://airbnb.io/visx/gallery).\n\n## Motivation\n\n**Goal**\n\nThe goal is to create a library of components you can use to make both your own reusable chart\nlibrary or your slick custom one-off chart. visx is largely unopinionated and is meant to be built\nupon. Keep your bundle sizes down and use only the packages you need.\n\n**How?**\n\nUnder the hood, visx is using d3 for the calculations and math. If you're creating your own awesome\nchart library on top of visx, it's easy to create a component api that hides d3 entirely. Meaning\nyour team could create charts as easily as using reusable react components.\n\n**But why?**\n\nMixing two mental models for updating the DOM is never a good time. Copy and pasting d3 code into\n`componentDidMount()` is just that. This collection of components lets you easily build your own\nreusable visualization charts or library without having to learn d3. No more selections or\n`enter()`/`exit()`/`update()`.\n\n## In the wild\n\n- [williaster/data-ui](https://github.com/williaster/data-ui)\n  ([Demo](https://williaster.github.io/data-ui/))\n- [dylanmoz/trello](https://github.com/DylanMoz/dylanmoz.github.io/blob/source/src/pages/trello/TrelloGraph.js)\n  ([Demo](http://dylanmoz.github.io/trello/))\n  ([How to Make Beautiful Graphs With vx and React-Motion](https://devblog.classy.org/how-to-make-beautiful-graphs-with-vx-and-react-motion-6ffe7aecf6f3))\n- [gkunthara/Crypto-Chart](https://github.com/gkunthara/Crypto-Chart)\n  ([Tutorial](https://medium.com/@georgekunthara/after-the-tutorial-the-first-react-app-4dce6645634e))\n- Collapsible tree with [`react-move`](https://github.com/react-tools/react-move) by\n  [@techniq](https://github.com/techniq) ([Demo](https://codesandbox.io/s/n3w687vmqj))\n  ([Radial demo](https://codesandbox.io/s/vmqwrkl395))\n  ([More info](https://github.com/airbnb/visx/issues/162#issuecomment-335029517))\n- Bitcoin 30-day price by [@hshoff](https://github.com/hshoff)\n  ([Github](https://github.com/hshoff/viewsource#1-bitcoin-price-chart))\n  ([YouTube](https://www.youtube.com/watch?v=oeE2tuspdHg))\n- Ethereum candlestick chart by [@hshoff](https://github.com/hshoff)\n  ([Github](https://github.com/hshoff/viewsource#2-ethereum-candlestick-chart))\n- Song data visualization through spotify by [@bother7](https://github.com/bother7)\n  ([Github](https://github.com/bother7/spotalyzer_frontend))\n- Investment Calculator ([website](https://investmentcalculator.io/))\n- Animation with [`react-spring`](https://github.com/drcmda/react-spring/) by\n  [@drcmda](https://github.com/drcmda) ([Demo](https://codesandbox.io/embed/j3x61vjz5v))\n- Code Coverage Dashboard by [@ezy](https://github.com/ezy)\n  ([Github](https://github.com/ezy/code-coverage-dashboard))\n- Ethereum Portfolio Toolkit by [@JayWelsh](https://github.com/JayWelsh)\n  ([Demo](https://cryptocape.com/)) ([Github](https://github.com/JayWelsh/CryptoCape))\n- Family tree by [@vkallore](https://github.com/vkallore)\n  ([Github](https://github.com/vkallore/d3-vx-family-tree))\n- South African Coronavirus Data Visuals by [@JayWelsh](https://github.com/JayWelsh)\n  ([Demo](https://coronamap.co.za/)) ([Github](https://github.com/JayWelsh/coronamap))\n- [CNN: Tracking America's Recovery](https://www.cnn.com/business/us-economic-recovery-coronavirus)\n- [Wall Street Journal: Americans Familiarize Themselves with the Word ‘Forbearance’](https://blogs.wsj.com/dailyshot/2020/04/13/the-daily-shot-americans-familiarize-themselves-with-the-word-forbearance/)\n  by [@rayshan](https://github.com/rayshan)\n  ([Demo](https://finance.shan.io/recessions-bear-markets-compared))\n- Dollar to food emoji caculator by [@gmlwo530](https://github.com/gmlwo530)\n  ([Demo](https://dollar-to-food-emoji.web.app/))\n  ([Github](https://github.com/gmlwo530/dollar-to-food-emoji))\n- [zh-TW] Taiwan Real-time Air Quality Index by\n  [@ArvinH](https://github.com/ArvinH)([Demo](https://codesandbox.io/s/simpleradar-aqi-with-tooltip-select-data-react-spring-item3?file=/Radar.tsx))([Tutorial](https://blog.arvinh.info/tech/datavis-visx))\n- tokenized BTC on ethereum stacked chart with brush by\n  [@sakulstra](https://github.com/sakulstra)\n- [Escape From Tarkov Ammo Chart](https://eft.monster/) by\n  [@codenomial](https://github.com/codenomial)\n- [Pry](https://pry.co) Finance for Founders (dashboard by [@valtism](https://github.com/valtism))\n- [Data 2 the People](https://www.data2thepeople.org/) Donation Efficacy Analysis for Downballot Races ([Demo](https://donate.data2thepeople.org/)) ([Github](https://github.com/Data-2-the-People/skyfall/blob/master/components/Scatterplot.jsx))\n- [Augora](https://augora.fr) Display information of french deputies ([Demo](https://augora.fr/statistiques))([Github](https://github.com/Augora/Augora))\n- WHO Coronavirus (COVID-19) Dashboard is built on top of `vx`, earlier version of `visx`. ([Demo](https://covid19.who.int/))\n- [Fig Stats](https://fig-stats.com) - Figma community plugin \u0026 widget analytics\n- [Physician.FYI](https://physician.fyi) - Explore physicians' disciplinary history\n- [Index by Superstardle](https://index.superstardle.com), [Salaries by Superstardle](https://salaries.superstardle.com), \u0026 [Pack'Em by Superstardle](https://playoffs.superstardle.com) - Explore professional sports teams and superstars in the world of underdogs, salaries, and playoff performances.\n- Ridgeline chart visualizing shuffling probabilities by [@jmssnr](https://github.com/jmssnr) ([Demo](https://shuffling-probability.vercel.app/)) ([Github](https://github.com/jmssnr/shuffling-probability))\n- [UCSF Data Library](https://datalibrary.ucsf.edu) - Landing page for disease research tools ([Github](https://github.com/mountetna/monoetna/tree/master/vesta/ui))\n\nHave a project that's using `visx`? Open a pull request and we'll add it to the list.\n\n## FAQ\n\n1. What does `visx` stand for?\n\n   \u003e visx stands for visualization components.\n\n1. Do you plan on supporting animation/transitions?\n\n   \u003e A common criticism of visx is it doesn't have animation baked in, but this was a conscious\n   \u003e choice. It's a powerful feature to not bake it in.\n   \u003e\n   \u003e Imagine your app already bundles `react-motion`, adding a hypothetical `@visx/animation` is\n   \u003e bloat. Since visx is react, it already supports all react animation libs.\n   \u003e\n   \u003e Charting libraries are like style guides. Each org or app will eventually want full control\n   \u003e over their own implementation.\n   \u003e\n   \u003e visx makes this easier for everyone. No need to reinvent the wheel each time.\n   \u003e\n   \u003e more info: https://github.com/airbnb/visx/issues/6\n   \u003e\n   \u003e examples:\n   \u003e\n   \u003e - Collapsible tree with [`react-move`](https://github.com/react-tools/react-move) by\n   \u003e   [@techniq](https://github.com/techniq) ([Demo](https://codesandbox.io/s/n3w687vmqj))\n   \u003e   ([Radial demo](https://codesandbox.io/s/vmqwrkl395))\n   \u003e - Animation with `react-spring` by [@drcmda](https://github.com/drcmda)\n   \u003e   ([Demo](https://codesandbox.io/embed/j3x61vjz5v))\n\n1. Do I have to use every package to make a chart?\n\n   \u003e nope! pick and choose the packages you need.\n\n1. Can I use this to create my own library of charts for my team?\n\n   \u003e Please do.\n\n1. Does visx work with [preact](https://preactjs.com/)?\n\n   \u003e yup! need to alias `react` + `react-dom` and use `preact-compat`.\n\n1. I like using d3.\n\n   \u003e Me too.\n\n## Development\n\nPlease see [CONTRIBUTING.md](./CONTRIBUTING.md)\n\n:v:\n\n[MIT](./LICENSE)\n\n[![FOSSA Status](https://app.fossa.io/api/projects/git%2Bhttps%3A%2F%2Fgithub.com%2Fhshoff%2Fvx.svg?type=large)](https://app.fossa.io/projects/git%2Bhttps%3A%2F%2Fgithub.com%2Fhshoff%2Fvx?ref=badge_large)\n","funding_links":[],"categories":["Data Visualization","Uncategorized","TypeScript","Svg/Canvas","Repository","前端开发框架及项目","UI Components","Charts \u0026 Data Visualization","Packages","📖 Categories","目录","React [🔝](#readme)"],"sub_categories":["Uncategorized","Data Visualization","其他_文本生成、文本对话","React Charts","\u003ca id=\"ui\"\u003eui\u003c/a\u003e"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fairbnb%2Fvisx","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fairbnb%2Fvisx","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fairbnb%2Fvisx/lists"}