visx

#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

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

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>
    )
}