Skip to main content
Log in
S

Stoo Sepp

@stoosepp·15 public vizzes

Loading thumbnail…

Ep24 Stylized Bar Chart

This stylized bar chart displays the projected 2020 populations for ten countries from the United Nations World Population Prospects 2019 dataset. The visualization uses a horizontal layout with a clean, modern aesthetic, featuring teal bars and custom Poppins typography. Built with React and D3 v7, the chart employs `scaleBand` for the categorical country axis and `scaleLinear` for the population values. A formatted tooltip using D3’s `format` function shows precise population figures, while custom SVG axis components render labeled ticks for both axes.

Aug 12, 2024
Loading thumbnail…

Ep29 World Map

This visualization shows a world map rendered as a single SVG, displaying landmasses, country interiors, a graticule, and a sphere outline. It uses the `geoNaturalEarth1` projection with `geoPath` from d3 to translate geographical features into paths, and `geoGraticule` to create the latitude and longitude grid. The map is colored with a teal land fill, a light grey sphere background, and an orange-brown graticule, and is built in React, loading world data from the `world-atlas` package.

Nov 4, 2021
Loading thumbnail…

Ep26 Line Chart

This example visualizes San Francisco weekly temperatures over time using a line chart. The code leverages React and D3 v7, loading data from a CSV file and rendering the chart as SVG. A natural curve is applied to the line path using D3's `line` and `curveNatural` functions, with custom tick components for the axes. The visualization is styled with the Poppins font and a teal color scheme, highlighting temperature trends while the code comments show optional data point circles and tooltips.

Nov 2, 2021
Loading thumbnail…

Ep25 Iris Scatter Plot

This scatter plot visualizes the Iris dataset, plotting sepal length against sepal width for each flower specimen. The visualization uses React with D3 v7’s `scaleLinear` and `extent` to map data to SVG coordinates, with custom `AxisBottom` and `AxisLeft` components rendering tick marks. Each data point appears as a teal `circle` with a native SVG `<title>` tooltip showing the x-value. Data loads asynchronously from a CSV via the `csv` function inside a custom `useData` hook. Styling includes Poppins font and gray axis ticks.

Nov 2, 2021
Loading thumbnail…

Ep23 Refactored Bar Chart

This example displays a horizontal bar chart of the top 10 countries by population in 2020, according to UN data loaded from a CSV file. Built with React and D3 v7, the chart is rendered as SVG. The code constructs the visualization using modular components, with `AxisBottom` generating the quantitative scale ticks, `AxisLeft` labeling the categorical country names, and `Marks` drawing the bars. The `useData` hook fetches the data, while `scaleBand` and `scaleLinear` handle the layout.

Oct 30, 2021
Loading thumbnail…

Ep22 UN Bar Chart with Margins

This example displays a horizontal bar chart showing the 2020 populations of the first ten countries in a UN population dataset loaded from a GitHub CSV file. It illustrates how D3's `scaleBand` and `scaleLinear` APIs position the bars, with margins set on the SVG canvas via the `margin` object and a `g` element translation. React's `useState` and `useEffect` hooks load the data asynchronously, rendering a "Loading..." message until the data arrives. The SVG rendering includes axis tick labels generated from the scales.

Oct 30, 2021
Loading thumbnail…

Ep21 United Nations Bar Chart

This example displays a horizontal bar chart of the ten most populous countries in 2020, using data loaded from a CSV file of United Nations population estimates. The chart uses SVG rectangles, with each bar’s width scaled by population via `d3.scaleLinear` and its vertical position determined by `d3.scaleBand` based on country name. React manages the data-fetching state through a `useState` hook and `useEffect`, while `d3.csv` asynchronously loads and parses the dataset. The visualization updates only once when the component mounts, rendering a static comparison of national population sizes.

Oct 30, 2021
Loading thumbnail…

Ep 20 Rendering Data in React and D3

This visualization displays all CSS named colors as an SVG pie chart, with each slice filled using its corresponding HEX code from a CSV dataset loaded via `d3.csv`. The React `useState` and `useEffect` hooks manage the asynchronous data fetch, initially showing a loading message. The `d3.pie` and `d3.arc` functions generate the arcs, which are rendered as SVG `<path>` elements within a React component, with a black circular outline drawn from `centerY`. The code uses D3 v7 and React 16.9 in the browser.

Oct 30, 2021
Loading thumbnail…

Ep 20 Rendering Data in React

This example renders the CSS Named Colours dataset as a vertical stack of horizontal color swatches, one per named color, with each swatch’s background set to its HEX code. The React component uses the `useState` and `useEffect` hooks to load the CSV via `d3.csv` from a GitHub gist, displaying a “Loading…” message until the data arrives. Once loaded, it maps over the rows to produce the colored div elements, demonstrating a simple data-driven rendering workflow with React and D3 v7.

Oct 30, 2021
Loading thumbnail…

Ep18: Vega-Lite API Temperature

This visualization displays daily temperature readings over time as a scatter plot, using color and vertical position to encode temperature values. Built with the Vega-Lite API, it renders data from a CSV file of San Francisco weekly temperatures, fetched via d3.csv. The chart is configured with custom styling for axis labels and titles, and includes interactive tooltips that display nominal temperature labels. The visualization adapts to the full browser window using an SVG renderer, with circles sized and semi-transparent for improved readability.

Oct 26, 2021
Loading thumbnail…

Ep18: Vega-Lite API

This visualization displays automobile data from a CSV file, plotting engine origin, horsepower, weight, and miles per gallon as a scatter plot with circles of varying size and color. The example highlights the convenience of the Vega-Lite API (vl) for declarative charting, which constructs and renders the specification. It uses vega-lite and vega to compile the spec, d3.csv for data ingestion, and vega-tooltip to provide interactive tooltips on hover. The chart is configured to fit the browser window.

Oct 26, 2021
Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse a CSV file from a remote URL using D3.js. It fetches a dataset of CSS named colors stored as a GitHub gist and displays basic summary statistics about the file, including the total number of rows, column count, and approximate file size in kilobytes. The code uses the `d3.csv()` function to retrieve and parse the data asynchronously, then accesses the resulting array’s `length` and `columns` properties. The parsed output is converted back to CSV with `d3.csvFormat()` to calculate its size. A simple HTML `<pre>` element displays the final message, with styling applied via CSS.

Oct 24, 2021
Loading thumbnail…

Ep 14 Interaction with React

A simple face made of SVG shapes responds to the mouse in real time. The code uses React state with a `useState` hook and `onMouseMove` handler to track cursor position, then updates a blue pupil circle accordingly. D3’s `arc` generator draws the mouth path, while static black eyes and a wheat-colored face circle are rendered as SVG elements. The example demonstrates combining D3’s geometry helpers with React’s declarative rendering for interactive visualizations.

Oct 24, 2021
Loading thumbnail…

Monotreme Face Using React Compontents

A grid of 18 SVG faces, each with a wheat-colored circular background, black eyes, and an arc-shaped mouth, all rendered using React components. The faces vary randomly in eye placement, eye radius, mouth radius, and mouth width, giving each a distinct expression. The code uses D3's `arc` API to generate the mouth path and the `range` function to create the grid. React's component-based structure, with `Face`, `FaceContainer`, `BackgroundCircle`, `Eyes`, and `Mouth` components, builds each face. This example demonstrates how React and D3 can be combined to create modular, data-driven SVG visualizations.

Oct 20, 2021
Loading thumbnail…

Monotreme's Fork Of Face

This example renders a stylized face built from basic SVG shapes using React and D3. It shows a large circular head with two black eyes, white eye twinkles, and a curved mouth path. The code uses D3’s `arc` generator to define the mouth’s shape and draws all elements inside a single `<svg>` with explicit coordinates and radii. The visualization is static, with no interactivity or data binding.

Oct 19, 2021