seanmdalrymple@protonmail.com

Fork of Stylized Scatter Plot

This interactive scatter plot visualizes the Iris dataset, displaying measurements such as petal and sepal length and width. Users can dynamically select which measurements appear on the x- and y-axes via dropdown menus, with all points rendered as SVG circles. The visualization is built using React and D3 v5, leveraging D3’s `scaleLinear` for axis scaling and `csv` for data loading. Axis ticks and labels are generated with custom React components, while a tooltip shows formatted values on hover.

Fork of Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris Dataset, allowing users to dynamically select which four flower measurements (sepal length/width, petal length/width) or species are plotted on the X and Y axes via dropdown menus. The visualization is built with React and renders points as SVG circles using D3.js scale functions to map data coordinates. Each point includes a tooltip displaying its exact value. The implementation leverages React state management to trigger re-rendering when the axis selections change, demonstrating a polished approach to interactive data exploration.

Polished Scatterplot with Menus

An interactive scatterplot of the Iris dataset lets users explore relationships between sepal and petal measurements via dropdown menus for both axes. Built with React and D3 v5, it renders SVG circles scaled by linear scales, with custom React components for axes, marks, and menus. The iris.csv data is loaded asynchronously through D3’s csv function and parsed into numeric values. Styled with Poppins font, the chart includes formatted axis ticks and tooltips showing values on hover.

Fork of Stylized Scatter Plot

This fork of the “Stylized Scatter Plot” visualizes the Iris dataset, plotting petal length against sepal width for individual flowers. The scatter plot uses React with d3.v5 to compute linear scales via `scaleLinear` and render SVG circles as marks, styled with a distinct teal fill. Axis components are built with React from D3’s tick values, and hover tooltips display formatted tick values. Data is loaded asynchronously with the `csv` function from D3.

Drop Downszzz

This example demonstrates how to build an interactive dropdown menu using React and D3, allowing users to select a pet from six predefined options. The code splits React components into separate files using ES6 modules and employs React Fragments to render multiple elements without extra DOM nodes. The `Dropdown` component manages user selection through React's `useState` hook, while D3 is loaded for potential data manipulation. The interface displays a labeled menu where choosing an option updates the selected value in real-time, with the current selection logged to the console.

World Map

This world map visualization displays the Earth using a natural Earth projection, with landmasses filled in teal and graticules shown as gray lines. Country borders are rendered as cyan strokes using topological data from the world-atlas dataset. The visualization is built with React for component structure and D3's geoNaturalEarth1 projection, geoPath, and geoGraticule functions for geographic rendering. The code also uses TopoJSON's feature and mesh methods to extract land polygons and interior boundaries from the topology, with SVG paths styled through CSS.

Fork of Stylized Scatter Plot

This example displays a temperature-over-time line chart for San Francisco, plotting daily temperature readings as a connected path with circular markers. The visualization uses React for component structure, with D3 v5 scales for mapping data to coordinates. The line and circles are rendered as SVG elements, while `d3.scaleTime()`, `d3.scaleLinear()`, and `d3.extent()` handle the x and y axis domains. The data comes from a CSV file fetched via D3’s `csv` method, and both axes are customized with tick marks and labels using D3’s `line()` generator.

Fork of Mouse Follower

This example demonstrates a mouse-tracking visualization using React, where a circle follows the cursor’s position across an SVG canvas. The app initializes the circle at the center of a 960×500 viewport and updates its coordinates on every `mousemove` event. It uses React hooks (`useState` and `useCallback`) to manage and memoize the mouse position state. The rendering relies on ReactDOM and SVG elements, with no external data source, purely illustrating interactive event handling and declarative updates.

Fork of Refactored Bar Chart

This fork of a refactored bar chart displays the top 10 most populous countries using horizontal bars, with population values on the x-axis and country names on the y-axis. The visualization uses React components with D3 scales, including `scaleBand` for the y-axis and `scaleLinear` for the x-axis, rendering SVG rectangles as marks. Axes are drawn via custom React components that map D3 ticks to SVG elements, with tooltips formatted using D3’s `format` function. Data comes from the United Nations World Population Prospects 2019, loaded as CSV and processed with D3’s `csv` method.

Fork of Pathetic Bar Chart

This is a bar chart visualization of the top 10 most populous countries, displayed without axes and using a deliberately simple design. It is built with React and D3 v5, rendering SVG elements through React components. The chart pulls data from the UN World Population Prospects 2019 dataset, scales the x-axis linearly with `d3.scaleLinear` and the y-axis with `d3.scaleBand`, and constructs the bars and axis labels using custom React functions.

Testing UseEffect

This example demonstrates the top 10 most populous countries in 2020 from the United Nations World Population Prospects 2019 dataset, displayed as a bar chart without axes using React and D3. The code loads CSV data with d3.csv, converts population strings to numbers, and slices the dataset to the first ten entries. It uses React hooks (useState, useEffect) to handle asynchronous data loading, then renders an SVG with scaleBand, scaleLinear, and explicit x- and y-axis tick marks created from d3.scaleLinear’s `.ticks()` method. The chart updates once data arrives, showing a loading message initially.

Fork of Rendering Data with React & D3

A radial burst visualization displays CSS named colors as equal-width slices emanating from a central point. The code loads color data from a CSV file using D3’s `csv` utility, then processes it with `d3.pie` and `d3.arc` to compute radial paths. React renders each slice as an SVG `<path>`, filling each with its corresponding hex value from the dataset. The example demonstrates a hybrid approach where D3 handles data loading and arc geometry while React manages the component state and SVG DOM updates.

Fork of Smiley Face Part II

A smiling face rendered as a full-window SVG uses React components to define circles and paths for the head, eyes, and mouth. It demonstrates D3's `arc` generator to create the mouth and a monocle ring, while a D3 `line` generator draws a dangling chain from the monocle. The face is constructed with layered, colored circles and custom stroke widths, with the entire graphic centered and scaled to the viewport.

Fork of Vega-Lite API Template

This example shows a scatterplot of automobile displacement against horsepower, with tooltips displaying car model names. The visualization is built using the vega-lite-api library, which registers Vega and Vega-Lite for rendering, while D3’s `csv` function loads the auto-mpg dataset. Point opacity is set to 0.1 to reveal overlapping data density. The plot resizes to fit the window and applies custom axis and label styling from a separate config file.

Fork of Vega-Lite API Template

This example visualizes the relationship between car origin and horsepower using a scatter plot. It renders points from the auto-mpg dataset, with each point colored by origin and positioned by horsepower. The visualization is built with the Vega-Lite API, which constructs a Vega-Lite specification that is then rendered by Vega. Data is loaded asynchronously via the d3.csv function, and tooltips display car names on hover. The code customizes the chart’s appearance through a config object, setting fonts and axis styles, and uses a dark color for text.

Fork of Mouse Follower

This example displays a full-screen counter showing the number of rows, columns, and file size of a CSS named colors dataset. The page first fetches the CSV from a GitHub gist using `d3.csv`, then formats the result with `d3.csvFormat` to compute the byte count. The React app manages the loading state with the `useState` and `useEffect` hooks, rendering either a loading message or the summary in a large `<pre>` element. The visualization is minimal, focusing on textual data summary rather than graphical representation.

Fork of Loading and Parsing CSV Data

This example demonstrates the basics of loading and parsing CSV data, displaying the file size, row count, and column count of a dataset of CSS named colors. It uses D3 v5’s `d3.csv()` method, which returns a promise, to fetch the data from a GitHub gist. The code then formats the statistics using `d3.csvFormat()` and `data.columns`, injecting the results into an HTML `<pre>` element. Commented-out alternatives illustrate the same process using `fetch()` with async/await and `d3.csvParse()`.

ReactMouseTracking

A mouse-following circle demonstrates real-time React state updates. The SVG circle tracks the cursor's `clientX` and `clientY` coordinates, while its radius randomly resets to a value between 0 and 100 on every mouse move. The app uses React's `useState` and `useCallback` hooks within a functional component, rendering through `ReactDOM.render`. Mouse events on the SVG element trigger updates to both position and radius state, showcasing React's reactive rendering with declarative SVG markup.

Fork of Loading and Parsing CSV Data

This example demonstrates how to load a CSV file containing CSS named colors and display basic information about the dataset—its size in kilobytes, row count, and column count—as large text on the page. It uses the Fetch API with async/await to retrieve the remote CSV, then parses it with the `d3.csvParse` method. The code also includes alternative commented-out approaches using the `d3.csv` convenience method and a nested promise chain, highlighting different loading strategies. The text is rendered directly into a `<pre>` element.

Fork of Smiley Face Part II

A grid of smiling faces is rendered, each composed of a yellow circle, two eyes, and a curved mouth. The React application maps over an array created with `d3.range` to generate multiple `FullFace` components. Each face uses randomized `eyeRadius` and `mouthWidth` values to vary appearance. Rendering is done through React with SVG primitives, while the smile path is built using the `d3.arc` generator to create an SVG path element. The faces are placed within a fixed 150 by 150 pixel viewport, centered on a common origin.

Fork of Let's Make a Face Part I

Fork of Hello HTML

This example draws a simple smiley face using Scalable Vector Graphics (SVG). It shows a large blue circle outlined in green for the face, with two smaller green circles serving as eyes. The drawing is rendered directly within an HTML page using inline SVG elements. The code sets the SVG canvas to 960 by 500 pixels and positions the circles using explicit x and y coordinates. The page uses minimal CSS styling to remove margins and hide overflow, and the approach is purely declarative, relying on the SVG markup rather than any JavaScript libraries or external data sources.