Steven Pearce

Fork of Customizing Axes

This visualization presents a horizontal bar chart of the top 10 most populous countries using 2018 United Nations population estimates (multiplied by 1000 from the CSV data). It demonstrates D3 v5 axis customization, including formatted tick labels (e.g., “1.42B”) via `d3.format` and removed default axis lines. The chart uses `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the y-axis, and `d3.axisBottom` with custom tick sizing. Rectangle marks are rendered in SVG, with styled fonts and fills from the linked CSS.

Apr 11, 2022

Fork of Sized Points on a Map

A world map displays cities with populations over 50,000, each represented by a semi-transparent circle whose radius is scaled by population using d3.scaleSqrt. The map uses d3.geoNaturalEarth1 and d3.geoPath to render land, graticules, and country boundaries from World Atlas TopoJSON, with data sourced from Simplemaps. React components manage state and rendering, while D3 loads the data via csv and json requests.

Fork of Points on a Map

This visualization shows a world map with cities of population greater than 50,000 plotted as semitransparent points. The map displays landmasses, graticules, and country interior boundaries. Using React for component structure, the code employs d3’s `geoNaturalEarth1` projection and `geoPath` to render geographic features, while city coordinates are projected and drawn as SVG circles. Data comes from the Simplemaps World Cities Database and World Atlas TopoJSON.

Fork of Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, showing petal length versus sepal width for three species of iris flowers. A static SVG renders circles for each data point, colored by species via a D3 ordinal scale. Hovering over a species label in the adjacent color legend fades out non-matching points and highlights the selected group. The implementation uses D3 scales (`scaleLinear`, `scaleOrdinal`) for axes and colors, React hooks for hover state, and renders everything as SVG elements.

Fork of Stylized Line Chart

This fork visualizes weekly temperature data for San Francisco as a smooth, stylized line chart rendered with SVG through React. Using d3’s scaleTime and scaleLinear, the chart maps timestamps to the x-axis and temperatures to the y-axis, with a natural curve applied via d3.line and curveNatural for a flowing path. The data is loaded from a CSV using d3.csv, and custom React components (AxisBottom, AxisLeft, Marks) handle axis rendering and the line, while the Poppins font and muted teal stroke give the chart a clean, modern look.

Fork of Vega-Lite API Template

This example visualizes the relationship between fuel efficiency, horsepower, weight, and country of origin for cars from the Auto MPG dataset, with a tooltip revealing each car’s name. Built using the `vega-lite-api` wrapper around Vega-Lite and Vega, it renders an interactive scatter plot where circle size encodes weight and color encodes origin. The code loads CSV data via `d3.csv`, configures axis and label styling, and fits the visualization to the window with an SVG renderer and tooltip handler.

Fork of Vega-Lite API Template

This example demonstrates the relationship between miles per gallon and horsepower for classic automobiles using a scatterplot with translucent points. The visualization loads data from a CSV file containing auto-mpg statistics and renders it through the Vega-Lite API, which is registered with Vega, Vega-Lite, and the vega-tooltip handler for interactive tooltips. The chart uses d3.csv to fetch and parse the data, while customizing axis styles and label formatting via the config object. The plot fills the entire viewport and includes tooltips displaying each vehicle’s name.

Fork of Loading Data with React & D3

This example demonstrates the use of React state to manage asynchronous data loading, displaying file size, row count, and column count from a CSS named colors dataset. The visualization shows a text summary rather than a graphical chart, with a loading message rendered while data is pending. The code uses React hooks like `useState` and `useEffect` to fetch and store data, while the `d3.csv` function loads the CSV and `d3.csvFormat` calculates the byte size. The dataset is sourced from a GitHub gist containing named CSS color values.

Fork of Loading and Parsing CSV Data

This example demonstrates loading and parsing CSV data from a remote URL using D3 v5 and React. It displays the size of the dataset in kilobytes, the number of rows, and the number of columns in a large text format. The code uses `d3.csv` to fetch and parse the data, alongside an alternative approach using the Fetch API with async/await and `d3.csvParse`. The data source is a CSV file containing CSS named colors hosted on GitHub Gist.

Fork of Mouse Follower

A gray circle follows the mouse cursor across a blank SVG canvas, updating its position with every pointer movement. The React component tracks the cursor’s clientX and clientY coordinates via the onMouseMove event, storing them in state and re-rendering the circle’s cx and cy attributes. The visualization uses React 16.9’s useState and useCallback hooks inside a functional component, rendering the shape through ReactDOM into an SVG element sized 960 by 500 pixels.

Fork of Loading and Parsing CSV Data

This example demonstrates the amount of CSV data loaded from a remote URL, displaying the file size, row count, and column count, then rendering these metrics as plain text within an HTML `<pre>` element. It uses D3 v5’s `d3.csv` promise-based API to fetch and parse the CSS Named Colors dataset. The visualization also includes commented-out alternatives using the Fetch API with `async`/`await` and `d3.csvParse`, alongside a nested promise “pyramid of doom” example. The output is minimalist, focusing solely on the parsed data’s descriptive statistics.