William Couturiaux

@wcouturiaux·10 public vizzes

Axes with React & D3

A bar chart displays United Nations population estimates for 2020 across ten countries, with country names on the y-axis and population values on the x-axis. The example integrates React (using `useState` and `useEffect` hooks) with D3 utilities, including `csv`, `scaleBand`, `scaleLinear`, and `max`. D3 loads the CSV data and computes scales, while React renders SVG elements—axis ticks, labels, and rectangles—within a single `<g>` group. The chart uses rendered SVG with manual gridlines and text labels.

Apr 14, 2021

Loading thumbnail…

Margin Convention

This example demonstrates the margin convention for D3 visualizations by rendering a horizontal bar chart of United Nations population data. The chart displays the top 10 countries by 2020 population, with bars scaled linearly along the x-axis and categorically arranged along the y-axis. Using React hooks to manage state, the code loads CSV data with `d3.csv` and creates scales with `scaleBand` and `scaleLinear`. The SVG output groups all rectangles inside a translated `<g>` element, applying the specified margins to position the chart within the 960×500 viewport.

Apr 13, 2021

Loading thumbnail…

Pathetic Bar Chart

This bar chart displays the ten most populous countries in 2020 using UN population data. The visualization loads the CSV dataset with D3’s `csv` utility and renders horizontal bars through React components in SVG. D3’s `scaleBand` and `scaleLinear` map country names to vertical positions and population values to bar widths, while React’s `useState` and `useEffect` hooks manage data fetching and component state.

Apr 13, 2021

Loading thumbnail…

Fork of Rendering Data with React & D3

This example displays all named CSS colors as a radial burst, with each color rendered as a slice of a pie chart. It loads the color data using `d3.csv`, then sorts and maps it with `d3.pie()` before drawing each arc with `d3.arc()`. React manages the component state and rendering, while D3 handles the data loading and geometry calculations. The visualization uses SVG via React's `path` elements, with each slice filled by its corresponding hex value from the dataset.

Apr 13, 2021

Loading thumbnail…

Rendering Data with React

This example shows a horizontal bar chart of CSS named colors, where each color’s hex value fills a thin row in a 960-pixel-wide strip. It uses React’s `useState` and `useEffect` hooks to fetch and store CSV data via `d3.csv`, then maps over the data to render the rows with inline styles. The visualization demonstrates a straightforward React rendering pattern, with a loading state shown as plain text before the data arrives.

Apr 13, 2021

Loading thumbnail…

Loading Data with React and D3

This example shows how React state and D3 utilities work together to load and summarize a dataset of CSS named colors. The application displays a text message reporting the dataset’s size in kilobytes, row count, and column count once the data arrives, or a “Loading…” placeholder before that. The code uses the `useState` and `useEffect` hooks to manage the asynchronous fetch, while `d3.csv` retrieves the data from a GitHub gist URL. React renders the message as SVG text, and `d3.csvFormat` calculates the byte size.

Apr 12, 2021

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between engine displacement and horsepower for classic automobiles, with tooltips revealing vehicle names. It uses the Vega-Lite API to declaratively define a scatter plot with semi-transparent points, while D3.js loads the data from a CSV file. The visualization is rendered as an SVG and configured with a dark theme for improved readability. The code integrates Vega tooltip functionality to handle interactive hover details.

Apr 12, 2021

Loading thumbnail…

Load and Parse CSV

This example demonstrates how to load and parse a CSV file using D3.js version 6. It displays statistics about the dataset, including its size in kilobytes, row count, and column count. The visualization uses the `d3.csv` method to fetch and parse the data from a remote GitHub Gist URL, then formats the results with `d3.csvFormat` to calculate the data size. The output is rendered as text inside an HTML `<pre>` element via the Document Object Model, with the file containing named CSS colors as its source data.

Apr 6, 2021

Loading thumbnail…

Mouse Follower

A React component renders a yellow circle that follows the mouse cursor within an SVG canvas. The circle’s position is updated via React state, driven by the SVG’s `onMouseMove` event handler, which captures `clientX` and `clientY` coordinates. The example demonstrates interactive SVG rendering with React hooks (`useState`, `useCallback`) and `ReactDOM.render`. The circle starts centered in the 960×500 viewport and moves responsively with the pointer.

Mar 31, 2021

Loading thumbnail…

Smiley Face Part I

A grid of eighteen identical smiley faces renders in React, each composed of SVG circles and a d3-shape arc path. The faces use fixed dimensions and offsets, but randomize eye radius per face. The code imports React, ReactDOM, and d3’s `range` utility to generate the array of faces, while d3’s `arc()` builds the mouth shape. All elements are positioned within an SVG via a translated group, creating a repetitive, uniform pattern with subtle variation in eye size.

Mar 28, 2021