Stefano Renzetti

@sterenz·7 public vizzes

Bar Chart with React & D3

This bar chart displays the populations of ten countries, using a horizontal bar layout with a linear x-axis and categorical y-axis. It is built with React and D3, where D3’s `scaleBand` and `scaleLinear` handle positioning, and custom React components (`AxisBottom`, `AxisLeft`, `Marks`) render SVG elements for axes and bars. The data is loaded from a CSV via `d3.csv`, with population values scaled and formatted using `d3.format`. Tooltips and styled tick lines provide additional detail.

May 12, 2023

Loading thumbnail…

Show Data with React & D3

A React application renders a donut chart from CSS named colors data fetched as CSV. Each color value becomes a pie slice, filled with its corresponding RGB hex value. The visualization uses React's `useState` and `useEffect` hooks to load data asynchronously, then leverages D3 v7's `pie` layout and `arc` generator to compute SVG path geometry. The chart is drawn using SVG `<path>` elements within a React-generated `<svg>` container.

May 10, 2023

Loading thumbnail…

Rendering Data with React & D3

This example shows a load screen displaying the CSS Named Colors dataset as a series of horizontal color bars, with each bar’s background color set to the corresponding hex value from the CSV. The React component uses the useState and useEffect hooks to asynchronously fetch and parse the data with d3.csv, then maps over the array to render the bars as divs. While the page initially displays a large “Loading…” message, it ultimately visualizes the color palette in a stacked, full-width format.

May 10, 2023

Loading thumbnail…

Fork of Vega-Lite API Template

This example presents a scatter plot of automotive data, showing the relationship between acceleration, horsepower, weight, and miles per gallon across different model years. Built with the Vega-Lite API, it uses `vl.markCircle` with encodings for x, y, color, size, and tooltip, pulling data from a CSV via `d3.csv`. The visualization is rendered as an SVG, with the tooltip handler integrated through `vega-tooltip`, and includes custom font styling from the `config` file.

May 9, 2023

Loading thumbnail…

Loading Data with React & D3

This example demonstrates how to load and summarize a CSV dataset in a React application using D3’s `csv` function. The app displays a text message showing the file size in kilobytes, the row count, and the column count of the loaded data. The data comes from a GitHub-hosted CSV of named CSS colors, and the visualization is rendered as an SVG-less React component that updates after the asynchronous data fetch completes.

May 8, 2023

Loading thumbnail…

Mouse Follower

A smiley face rendered in SVG follows the cursor inside a 960×500 viewport. The React component tracks mouse movement via the `onMouseMove` handler and updates the circle’s position using state and the `useCallback` hook. The face is drawn with a yellow circle and two black eye circles, though the eyes remain static while the entire group moves. Rendering relies on React DOM with SVG elements, and the example highlights state-driven updates without external data sources.

May 8, 2023

Loading thumbnail…

Smile face

A grid of randomly generated smiley faces demonstrates reusable React components and D3's arc generator. Each face renders as an SVG with a yellow background circle, two eyes, and a mouth arc whose radius and width vary per face via randomized props. The `FaceContainer` translates the drawing group to each face's center, while D3's `range` generates the 18-face layout. The example uses React 18 for component composition and D3 v5 for the `arc` path generation.

May 7, 2023