Saltar al contingut

visx

visx a collection of expressive, low-level visualization primitives for React

Data visualization is increasingly relevant to more people from varied backgrounds, and that diversity necessitates visualization authoring frameworks that cater to the skills and needs of those individuals.

One such group of authors are frontend developers, who are increasingly tasked with creating visualizations for the web.

visx stands for visualization components, and is a suite of over 30 separate packages of React visualization primitives that fall into several categories Documentation.

It is un-opinionated on state management, animation, and styling so it can integrate with any React codebase, and its emphasis on modularity (similar to D3) lets you keep your bundle sizes down by only using the packages you need to create your reusable chart library or a custom one-off chart.

Crea un projecte nou amb React tal com s’explica a TSX.

Afegeix una dependència amb @visx/text

Terminal window
deno add --npm @visx/text

Modifica el fitxer src/App.tsx:

src/App.tsx

En aquest enllaç tens la documentació: @visx/text

We’ll start by using some data from @vx/mock-data:

Terminal window
deno add --npm @vx/mock-data

Crea el fiter src/Stock.tsx:

src/Stock.tsx
import {appleStock} from '@vx/mock-data'
export default function Stock() {
const data = appleStock
console.log(data)
return (
<table className="w-full">
{data.map(d => <tr key={d.date} className="border-b border-gray-200">
<td className="x-6 py-3">{d.date}</td><td className="x-6 py-3">{d.close}</td>
</tr>)}
</table>
)
}

If we console.log that data, we’ll see that it’s an array of JSON objects with date timestamps and close dollar values for apple stock.

We’ll also give our graph a width and a height.

Continua: Getting started with vx

Introduction to visx


El contingut d'aquest lloc web té llicència CC BY-NC-ND 4.0.

©2022-2025 xtec.dev