Jakub

Working with Time

This example visualizes temperature readings over a week, using a time-based x-axis and a linear y-axis. The graph plots data points as circles connected by a smooth, naturally curved line, with weekday labels along the bottom. The visualization is built with React and uses D3.js APIs such as `scaleTime`, `scaleLinear`, `extent`, and `curveNatural` to process data from a CSV file and render the SVG. The data source is a CSV of weekly San Francisco temperatures.

Scatter Plot

A scatter plot visualizes the relationship between sepal length and sepal width for individual iris flowers, with each circle representing one observation. The code uses React to render SVG elements, d3.scaleLinear for both axes, and d3.csv to load the Iris dataset. Axis components generate tick marks and labels, while the Marks component creates circles with native tooltips. The plot includes axis labels and uses d3.extent to set the domain from the data.

Stylized Bar Chart

This stylized bar chart displays the population of ten countries from the UN Population 2019 dataset. Using React with D3 v7, the visualization employs `d3.scaleBand` and `d3.scaleLinear` to map data to SVG rectangles, with axes generated from `xScale.ticks()` and formatted using the SI format `.2s`. The chart features custom tick styling, axis labels, and tooltips via SVG `<title>` elements.

Refactored Bar Chart

A horizontal bar chart displays the ten most populous countries in 2020, with a log-like linear scale mapping population values to bar widths and a categorical band scale mapping country names to vertical positions. The visualization is built with React components and D3 v7, using `d3.scaleBand`, `d3.scaleLinear`, and `d3.csv`. SVG rendering via React elements handles axes and marks, while data loads asynchronously from a GitHub-hosted CSV, and a loading message appears before the chart is drawn.

Axes with React & D3

This example combines React and D3 to create a horizontal bar chart of UN population data for 2019. Using React’s `useState` and `useEffect` hooks, it loads a CSV via D3’s `csv` function, then applies `d3.scaleBand` and `d3.scaleLinear` to map the top ten countries and their populations. SVG rectangles and text elements are generated as React components, with D3’s `ticks()` method driving the x-axis line and label placement.

The Margin Convention

This example demonstrates the D3 margin convention by rendering a horizontal bar chart of the top ten countries by 2020 population, loaded from a CSV file. The visualization separates the chart’s inner plotting area from its outer SVG bounds using a margin object, with a scaleBand for countries and a scaleLinear for population values. Built with React and D3 v7, the SVG rectangles are positioned via a translated group element, while the data is fetched asynchronously using d3.csv.

Pathetic Bar Chart

This visualization displays a bar chart of the top ten countries by population for 2020, drawn from a UN population dataset. The chart uses horizontal bars, with each rectangle’s length proportional to the country’s population. Built with React and D3 v7, it fetches the CSV data via `d3.csv`, then uses `d3.scaleBand` for the y-axis (country labels) and `d3.scaleLinear` for the x-axis (population values) to generate the SVG rectangles.

Fork of Fork of Loading Data with React & D3

This example displays the CSS named colors as a full-circle pie chart, with each color represented by a single slice. The visualization uses React hooks (`useState`, `useEffect`) to load the CSV data asynchronously via `d3.csv`, then renders SVG paths generated with `d3.pie` and `d3.arc`. The chart centers on a 960×500 SVG canvas, and each slice’s fill directly uses the RGB hex value from the data. While the code includes a loading message, the final chart demonstrates how D3’s layout functions integrate with React’s declarative rendering model.

Fork of Loading Data with React

This example demonstrates loading and displaying CSS named colors from a remote CSV file. It shows a vertical stack of colored horizontal bars, one for each color, rendered as HTML divs whose background colors are set using the RGB hex values from the data. The React app uses the `useEffect` hook to fetch the CSV with `d3.csv` and stores the result in state via `setData`, initially showing a "Loading.." message. The code uses React 17, ReactDOM, and d3.v7, with the data sourced from a Gist.

Loading Data with React & D3

This example demonstrates how to load and summarize a remote CSV dataset within a React application, displaying the file size, row count, and column count as text. It uses React's `useEffect` hook to trigger a D3 `csv` request to fetch CSS named colors data from a GitHub gist, then renders the statistics once the data arrives. The implementation relies on React’s state management with `useState`, D3’s `csv` parsing, and a custom `message` module that formats the summary using `d3.csvFormat` and the dataset’s metadata. The visualization presents raw data metrics rather than a graphical chart.

Loading and Parsing CSV Data

This example demonstrates how to load and parse a CSV file using D3.js and React. It fetches a remote dataset of CSS named colors via `d3.csv`, then displays statistics about the data: the approximate file size in kilobytes, the number of rows, and the number of columns. The results are rendered as plain text inside a `<pre>` element using React’s `createElement`. The code also includes a commented alternative approach using the Fetch API with `async`/`await` and `d3.csvParse`.

Mouse Follower

A single circle follows the mouse cursor across an SVG canvas, updating its position in real time. The visualization demonstrates React’s state management and event handling, using the `useState` hook to track cursor coordinates and the `onMouseMove` event to update them. The circle’s center is bound to the `mousePosition` state, and its radius is fixed at 30 pixels. The code renders the scene with React and ReactDOM, while D3 is loaded but not explicitly used in the visible logic.

Smiley Face Part I

A grid of 18 smiley faces, each with randomized facial features, appears within an SVG rendered by React. The code builds each face from reusable components: `BackgroundCircle` for the yellow head, `Eyes` for the offset eye circles, and a `Mouth` arc drawn using `d3.arc()`. `FaceContainer` groups the SVG elements and translates them to a center point. The `range` function from d3 generates the array of faces, and `Math.random()` varies eye position, radius, and mouth dimensions per face, producing a playful, varied collection.