ikerson

@ikerson·9 public vizzes

United Nations Population Bar Chart

This example displays the 2020 population estimates for countries from the United Nations’ 2019 dataset as a horizontal bar chart. React renders SVG rectangles, with D3’s `scaleBand` positioning each country along the y-axis and `scaleLinear` mapping population counts to bar widths. The visualization loads CSV data via `d3.csv` and updates once the data arrives, showing a “Loading…” state beforehand.

Aug 10, 2021

Loading thumbnail…

Color Wheel with React

This color wheel visualizes all CSS named colors as a single burst of pie slices radiating from the center. Each slice represents one color from the CSS color data loaded via `d3.csv`. The React app uses `useState` and `useEffect` to fetch the data, then renders SVG paths computed with `d3.pie` and `d3.arc`. The `fill` property of each path is set to the color’s hex value from the dataset, creating a full-spectrum circular arrangement.

Aug 10, 2021

Loading thumbnail…

Vega-Lite Timeseries Data

This example visualizes weekly temperature data for San Francisco as a smooth, semi-transparent area chart, with time on the x-axis and temperature on the y-axis. Hovering reveals the exact temperature via a tooltip. The visualization is built declaratively using the Vega-Lite API, with `vl.markArea` and encodings for timeline and quantitative scales. D3’s `csv` loader fetches the data from a remote GitHub URL, while Vega, Vega-Lite, and Vega-Tooltip handle rendering and interactions. Custom styling is applied through a configuration object that adjusts axis fonts and colors.

Aug 9, 2021

Loading thumbnail…

Vega-Lite Weight vs. Horsepower

This example visualizes the relationship between vehicle weight, horsepower, and fuel efficiency using a scatter plot. Each circle’s position encodes weight and horsepower, while its size represents miles per gallon, and its color encodes weight, with tooltips displaying vehicle names. Built with the Vega-Lite API, the code registers Vega and Vega-Lite libraries, loads data from a CSV via d3.csv, and renders the chart as an SVG using a custom configuration that adjusts axis styles and label fonts.

Aug 9, 2021

Loading thumbnail…

Loading Data with React & D3

This example demonstrates how to load and summarize CSV data using React hooks and D3 utilities. It displays the file size in kilobytes, row count, and column count as plain text. The application uses React's `useState` and `useEffect` hooks to fetch and store the parsed data, while D3's `csv` function handles the remote data loading from a GitHub gist URL. The `message` module formats the data statistics using `d3.csvFormat`.

Aug 9, 2021

Loading thumbnail…

Load and Viz Data

This example demonstrates loading a CSV file from a GitHub gist using D3 v5 and displaying basic statistics about the dataset, including its size in kilobytes, row count, and column count. The visualization renders these metrics as plain text in a large HTML `<pre>` element. The code uses the `d3.csv` method to fetch and parse the data asynchronously, then calls `d3.csvFormat` to measure the formatted string length. The commented sections show alternative approaches using `fetch` and `d3.csvParse`.

Aug 9, 2021

Loading thumbnail…

Mouse Follower

A circle tracks the mouse cursor in real time across an SVG canvas. The React component uses the `onMouseMove` event to update the circle's center coordinates via the `useState` and `useCallback` hooks. The circle is rendered with SVG, and its position is driven by the client X and Y values from the mouse event. The example demonstrates a simple interactive visualization with React and SVG.

Aug 8, 2021

Loading thumbnail…

Smiley Face

A grid of eighteen smiley faces, each rendered as a yellow circle with black stroke, two eyes, and a curved mouth, shows randomized variation in facial feature size and position. Built with React and D3, the code uses the `arc` generator from D3 to create the mouth path, while SVG circles form the face and eyes. The `range` function from D3 generates the array for the grid, and each face is positioned via a transformed group within an SVG container.

Aug 8, 2021

Loading thumbnail…

Fork of Smiley Face Part V

This example builds a smiling face in SVG using React components split into separate ES6 modules. The face is centered on a yellow circle with black stroke, featuring two eyes and an arc-based mouth. The `BackgroundCircle`, `Eyes`, and `Mouth` components each receive explicit props for geometry, while `Mouth` uses the D3 `arc` generator to create a semi-circular path. React fragments group the eye circles, and the root `App` component renders everything within a single SVG coordinate system.

Aug 8, 2021