Typescript - visx

  • visx-05cbea.gitlab.io
    typescript/visx

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

    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 React - 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

    Apple Stock

    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

    Daily average temperatures

    Introduction to visx

    TODO