Fulvio Vigilante

Scatter Plot with Color Legend

This scatter plot visualizes the Iris dataset, showing petal length against sepal width for three species of Iris flowers. A color legend identifies each species with a distinct color, and hovering over a data point displays its value in a tooltip. The visualization is built with React and D3 v5, relying on `scaleLinear` for the axes, `scaleOrdinal` for the color mapping, and `extent` for the data domain. The chart uses SVG rendering with custom components for axes, marks, and the legend.

Jul 16, 2021

Rendering Data with React & D3

A donut chart displays the full set of CSS named colors, each slice filled with its corresponding RGB hex value. The visualization loads the dataset via `d3.csv`, computes the pie layout with `d3.pie` and renders the arcs using `d3.arc`. React manages the component state and maps the data to SVG `<path>` elements, demonstrating a hybrid approach where D3 handles data processing while React handles DOM rendering.

Stylezd Scattered Plot

This scatter plot displays the relationship between sepal length and sepal width from the Iris dataset, with each flower represented as a teal circle. The visualization uses React with d3.v7’s `scaleLinear`, `extent`, and `format` functions to map data coordinates to SVG positions. Custom React components (`AxisBottom`, `AxisLeft`, `Marks`) render the axes and data points, while `useData` fetches and parses the CSV via d3.csv. Styled with the Poppins font and muted axis colors, the plot includes hover tooltips via SVG `<title>` elements.

Stylezed Bar Chart

A horizontal bar chart displays the populations of ten countries from a 2019 UN dataset, with country names on the y-axis and population values on the x-axis. The React component uses d3.scaleBand and d3.scaleLinear to map data, while d3.format formats tick labels. SVG rectangles render each bar, with native `<title>` elements providing tooltips. Axis components draw ticks and labels, and the chart updates automatically when data loads via a custom `useData` hook.

Refactored Bars Chart

This example displays a horizontal bar chart of population data for ten countries, sourced from a UN population CSV loaded via `d3.csv`. The React components `AxisBottom`, `AxisLeft`, and `Marks` render the axes and bars, using `scaleBand` and `scaleLinear` from d3.v7 to compute positions and widths. The visualization introduces a y-axis left with a band scale and an x-axis bottom with a linear scale. The SVG rendering shows the largest population bar extending nearly the full chart width while smaller bars are proportionally shorter. The chart is built with a loading state that displays "Loading..." until the asynchronous data fetch completes.

Axes with React & D3

This example shows a horizontal bar chart of the top ten most populous countries for 2020, with axes rendered manually. It loads UN population data via `d3.csv` and uses React’s `useState` and `useEffect` hooks to fetch and store the data. The chart builds `d3.scaleBand` and `d3.scaleLinear` scales to position bars and gridlines, mapping tick values to SVG `<line>` and `<text>` elements. All marks—rectangles, axis lines, and labels—are rendered as SVG within React components.

The margin convention

This example demonstrates a bar chart of the top ten countries by 2020 population, highlighting the margin convention by grouping all marks within a translated `<g>` element. The code uses React hooks (`useState`, `useEffect`) to load and parse CSV data via `d3.csv`, then applies `scaleBand` and `scaleLinear` to position rectangles. The SVG rendering relies on `d3.max` for domain scaling, while the inner dimensions are calculated from predefined margins, ensuring consistent spacing around the plot area.

Fork of Rendering Data with React & D3

This example shows a bar chart of the ten most populous countries in 2020, using a horizontal layout where bar length encodes population size. It loads data from a CSV file containing UN population estimates, parses the population column as a number, and filters to the first ten rows. React manages the component state, while D3’s `csv` loader, `scaleBand` for country categories, and `scaleLinear` for population values determine the SVG rectangle positions and dimensions.

Smiley Face Part II

This example displays a grid of 18 smiley faces, each with randomized eye and mouth dimensions, producing a playful variety of expressions. The faces are constructed with React components for the background circle, eyes, and mouth, rendered as SVG elements. The mouth uses `d3.arc` with a fixed angle range to create a consistent smile, while JavaScript’s `Math.random` generates the per-face variations. D3’s `range` function supplies the array of 18 iterations, and the `FaceContainer` wraps each face in an SVG group.

Loading Data with React and D3

This example demonstrates how to load and summarize external data in a React application using D3 utilities. It fetches a CSV file containing CSS named colors via `d3.csv`, storing the parsed result in React state with the `useState` and `useEffect` hooks. While the data loads, the interface displays a "Loading" message; once ready, it computes a textual summary using `d3.csvFormat`, showing the dataset’s size in kilobytes, row count, and column count. The visualization renders as SVG but presents only text, highlighting the data-loading workflow rather than graphical output.

Loading and Parsing CSV Data

This example demonstrates the loading and parsing of CSV data using D3.js, displaying the file size, row count, and column count of the parsed dataset on a web page. The code fetches a CSV file containing CSS named colors from a GitHub Gist URL using `d3.csv`, which returns a promise with the parsed data array. It then calculates the formatted string length with `d3.csvFormat`, accesses the `data.length` and `data.columns` properties, and injects the resulting message into a `<pre>` element via `document.getElementById`. The page includes commented-out alternatives using the Fetch API, `async/await`, and `d3.csvParse` for comparison.

Mouse Folower

This example demonstrates a simple interactive visualization where a circle follows the mouse cursor across the entire browser window. Built with React and rendered as an SVG, the app uses the `useState` and `useCallback` hooks to track mouse coordinates from `onMouseMove` events and update the circle’s `cx` and `cy` attributes. The circle is initially centered on the screen and moves smoothly in response to cursor movement, with its radius fixed at 30 pixels.