Victor Masson

@victormasson21·5 public vizzes

Vega-Lite API Template

This example demonstrates a scatter plot of automobile data, showing the relationship between acceleration and horsepower. Each point is colored by the car’s country of origin, with a tooltip displaying the car’s name. The visualization is built using the Vega-Lite API, which composes a specification programmatically and renders it as SVG. Data is loaded asynchronously from a CSV file via d3.csv, while vega-tooltip provides interactive hover details. The code also applies custom axis and label styling through the vega-lite config object for improved readability.

Aug 24, 2021

Loading thumbnail…

D3 + React

This example shows a minimal React integration with D3, displaying a message that summarizes a fetched CSV file’s size, row count, and column count. The React app uses the `useState` and `useEffect` hooks to load data asynchronously via D3’s `csv` utility, then stores it in state. Once loaded, a helper function formats the data summary using `d3.csvFormat`. The data comes from a GitHub-hosted CSS named colors CSV, and rendering is handled by ReactDOM.

Aug 23, 2021

Loading thumbnail…

All the colours

This example demonstrates how to load and inspect a CSV file containing CSS named colors using D3.js v7. It fetches the data from a GitHub gist and logs the file size in kilobytes, the number of rows, and the number of columns to the browser console. The code uses `d3.csv` for parsing, with an alternative commented-out approach using `fetch` and `d3.csvParse`. The visualization itself is minimal, focusing on data loading and preliminary analysis rather than rendering a visual output.

Aug 20, 2021

Loading thumbnail…

Mouse follower

A circle follows the mouse cursor within an SVG canvas, updating its center position in real time. The visualization uses React's `useState` and `useCallback` to manage mouse-move events, while the SVG `onMouseMove` handler captures pointer coordinates. The circle’s `cx` and `cy` attributes are bound to the state, and the scene is rendered via `ReactDOM.render` with a D3.js library import for potential data handling.

Aug 20, 2021

Loading thumbnail…

Smiley face 1/2

This example shows a stylized yellow smiley face built from modular React components. A dark outline encloses the face, with two black eyes positioned asymmetrically and a curved mouth arc. The visualization uses React 17 to render SVG elements, while D3 v7’s `arc()` API generates the mouth path based on specified radii and angles. All face features are positioned relative to a central translation group within an SVG canvas.

Aug 19, 2021