visx
visx a collection of expressive, low-level visualization primitives for React
Introducció
Section titled “Introducció”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.
Primers passos
Section titled “Primers passos”Crea un projecte nou amb React tal com s’explica a TSX.
Afegeix una dependència amb @visx/text
deno add --npm @visx/text
Modifica el fitxer src/App.tsx
:
En aquest enllaç tens la documentació: @visx/text
Apple Stock
Section titled “Apple Stock”We’ll start by using some data from @vx/mock-data
:
deno add --npm @vx/mock-data
Crea el fiter 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
Daily average temperatures
Section titled “Daily average temperatures”El contingut d'aquest lloc web té llicència CC BY-NC-ND 4.0.
©2022-2025 xtec.dev