Ana Roque

@rokingana·3 public vizzes

Fork of Loading and Parsing CSV Data

This example loads a CSV file of CSS named colors, parses it with the `d3.csv` function, and renders a colored square for each row using React’s `useEffect` and `useState`. The squares’ background colors come from the `RGB hex value` column, with a fixed width and height of 100 pixels. While loading, a large “Loading …” message is displayed. The console logs the first row, and the data is fetched from a GitHub Gist URL. The example demonstrates asynchronous data retrieval and simple color-based visualization with D3’s CSV parser and React’s state management.

Mar 19, 2021

Loading thumbnail…

My Vega Lite Viz Project

The chart is a circular mark-based scatterplot that visualizes the relationship between two categorical fields, "Designação DT" and "Categoria," from a CSV file. It uses the Vega-Lite API, registered with Vega and Vega-Lite, to render the visualization as an SVG. The code configures axis colors and typography, then loads data via `d3.csv` and renders it with a custom mark size and opacity, all displayed in a full-window view.

Mar 18, 2021

Loading thumbnail…

My Smily Face

A grid of eighteen smiley faces, each with randomized facial features, fills the browser window. The code composes the face from separate React components: a yellow background circle, two eyes, and a d3.arc-generated mouth. The `index.js` file uses d3’s `range` to create the grid and assigns random values for eye offset, eye radius, mouth width, and mouth radius. Rendering occurs as SVG within a React app, with all faces sharing the same center point and viewport dimensions.

Mar 4, 2021