Alexander Dorling

Stylized Bar chart - Countries by population

A bar chart visualizes the populations of the top 10 most populous countries, with horizontal bars ordered by country name and labeled with population values formatted in billions. Built with React and D3 v6, it loads UN population data from a CSV URL, sorts the first 10 rows, and uses scaleBand and scaleLinear to position marks. SVG rects render the bars with a yellow tooltip on hover, styled with the Poppins font.

Refactored Bar chart - Countries by population (top 10)

This bar chart displays the top 10 most populous countries in 2020, with each country's total population represented by the length of its corresponding bar. The visualization uses React components to render SVG elements, with d3.scaleBand and d3.scaleLinear handling the categorical and linear scales for the country names and population values. Data is loaded asynchronously from a CSV file using d3.csv, and the chart is composed of separate AxisBottom, AxisLeft, and Marks components that are refactored for clarity. The bars are drawn as SVG rect elements within a 960×500 viewport.

(axis w/ react & d3) Countries by population (top 10)

This example visualizes the top 10 most populous countries in 2020 as a bar chart, using a horizontal layout. It shows the population counts along the x-axis and country names along the y-axis, with gridlines and tick labels generated manually. The code loads data from a CSV file using `d3.csv`, processes it in a React component with hooks (`useState`, `useEffect`), and uses `scaleBand` for the y-axis, `scaleLinear` for the x-axis, and `max` from d3. React elements are used to render SVG bars, text labels, and lines, with ReactDOM mounting the component.

(margin convention) Countries by population (top 10)

A horizontal bar chart displays the top 10 most populous countries in 2020, with bar length encoding population size. The visualization uses React to manage state and render SVG elements, while d3-scale’s `scaleBand` and `scaleLinear` compute the y and x positions. Data is loaded asynchronously via d3.csv from a UN population dataset, then sorted and sliced to the first ten rows. The chart applies a margin convention, translating the inner group by `margin.left` and `margin.top` to position bars within the SVG canvas.

("Pathetic bar chart) Countries by population (top 10)

This example displays the top 10 most populous countries as horizontal bars, with bar length proportional to each country’s 2020 population estimate. The data comes from a CSV file of UN population figures, loaded via `d3.csv` and processed with a custom row function. The visualization uses React state to manage the data, and D3’s `scaleBand` and `scaleLinear` to compute bar positions and widths. Each bar is rendered as an SVG `<rect>` element, with the chart updating once the data loads. The page shows a loading message until the dataset is ready.

Fork of Rendering data with react and d3 (CSS colors)

This example displays all named CSS colors as a radial burst, with each color represented as a slice of a pie chart emanating from the center. It loads color data from a CSV file using `d3.csv`, then uses React’s `useState` and `useEffect` hooks to manage the asynchronous data fetching. The visualization renders SVG paths via React, with `d3.pie` and `d3.arc` computing the slice angles and geometry. Each path’s fill is set directly from the CSV’s RGB hex value column.

Rendering data with react and d3 (CSS colors)

A React application that visualizes CSS named colors as a stacked sequence of horizontal stripes. The example loads color data from a CSV file using D3's `csv` function, then maps each color record to a `<div>` element styled with its corresponding `RGB hex value` as the background color. Each stripe has a fixed width and height, and the page initially displays "Loading..." until the asynchronous data fetch completes. The code combines React hooks (`useState`, `useEffect`) for state management with D3 for data acquisition, rendering the final result as a vertical color spectrum.

Fork of Vega-Lite API Template

This example shows the global distribution of religious populations across countries using a bubble chart, where each circle’s size encodes the population count and its position maps country and religion on the axes. The visualization is built with the Vega-Lite API, which registers Vega and Vega-Lite libraries, and it renders as an SVG via the `vl.markCircle` and `vl.encode` functions. Data is loaded asynchronously from a CSV using D3’s `csv` method, and a custom config object adjusts axis styling and font sizes for readability.

Load data with React & D3

This example demonstrates a minimalist approach to loading external data in a React component alongside D3, displaying the dataset's size in kilobytes, row count, and column count as large text. The application fetches a CSV file of CSS named colors from a GitHub gist using D3's `csv` function, storing the parsed result in React state via a `useEffect` hook. While loading, it shows a "Loading..." message, and once the data arrives, it computes the file size using D3's `csvFormat` method and renders the summary using a custom `message` module.

Loading a parsing CSV Data.

This example demonstrates how to load and parse CSV data using D3 v6, displaying file size, row count, and column count in large text. The code fetches a CSS named colors dataset from a GitHub Gist URL using d3.csv, which parses the remote CSV file into an array of objects. It then formats the data with d3.csvFormat, calculates its size in kilobytes, and accesses row and column counts through the parsed data array and its columns property. The results are written into the DOM via a pre element.

May 11, 2021

Mouse follower

A circle in an SVG chart follows the cursor as it moves across the viewport. React state tracks the mouse position, updated through an `onMouseMove` event handler. The `useState` and `useCallback` hooks manage the coordinate updates, while `ReactDOM.render` mounts the component. The circle’s `cx` and `cy` attributes are bound directly to the tracked `x` and `y` values, creating a real-time interactive visualization with no external data source.

May 11, 2021

Fork of Fork of Smiley Face VI

A React-built smiley face renders as scalable vector graphics, with yellow circular background, black outlined stroke, two eyes, and a partial mouth arc. The face is composed of modular components, with parameters for position, size, and stroke width. It uses the D3.js `arc` function for the mouth path, while React’s SVG elements handle the circles and grouping, all coordinated through a face container.

May 10, 2021

Fork of Smiley Face V

A yellow smiley face with a black outline, black oval eyes, and a wide arc-shaped mouth is rendered on an SVG canvas. The visualization uses React to build the graphic from three separate components, with the mouth path generated using the D3 `arc` function to create a precise curved shape. The face is centered and scaled to fit the 960 by 500 pixel viewport.

May 10, 2021