[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-3722":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":18,"stars30d":19,"stars90d":16,"forks30d":16,"starsTrendScore":20,"compositeScore":21,"rankGlobal":10,"rankLanguage":10,"license":22,"archived":23,"fork":23,"defaultBranch":24,"hasWiki":25,"hasPages":25,"topics":26,"createdAt":10,"pushedAt":10,"updatedAt":34,"readmeContent":35,"aiSummary":36,"trendingCount":16,"starSnapshotCount":16,"syncStatus":17,"lastSyncTime":37,"discoverSource":38},3722,"visx","airbnb\u002Fvisx","airbnb","🐯 visx | visualization components","https:\u002F\u002Fvisx.airbnb.tech",null,"TypeScript",20833,766,134,118,0,2,11,43,6,82.45,"MIT License",false,"master",true,[27,28,29,30,31,32,5,33],"chart","d3","data-visualization","react","svg","visualization","vx","2026-06-12 04:00:19","\u003Cp align=\"center\">\n  \u003Cimg src=\".\u002Fassets\u002Fvisx-geometry.png\" \u002F>\n\u003C\u002Fp>\n\n\u003Cp align=\"center\">\n  \u003Ca title=\"npm version\" href=\"https:\u002F\u002Fwww.npmjs.com\u002F~visx\">\n    \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002F@visx\u002Fdemo.svg?style=flat-square\" \u002F>\n  \u003C\u002Fa>\n  \u003Ca title=\"@visx\u002Fshape npm downloads\" href=\"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@visx\u002Fshape\">\n    \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdm\u002F@visx\u002Fshape.svg?style=flat-square\" \u002F>\n  \u003C\u002Fa>\n\u003C\u002Fp>\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> [!IMPORTANT]\n> **visx v4 is in alpha** with React 19 support. Install with the `@next` tag:\n>\n> ```bash\n> npm install @visx\u002Fshape@next\n> ```\n>\n> v3 remains the `latest` stable release. See the [migration guide](.\u002FMIGRATION.md) and [changelog](.\u002FCHANGELOG.md) for details.\n\n\u003Cbr \u002F>\n\n\u003Cp align=\"center\">\n  \u003Cstrong>\n    \u003Ca href=\"https:\u002F\u002Fairbnb.io\u002Fvisx\">Docs\u003C\u002Fa>\n  \u003C\u002Fstrong>\n  •\n  \u003Cstrong>\n    \u003Ca href=\"https:\u002F\u002Fairbnb.io\u002Fvisx\u002Fgallery\">Gallery\u003C\u002Fa>\n  \u003C\u002Fstrong>\n  •\n  \u003Cstrong>\n    \u003Ca href=\".\u002FCHANGELOG.md\">Changelog\u003C\u002Fa>\n  \u003C\u002Fstrong>\n  •\n  \u003Cstrong>\n    \u003Ca href=\".\u002FMIGRATION.md\">Migration\u003C\u002Fa>\n  \u003C\u002Fstrong>\n\u003C\u002Fp>\n\n\u003Cp align=\"center\">\n  \u003Ca href=\"https:\u002F\u002Fairbnb.io\u002Fvisx\u002Fgallery\">\n    \u003Cimg src=\".\u002Fassets\u002Fvisx-gallery.png\" \u002F>\n  \u003C\u002Fa>\n\u003C\u002Fp>\n\n## Usage\n\nLet's make a simple bar graph.\n\nFirst we'll install the relevant packages:\n\n```bash\nnpm install --save @visx\u002Fmock-data @visx\u002Fgroup @visx\u002Fshape @visx\u002Fscale\n```\n\n\u003Cimg src=\".\u002Fassets\u002Fsimplebar.png\" height=\"150\" \u002F>\n\n```javascript\nimport React from 'react';\nimport { letterFrequency } from '@visx\u002Fmock-data';\nimport { Group } from '@visx\u002Fgroup';\nimport { Bar } from '@visx\u002Fshape';\nimport { scaleLinear, scaleBand } from '@visx\u002Fscale';\n\n\u002F\u002F We'll use some mock data from `@visx\u002Fmock-data` for this.\nconst data = letterFrequency;\n\n\u002F\u002F Define the graph dimensions and margins\nconst width = 500;\nconst height = 500;\nconst margin = { top: 20, bottom: 20, left: 20, right: 20 };\n\n\u002F\u002F Then we'll create some bounds\nconst xMax = width - margin.left - margin.right;\nconst yMax = height - margin.top - margin.bottom;\n\n\u002F\u002F Accessors\nconst getLetter = (d) => d.letter;\nconst getFrequency = (d) => d.frequency * 100;\n\n\u002F\u002F And then scale the graph by our data\nconst xScale = scaleBand({\n  range: [0, xMax],\n  round: true,\n  domain: data.map(getLetter),\n  padding: 0.4,\n});\nconst yScale = scaleLinear({\n  range: [yMax, 0],\n  round: true,\n  domain: [0, Math.max(...data.map(getFrequency))],\n});\n\n\u002F\u002F Finally we'll embed it all in an SVG\nfunction BarGraph() {\n  return (\n    \u003Csvg width={width} height={height}>\n      {data.map((d) => {\n        const letter = getLetter(d);\n        const barHeight = yMax - (yScale(getFrequency(d)) ?? 0);\n        return (\n          \u003CGroup key={`bar-${letter}`}>\n            \u003CBar\n              x={xScale(letter)}\n              y={yMax - barHeight}\n              height={barHeight}\n              width={xScale.bandwidth()}\n              fill=\"#fc2e1c\"\n            \u002F>\n          \u003C\u002FGroup>\n        );\n      })}\n    \u003C\u002Fsvg>\n  );\n}\n```\n\nFor more examples using `visx`, check out the [gallery](https:\u002F\u002Fairbnb.io\u002Fvisx\u002Fgallery).\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`useEffect()` is just that. This collection of components lets you easily build your own reusable\nvisualization charts or library without having to learn d3. No more selections or\n`enter()`\u002F`exit()`\u002F`update()`.\n\n## FAQ\n\n1. What does `visx` stand for?\n\n   > visx stands for visualization components.\n\n1. Do you plan on supporting animation\u002Ftransitions?\n\n   > A common criticism of visx is it doesn't have animation baked in, but this was a conscious\n   > choice. It's a powerful feature to not bake it in.\n   >\n   > Imagine your app already bundles `react-motion`, adding a hypothetical `@visx\u002Fanimation` is\n   > bloat. Since visx is react, it already supports all react animation libs.\n   >\n   > Charting libraries are like style guides. Each org or app will eventually want full control\n   > over their own implementation.\n   >\n   > visx makes this easier for everyone. No need to reinvent the wheel each time.\n   >\n   > more info: \u003Chttps:\u002F\u002Fgithub.com\u002Fairbnb\u002Fvisx\u002Fissues\u002F6>\n\n1. Do I have to use every package to make a chart?\n\n   > 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   > Please do.\n\n1. Does visx work with [preact](https:\u002F\u002Fpreactjs.com\u002F)?\n\n   > yup! need to alias `react` + `react-dom` and use `preact\u002Fcompat`.\n\n1. I like using d3.\n\n   > Me too.\n\n## Development\n\nPlease see [CONTRIBUTING.md](.\u002FCONTRIBUTING.md)\n\n:v:\n\n[MIT](.\u002FLICENSE)\n","visx 是一个可复用的低级可视化组件集合，结合了 D3.js 的强大数据处理能力和 React 的高效 DOM 更新机制。其核心功能包括基于 SVG 的图表绘制、灵活的数据绑定与转换以及丰富的图形元素（如条形图、折线图等），并支持自定义样式和交互行为。该项目特别适合需要构建复杂且高度定制化数据可视化应用的场景，例如数据分析平台、监控仪表盘或任何需要展示大量数据信息的产品界面中。通过使用 visx，开发者能够更快速地开发出既美观又功能强大的可视化解决方案。","2026-06-11 02:55:47","top_language"]