Skip to main content
Log in
N

Nick Pearson

@dT-Nick·12 public vizzes

Loading thumbnail…

Working With Time

This visualization displays a time series of San Francisco temperature data, plotting temperature against a time axis as a smooth natural-curve line. The chart employs a time scale on the x-axis and a linear scale on the y-axis, with clear axis labels and tick marks. Built using React and D3 v5 with SVG rendering, the line is generated using `d3.line` with `curveNatural`. The data comes from a CSV file containing weekly temperature readings from the city.

Jun 1, 2021
Loading thumbnail…

Scatter Plot With Color

This interactive scatter plot visualizes the Iris dataset, plotting continuous measurements (sepal width, sepal length, petal width, petal length) against one another with points colored by species. Users select attributes for the X and Y axes via React dropdown menus, which update the chart reactively. The visualization uses React, D3 scales (`scaleLinear`, `scaleOrdinal`), and renders SVG circles, axes, and a color legend. Data is loaded asynchronously with `d3.csv`, and the chart includes labeled axes, a species-based legend, and tooltips showing formatted values.

May 21, 2021
Loading thumbnail…

Polished Scatter Plot With Menus

This interactive scatter plot visualizes the Iris flower dataset, allowing users to select which numerical attributes to plot on the X and Y axes from dropdown menus. The visualization uses React to manage state and render SVG elements, with D3.js providing scales, axes, and data loading. Users can compare any combination of sepal length, sepal width, petal length, and petal width, with each point representing an individual flower specimen. The interface includes axes with tick marks, axis labels, and tooltips that appear on hover, all styled with a clean, minimal aesthetic.

May 21, 2021
Loading thumbnail…

Scatter Plot With Menus

Three dropdown menus control the X and Y axes of a scatter plot, displaying Iris flower measurements from the classic dataset. Users select from attributes like sepal length or petal width, updating the plot dynamically. The React app uses `d3.scaleLinear`, `extent`, and `csv` for data loading and scaling. SVG circles render the points with tooltips, while axis components built with React generate ticks and labels.

May 21, 2021
Loading thumbnail…

React select

This example demonstrates how to filter a dataset using a React dropdown menu. It displays a simple bar chart of the top 10 most populous countries, using data from the United Nations World Population Prospects 2019. The React `Dropdown` component, built with the `select` element, manages state through `React.useState` and updates the chart based on the user's selection. The visualization uses `d3` v5 for rendering.

May 21, 2021
Loading thumbnail…

World Map

A world map visualizes global landmasses and graticules in an SVG rendering. The map displays continental borders and interior boundaries using distinct teal and gray strokes, with land areas filled in a muted teal. Built with React and D3 v5, the code employs `geoNaturalEarth1`, `geoPath`, and `geoGraticule` from D3, and uses TopoJSON's `feature` and `mesh` to process the world-atlas dataset. The projection from Natural Earth emphasizes a clean, stylized representation.

May 21, 2021
Loading thumbnail…

Stylized Scatter Plot

A stylized scatter plot displays the relationship between petal length and sepal width for the Iris dataset. The visualization uses React to render the SVG elements, with d3-scale providing the linear scales and d3-format handling tick label abbreviations. Circles represent individual flower measurements, and native SVG `<title>` elements provide hover tooltips. Axes are constructed manually using the d3 `scaleLinear` and `extent` functions, with the styling of tick marks and labels defined through CSS classes.

May 21, 2021
Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the top 10 most populous countries using a horizontal layout, with a teal fill for each bar. Built with React and D3 v5, the visualization uses `scaleBand` for the categorical y-axis and `scaleLinear` for the population x-axis, rendering bars as SVG rectangles via the `Marks` component. Axis ticks are styled with custom CSS, and population values are formatted with D3's `format` function, converting billions to display as "B". The data comes from the United Nations World Population Prospects 2019, loaded via D3's `csv` method.

May 21, 2021
Loading thumbnail…

Fork of Axes with React & D3

This chart displays the top 10 most populous countries as horizontal bars using React and D3 v5, with the data sourced from the UN World Population Prospects 2019. The view is a "pathetic bar chart" that intentionally omits axes, rendering the bars as SVG `<rect>` elements. React’s `useState` and `useEffect` manage the asynchronous CSV loading, while D3’s `scaleBand` and `scaleLinear` map country names and population values to coordinates. The `AxisBottom` and `AxisLeft` components generate tick marks, but the chart does not display them.

May 21, 2021
Loading thumbnail…

Fork of Loading Data with React & D3

This example demonstrates how to integrate React with D3 for data loading and display. It fetches a CSV file containing CSS named colors using D3’s `csv` utility, then stores the result in React state via the `useEffect` hook. After loading, the app renders a text summary using the `message` module, which reports the formatted data size in kilobytes, row count, and column count. The visualization uses React’s `useState` and `useCallback` hooks alongside D3’s `csvFormat` to present a minimal, text-based output.

May 5, 2021
Loading thumbnail…

Mouse follower

A colored circle follows the mouse across the screen, leaving a trail of fixed-size blobs whenever the left mouse button is held down. The interface includes a color picker and numeric size input to adjust the drawing properties, while a text readout shows raw or aspect-ratio–corrected coordinates. Built with React and rendered as SVG circles, the app uses `useState`, `useCallback`, `React.memo`, and window mouse event listeners to manage state and redraw efficiently.

Apr 29, 2021
Loading thumbnail…

Smiley Face Part 1

This example visualizes a stylized smiley face built from basic SVG shapes using React components and D3’s `arc` generator. The face consists of a yellow background circle, two black eyes positioned by offsets, and a smile drawn as an arc with configurable inner radius and stroke width. The `FaceContainer` creates an SVG canvas and translates its coordinate system to center the face via a `<g>` transform. The code demonstrates reusable React components for composition and D3’s arc API for path generation.

Apr 29, 2021