chrismeeky

Stylized scatter plot

This stylized scatter plot visualizes the relationship between sepal length and sepal width from the classic Iris dataset, loaded via `d3.csv`. The visualization is built with React and D3 v7, rendering SVG elements through modular components for axes and data marks. Points are drawn as circles with tooltips showing formatted values, while a large yellow background circle creates a distinctive stylistic frame. The chart uses `d3.scaleLinear` for both axes and custom formatting functions for tick labels.

Oct 19, 2021

Stylized bar charT

This stylized bar chart displays the populations of the ten most populous countries, using a yellow background circle and custom-styled ticks to create a distinctive visual. Horizontal bars represent each country’s population, with a tooltip showing the formatted value on hover. The visualization is built with React and D3 v7, using `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. Data is loaded via D3’s `csv` utility from a UN population dataset, and the chart is rendered as SVG.

Refactored Bar chart

This example shows a horizontal bar chart displaying the top 10 most populous countries in 2020, using data loaded from a CSV file via D3’s `csv` utility. The bars render as SVG rectangles, with a yellow circular background and black stroke. React manages the component structure, while D3’s `scaleBand` and `scaleLinear` handle the axis positioning. Custom React components like `AxisBottom`, `AxisLeft`, and `Marks` encapsulate the chart’s parts, and the axes are generated by mapping over tick values from the scales.

The margin convention on bar chart

This example demonstrates the margin convention in bar charts, showing how to position axes and plot marks within a designated plotting area. It uses React to render SVG elements and d3’s `scaleBand` and `scaleLinear` to map countries and population values from a CSV loaded via `d3.csv`. Grid lines and tick labels are generated from `xScale.ticks()`, with the plot group translated by a specified margin inset from the SVG viewport.

Pathethic Barchart

This example renders a simple bar chart using React and D3, displaying the top 10 countries by 2020 population from a CSV file loaded via d3.csv. Each country is represented as an SVG `<rect>` whose width is scaled by population using `d3.scaleLinear`, while `d3.scaleBand` positions the bars vertically. The chart lacks axes and labels, giving it a deliberately minimal, unfinished aesthetic. The code also includes separate React components for a yellow circular face with eyes and an arc-based mouth, though these are not used in the main visualization.

Fork of Rendering of loaded data on pie chart

This example renders a pie chart using React and D3, displaying data from a CSV file of CSS named colors loaded via `d3.csv`. The chart maps each row to a pie slice, using the `d3.pie` layout and `d3.arc` for the path geometry, with each slice’s fill set to its corresponding `RGB hex value` from the data. The visualization is drawn as an SVG, centered on a 960x500 canvas, and shows a loading message until the data is fetched and processed.

Rendering of loaded data on a divs

This example renders a color dataset from a CSV file as a series of horizontal colored bands. The React component uses d3.csv to load data from a gist URL, then maps each row to a div with its background color set to the RGB hex value. The visualization shows the full color spectrum extracted from the CSS named colors dataset. While the page displays a loading message before data arrives, it uses React's useState and useEffect hooks for managing the asynchronous data loading.

Loading and parsing CSV data

This example demonstrates how to load and parse CSV data using D3 v7. It displays the dataset size in kilobytes, column count, and row count as plain text on the page. The code uses `d3.csv` to fetch and parse a remote CSV file containing CSS named colors from a GitHub gist, then formats a summary message with `d3.csvFormat` to calculate the size. An alternative commented-out approach using the Fetch API with `d3.csvParse` is also shown.

Loading Data with React and D3

This example shows an app that loads CSS named color data from a gist CSV file using the D3 `csv` function and displays summary statistics about the dataset in a large `<pre>` element. React's `useState` and `useEffect` hooks manage the asynchronous data loading, rendering a "loading" message until the data arrives. The page also contains reusable SVG face components—including a yellow background circle, eyes, and a D3 arc-based mouth—composed through React props, though the visible output simply reports the data's size in kilobytes, column count, and row count.

Mouse follower

A yellow face with black-outlined eyes and an arched mouth follows the mouse cursor across an SVG canvas. The face is built from React components, including BackgroundCircle, Eyes, and Mouth, with d3.arc generating the mouth path. Mouse movement is tracked via React's useState and useCallback, updating the circle's center coordinates in response to clientX and clientY events.

Smiley face part I

A modular React component assembles a smiley face SVG from separate circle, eye, and mouth parts. The face uses d3.arc to draw a half-circle smile, with a yellow background circle and two black eyes positioned by offset coordinates. All geometry is defined as props, making the face’s size, eye spacing, and mouth dimensions configurable. The face is rendered inside a centered SVG group, with the overall viewport fixed at 960 by 500 pixels.