alexanderjpark

@alexanderjpark·7 public vizzes

Fork of Rendering Data with React & D3

This example shows a bar chart of the ten most populous countries for 2020, using data loaded from a CSV file of UN population estimates. The visualization renders as a series of horizontal rectangles whose lengths correspond to each country’s population. Built with React for component structure and D3 utilities for data loading (`d3.csv`) and scaling (`scaleBand`, `scaleLinear`), the chart is drawn as an SVG. The code uses React hooks (`useState`, `useEffect`) to fetch and store the data, then maps it directly to `<rect>` elements.

Jan 9, 2022

Loading thumbnail…

Fork of Rendering Data with React

A circular color wheel displays 148 named CSS colors as pie slices, each filled with its corresponding RGB hex value. The visualization loads data from a CSV file using `d3.csv`, then renders each slice as an SVG `<path>` element via `d3.arc`. React manages the data fetching with `useState` and `useEffect`, while `pieArc` calculates the angular segments. The example demonstrates the integration of React 16.9 and D3 v7 for data-driven SVG rendering, with a loading message shown until the dataset arrives.

Jan 9, 2022

Loading thumbnail…

Rendering Data with React

This example demonstrates rendering a color swatch for every named CSS color, with each row displayed as a colored horizontal bar. The data is loaded from a CSV file using D3’s `csv` method, while React manages the component state with `useState` and `useEffect` to fetch and display the data. The bars are created by mapping over the parsed array and setting the `backgroundColor` style to each color’s hexadecimal value. A loading message appears until the data arrives, and the color strips are rendered at fixed dimensions within a React component mounted via `ReactDOM.render`.

Jan 9, 2022

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes budget data by service category over time using an area chart. The interactive tooltip, appearing on hover, reveals the total budget for each service in a given year. The visualization is built with the Vega-Lite API, which programmatically constructs the chart specification. The code loads CSV data from a GitHub URL, binds the renderer to an SVG view, and configures the dark theme and axis styling. It also leverages the vega-tooltip library's `Handler` for interactive feedback.

Jan 5, 2022

Loading thumbnail…

Mouse Follower

An interactive React and SVG visualization demonstrates mouse tracking by rendering a single black circle that follows the cursor across a 960x500 coordinate space. The app uses the `useState` hook to store the mouse position and a `useCallback`-wrapped event handler to update that state on every SVG `onMouseMove` event. The circle’s center coordinates are bound directly to the current mouse position, producing a seamless, real-time response. The initial position is set to the viewport’s center, and the circle radius is fixed at 30 pixels.

Jan 4, 2022

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse a CSV file in the browser using the Fetch API and D3 v7. It fetches a remote CSV containing CSS named colors, parses it with `d3.csvParse`, and displays the file size, row count, and column count as large text on the page. The visualization highlights the parsed data structure’s dimensions rather than plotting points.

Jan 4, 2022

Loading thumbnail…

Smiley Face Part I

Small yellow smiley faces repeat in a uniform grid, each with a black circular outline, two eyes, and an arched mouth. The face positions are fixed, but eye offsets, eye radius, mouth radius, and mouth width vary randomly per instance, creating subtle differences across the grid. Built with React and d3, the example uses declarative SVG components for the face parts and d3’s `arc` generator to shape the mouth. Each `<svg>` element is rendered by mapping over a `range` from d3.

Jan 2, 2022