clebas

@clebas·7 public vizzes

Diagrame en barres D3

This example displays a horizontal bar chart of the ten most populous countries in 2020, using data from a UN population CSV loaded via `d3.csv`. The visualization is built with React and D3 v5, where `scaleBand` positions each country along the y-axis and `scaleLinear` maps population values to bar widths. Rendered as SVG rectangles, the chart updates asynchronously after the data fetch, with a loading message shown initially. The code explicitly imports utilities like `max` and `scaleBand` from the D3 library.

Apr 6, 2021

Loading thumbnail…

Camembert de couleurs D3+React

A colorful pie chart displays all 148 CSS named colors as equal slices, rendered as SVG paths within a React component. The visualization uses D3's `pie` and `arc` functions to compute angles and paths from a CSV dataset of CSS color names and their hex values. Data is loaded asynchronously via D3's `csv` function from a remote gist URL. The React app shows a loading message until the data arrives, then renders the pie chart centered in an SVG canvas.

Apr 6, 2021

Loading thumbnail…

Loading Data with React & D3

This example demonstrates how to load and display data in a React application using D3. It fetches a CSV file containing CSS named colors from a GitHub gist, then shows a summary message with the file size in kilobytes, row count, and column count. The code uses React hooks (`useState`, `useEffect`) to manage asynchronous data loading, and D3’s `csv` method to parse the remote file. The final visualization is a simple text output rendered via a `<pre>` element, with D3’s `csvFormat` used to compute the data size.

Apr 6, 2021

Loading thumbnail…

Chargement de données CSV

This example demonstrates how to load and summarize a CSV dataset using D3.js. It fetches a remote CSV file containing CSS named colors, then displays basic statistics about the data in a large text block: the file size in kilobytes, the number of rows, the number of columns, and a short message. The code uses `d3.csv` to fetch and parse the data asynchronously, followed by `d3.csvFormat` to compute the file size and `data.length` and `data.columns.length` for row and column counts.

Apr 4, 2021

Loading thumbnail…

Chargement de données CSV

This example demonstrates how to fetch and log a CSV file’s contents using the Fetch API. It loads a list of CSS named colors from a GitHub Gist URL, retrieves the response as plain text with `response.text()`, and prints that text to the browser console via `console.log()`. The code uses `async`/`await` to handle the asynchronous request, showing the basic pattern for parsing raw CSV data without relying on external libraries like D3 or PapaParse.

Apr 4, 2021

Loading thumbnail…

Mouvement de souris avec React.

This example shows a yellow circle following the mouse cursor as it moves over an SVG canvas. Built with React, the visualization uses the `useState` and `useCallback` hooks to track the cursor’s `clientX` and `clientY` coordinates, updating the circle’s center position in real time. The SVG is rendered via ReactDOM, with no external data source beyond the live mouse events.

Apr 3, 2021

Loading thumbnail…

Visage souriant A

A smiling face composed of layered SVG shapes demonstrates modular React component composition. A yellow circle forms the head with a black stroke, while two black circles serve as eyes positioned symmetrically around the center. The mouth is drawn using D3's arc generator, creating a semi-circular path with configurable radius and thickness. The face is rendered inside an SVG container that centers all elements via a translation transform, with all dimensions and positions passed as props from a single parent component.

Apr 2, 2021