Catalina Araya

@carayaa·3 public vizzes

Fork of Renderizando Datos

This visualization presents CSS named colors as a pie chart, with each slice filled using the exact hex value from the dataset. It loads data from a remote CSV file using the `csv` function from D3, and manages that data with React’s `useState` and `useEffect` hooks. The chart is rendered as an SVG, with each color slice generated by the `arc` generator from D3 to create pie path geometry.

Jul 8, 2021

Loading thumbnail…

Fork of Renderizando Datos

This example displays a vertical stack of colored rectangular stripes, one for each CSS named color, loaded from a remote CSV dataset. It shows the relationship between color names and their hexadecimal RGB values by rendering each row as a div with its background color set to the corresponding hex code. The code uses React with the `useState`, `useEffect`, and `useCallback` hooks to manage state, `ReactDOM` to render into the DOM, and D3’s `csv` utility to fetch and parse the data from the gist. While loading, it displays a large "loading..." message.

Jul 8, 2021

Loading thumbnail…

Renderizando Datos

This example displays a vertical stack of horizontal stripes, each colored according to a CSS named color from a loaded dataset. It loads the data from a CSV file using D3’s `csv` utility, then uses React hooks (`useState` and `useEffect`) to asynchronously fetch and store the data. The `App` component maps over each row to render a div with a background color taken from the `RGB hex value` column. A loading message appears until the data arrives, and the final rendering fills the page with 960-pixel-wide bands.

Jul 8, 2021