Mark Simpson

@markyz89·9 public vizzes

Stylised Bar chart

A stylized bar chart displays the populations of ten countries in 2020, sourced from the UN Population CSV file. Built with React and D3 v5, it renders as SVG, using `scaleBand` for the categorical Y-axis and `scaleLinear` for the numeric X-axis. The code defines custom `AxisBottom` and `AxisLeft` components, while each bar includes a native SVG `<title>` element for hover tooltips. The chart features a large Poppins font, teal bars, and a formatted axis label that abbreviates billions as “B”.

Jan 28, 2026

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the classic Iris flower dataset, allowing users to explore relationships between sepal and petal measurements by selecting which attribute is mapped to the x and y axes via dropdown menus. The visualization is built with React and D3 v5, rendering an SVG with custom axis components and circular marks that display tooltips on hover. The menus dynamically update the plot, which uses d3.scaleLinear for axis scaling and d3.extent for data domains, drawing from a CSV file loaded with d3.csv.

Nov 19, 2025

Loading thumbnail…

Menus with React

This example demonstrates a simple React application that renders the text "Hello React!" in the center of the browser window. The code calculates the window dimensions and positions the message at the exact center using JavaScript calculations. It uses React 16.9.0 and ReactDOM to mount the App component into the root div, with the UI defined through JSX syntax. The example shows the basic setup for a React-based data visualization project, providing a starter template that can be extended with additional visualization libraries.

Nov 14, 2025

Loading thumbnail…

React Starter

This example shows a minimal React application that renders the text “Hello React!” to fill the browser window. It uses React 16.9 and ReactDOM to mount a single functional component into a root div, with global styles that remove margins and hide overflow. The code calculates window dimensions and predefined facial feature constants, though these values are not yet applied to any visual output. It demonstrates a basic setup for integrating React with a blank canvas for future data visualizations.

Nov 14, 2025

Loading thumbnail…

World Map

This world map uses D3’s natural Earth projection to display landmasses in teal against a light graticule and sphere. The SVG marks define geographic paths for countries, interiors, and a globe outline, rendered via `d3.geoPath`. Topological data from the world-atlas package is processed with `topojson.feature` and `mesh` to derive boundaries. Built with React, the visualization updates once the JSON loads, though the initial state shows a loading message.

Nov 12, 2025

Loading thumbnail…

Stylised Line Chart

This stylised line chart visualizes temperature over time, using a smoothed natural curve to connect data points. The visualization employs React with D3 v5 to manage scales and axes, specifically using `scaleTime` for the x-axis and `scaleLinear` for the y-axis. The chart renders as an SVG with a Poppins font, drawing both axis ticks and the line path via D3's `line` and `curveNatural` functions. Temperature data is loaded from an external CSV file, and the chart highlights the trend with a bold teal stroke.

Nov 5, 2025

Loading thumbnail…

Scatterplot

This scatterplot visualizes the classic Iris dataset, plotting petal length against sepal width for individual flowers. The React-based SVG chart uses D3's `scaleLinear` and `extent` functions to map data coordinates, with custom `AxisBottom` and `AxisLeft` components rendering tick marks and labels. Points are displayed as teal circles with a fixed radius, and hovering reveals a tooltip via the SVG `<title>` element. Styled with the Poppins font, the visualization employs D3's `csv` loader to fetch and parse the data from a remote GitHub gist.

Oct 31, 2025

Loading thumbnail…

Refactored Bar chart with React & D3

This example shows a horizontal bar chart of the top 10 most populous countries, with population values on the x-axis and country names on the y-axis. Built with React components that render SVG elements, it uses `d3.scaleBand` for the y-axis categories and `d3.scaleLinear` for the x-axis range. The data is loaded with `d3.csv` from a GitHub-hosted dataset, and axes are drawn using custom React components that generate `<line>` and `<text>` elements.

Oct 15, 2025

Loading thumbnail…

Bar chart with React & D3

This bar chart displays the projected 2020 populations of the ten most populous countries, using a horizontal layout with a linear scale for population values and a band scale for country names. Built with React and D3 v5, the chart is rendered as SVG, with axes, gridlines, and bars drawn from a CSV dataset. The code leverages `d3.csv`, `d3.scaleBand`, `d3.scaleLinear`, and `d3.max` for data processing and scaling, while React's `useState` and `useEffect` manage asynchronous data loading and re-rendering.

Oct 8, 2025