Skip to main content
Log in
O

Olof Ollerstam

@OlofO·24 public vizzes

Loading thumbnail…

Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, mapping petal length against sepal width for three iris varieties. The d3.scaleOrdinal color scale encodes species, while d3.scaleLinear handles both axes. Hovering over any item in the React-rendered color legend highlights matching points and fades the rest using opacity transitions, driven by state management in React hooks.

Jul 7, 2022
Loading thumbnail…

Stylized Bar Chart

This example shows the top 10 most populous countries as a horizontal bar chart, with population values from the United Nations World Population Prospects 2019. The visualization uses React to render SVG elements, with d3.scaleBand and d3.scaleLinear for positioning, and d3.format to abbreviate tick labels (e.g., “1.4B”). The d3.csv loader imports the data, and native SVG <title> elements provide tooltips on hover.

Jul 5, 2022
Loading thumbnail…

Points on a Map

A world map rendered with a natural Earth projection displays city locations as circular points, using teal landmasses with graticules and gray interior borders. The visualization loads geographic data from a TopoJSON world-atlas file and city coordinates from a CSV dataset, processing both through React hooks. D3’s `geoPath` and `geoNaturalEarth1` project the map, while the points are positioned by projecting each city’s longitude and latitude. SVG circles with a radius of four pixels mark each city, and axes are absent, keeping the focus on spatial distribution.

Jan 18, 2022
Loading thumbnail…

Scatter Plot with Color Legend

A scatter plot of the Iris dataset shows petal length against sepal width, with each of the three iris varieties colored distinctly via an ordinal color scale and a legend. Built with React and D3 v5, it uses `d3.scaleLinear` for the axes and `d3.scaleOrdinal` for colors, rendering SVG circles with hover tooltips formatted via `d3.format`. The chart reads data from a CSV file loaded with `d3.csv`, with axes and legend drawn as reusable React components.

Dec 21, 2021
Loading thumbnail…

Scatter Plot with Color

This scatter plot visualizes the Iris dataset, showing petal length against sepal width for three flower varieties. Each point is colored by variety using a d3.scaleOrdinal with a custom color range, and the axes are rendered with React components that wrap d3.scaleLinear scales. The SVG circles include a title tooltip displaying the formatted x-value. Data is loaded asynchronously via d3.csv and parsed with a row function.

Dec 9, 2021
Loading thumbnail…

Polished Scatter Plot with Menus

This scatter plot visualizes the Iris dataset, letting users explore relationships between flower measurements. Two dropdown menus, built with ReactDropdown, select which attributes (sepal length/width, petal length/width) appear on the x and y axes. The visualization uses React with hooks to manage state, while d3.scaleLinear and d3.extent compute the scale domains. SVG circles represent data points, with d3.csv loading the dataset and custom React components handling axes and marks. Data is rendered from a remote CSV file.

Dec 7, 2021
Loading thumbnail…

Scatter Plot with Menus

A scatter plot of the Iris dataset allows interactive selection of the x- and y-axis attributes via dropdown menus. Built with React and D3 v5, it renders SVG circles using scales created with `scaleLinear` and computes axis ticks from `xScale.ticks()` and `yScale.ticks()`. The menus map attribute names like petal length and sepal width to their numeric values from the CSV data loaded through `d3.csv`.

Nov 18, 2021
Loading thumbnail…

Menus with React

This example demonstrates a simple pet selection menu built with React. The interface presents a dropdown list of six pet options, from Dog to Goldfish, with a default selection of Hamster. The app uses React’s `useState` hook to manage the selected value and a reusable `Dropdown` component, which renders the native HTML `<select>` element. Changes to the selection are logged to the console. The component maps over an array of option objects to generate the dropdown entries, relying on React’s `ReactDOM.render` to mount the app.

Nov 8, 2021
Loading thumbnail…

React Starter

This example shows a minimal React application that renders the text “Hello React!” in the browser. It uses React and ReactDOM to create and mount a functional component called `App` into a `div` element with the ID `root`. The rendering relies on `ReactDOM.render` from React 16.9.0, loaded via UMD scripts, and the component returns JSX directly. The code does not include any data visualization or D3 functionality.

Oct 19, 2021
Loading thumbnail…

Fork of Smiley Face Part II

A yellow smiley face is rendered as an SVG graphic, filling the entire browser window. The face scales with the viewport, centering itself and adjusting its radius based on the window’s height. The code uses React 16.9 to create SVG circle elements for the face, eyes, and mouth, with styling applied via SVG attributes. The rendering is dynamic, recalculating positions on load, and includes a video tutorial in the README.

Oct 19, 2021
Loading thumbnail…

World Map

A world map displays country boundaries and landmasses on a graticule grid within a natural Earth projection. The visualization uses React to render SVG paths generated by d3.geoPath, with geographic data from the world-atlas TopoJSON dataset. Land areas appear teal against light gray spheres, while interior borders are drawn as thin gray lines. The code employs d3.geoNaturalEarth1 for projection and d3.geoGraticule to generate the latitude-longitude grid.

Jul 6, 2021
Loading thumbnail…

Smiley face Part 3

This example shows a smiley face rendered as a reusable React component, composed of separate parts for the background circle, eyes, and mouth. The face is drawn using SVG elements within a container that translates the coordinate system to the center of the viewport. React components manage the layout, while an SVG arc generator from D3 shapes the mouth. The code uses React 17 and D3 v6, with the face’s geometry controlled by props for position, size, and stroke width.

Jun 14, 2021
Loading thumbnail…

Working with Time

A line chart of weekly temperature readings from the Data Canvas Sense Your City dataset displays temperature over time. The React app uses D3 v5’s `scaleTime`, `scaleLinear`, and `line` with `curveNatural` to render the SVG path. Custom `AxisBottom` and `AxisLeft` components generate ticks, while data is loaded via `d3.csv` with timestamps parsed as `Date` objects.

Jun 4, 2021
Loading thumbnail…

Stylized Scatter Plot

This stylized scatter plot visualizes the Iris Dataset, mapping petal length against sepal width. Built with React and rendered as SVG, it uses D3 v5 functions like `scaleLinear` and `extent` to create the axes and scale the data points. The graph employs `csv` to load the dataset and displays circles with tooltips showing their values. The design features a distinctive Poppins font and teal color scheme.

May 31, 2021
Loading thumbnail…

Refactored Bar Chart

A refactored bar chart displays the top ten countries by 2020 population from a United Nations dataset, using horizontal bars to compare values. The React application loads the CSV with d3.csv and renders an SVG, splitting visualization into reusable components for axes and marks. D3 scales—scaleBand for the categorical y-axis and scaleLinear for the quantitative x-axis—position the bars, while axis components generate ticks and labels. The code separates data fetching, rendering, and layout concerns, demonstrating a modular approach to building interactive charts with React and D3 v6.

May 18, 2021
Loading thumbnail…

Axes with React & D3

A horizontal bar chart displays population estimates for the ten most populous countries in 2020. The example combines React with D3 utilities, using `d3.csv` to load United Nations population data and `scaleLinear` and `scaleBand` to compute positions. React renders the SVG elements, including axis ticks generated via `xScale.ticks()`, while D3’s `max` determines the domain. The chart includes both numeric x-axis gridlines and country labels for the y-axis.

Apr 28, 2021
Loading thumbnail…

The margin convention

This example demonstrates the margin convention in D3 by rendering a horizontal bar chart of the ten most populous countries in 2020, using data from the UN Population dataset. The chart scales country names with `d3.scaleBand` and population values with `d3.scaleLinear`, then draws SVG rectangles inside a translated group element. The code loads the CSV via `d3.csv`, manages state with React hooks, and renders the visualization with React DOM, enforcing consistent margins around the plotting area.

Apr 22, 2021
Loading thumbnail…

Population bar chart

This example visualizes the 2020 populations of the ten most populous countries using horizontal bars, with country names on the y-axis and population counts on the x-axis. The visualization is implemented as a React component that loads CSV data through the d3.csv utility, then renders scaled SVG rectangles using d3.scaleBand and d3.scaleLinear for positioning and sizing. Data for each country is parsed from the UN Population 2019 dataset.

Apr 22, 2021
Loading thumbnail…

Rendering Data with React & D3

A radial burst chart displays the relative frequency of CSS named colors, with each color represented as a slice of a circle. The visualization loads color data from a CSV file using D3’s `csv` utility, then constructs the pie layout with `d3.pie` and `d3.arc`. React, with hooks like `useState` and `useEffect`, manages the data fetching and renders each slice as an SVG `path` element, filling it with the color’s hex value from the dataset.

Apr 7, 2021
Loading thumbnail…

Rendering Data with React

This example visualizes CSS named colors by rendering each color as a horizontal stripe, creating a full-spectrum block of 148 color swatches. The code loads color data from a CSV file using D3’s `csv` utility, then uses React’s `useState` and `useEffect` hooks to fetch and store the data. React renders each row as a `div` with the background color set to the `RGB hex value` field, producing a stacked display of all named colors.

Mar 31, 2021
Loading thumbnail…

Loading Data with React and D3

This example demonstrates a minimal React application that leverages D3's `csv` utility to fetch a remote dataset of CSS named colors. The interface initially displays a "Loading..." message, then presents a concise summary of the file's size in kilobytes, row count, and column count. React's `useState` and `useEffect` hooks manage the asynchronous data loading, while a custom `message` function formats the derived statistics. The page uses the `react` and `react-dom` libraries for component rendering, with the data retrieved from a raw GitHub Gist URL.

Mar 30, 2021
Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using D3.js, displaying summary statistics about a dataset of CSS named colors. It uses the `d3.csv` method to fetch and parse the remote CSV file, then reports the file size in kilobytes, the number of rows, and the number of columns in the message container. The code also includes commented-out alternatives using the Fetch API with `async/await` and `d3.csvParse` to achieve the same result.

Mar 30, 2021
Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes automobile performance data from the UCI Auto MPG dataset, mapping model year on the x-axis, horsepower on the y-axis, and color-coding points by country of origin while sizing them by weight. The visualization is built using the Vega-Lite API, which registers with Vega and Vega-Lite, and renders as an SVG. It loads data via `d3.csv`, applies custom axis and label styling from a config object, and includes tooltips that display all data attributes on hover. The chart automatically fits the browser window dimensions.

Mar 24, 2021
Loading thumbnail…

Mouse Follower

A yellow circle tracks the cursor's position within an SVG canvas. The circle's center coordinates are updated with each mouse movement, creating a direct one-to-one mapping between the pointer and the graphic. Built with React, the application uses the `useState` hook to store the current mouse coordinates and the `useCallback` hook to manage the event handler. The SVG element listens for the `onMouseMove` event, and ReactDOM renders the circle with a 30-pixel radius onto the 960 by 500 pixel canvas.

Mar 17, 2021