Andy Chang

@andyrochi·11 public vizzes

Fork of Color and Size Legends

This fork of the color and size legends example displays separate reusable legend components, each implemented as a D3.js module. The color legend maps a categorical ordinal scale to colored circles, while the size legend (present but commented out) maps a quantitative square-root scale to varying circle radii. Both use D3 v5’s selection API and `scaleOrdinal`/`scaleSqrt` with an SVG `g`-based tick layout, with text labels offset from the shapes.

Oct 1, 2022

Loading thumbnail…

Iris Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Machine Learning Repository’s Auto MPG dataset. It uses D3 v5 to load the CSV data, scale linear axes, and render red, semi-transparent circles in an SVG. The code employs `scaleLinear`, `extent`, `axisBottom`, and `axisLeft` to construct the chart, with labeled axes and a title. Data values are explicitly converted to numbers before rendering, and the visualization includes tick marks, grid lines, and custom styling for text and circles.

Sep 30, 2022

Loading thumbnail…

Bar Charts with D3

This example displays a horizontal bar chart ranking the populations of ten countries, from China at the top to Mexico at the bottom. The bars are rendered as SVG rectangles with a steelblue fill, and the chart includes labeled axes for both country names and population values. The visualization is built using D3 v7, employing functions such as `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to manage the scales and axes. Data is loaded from a local CSV file and parsed to numeric values before being passed to the render function.

Sep 30, 2022

Loading thumbnail…

Creating a Smiley face with D3

A yellow smiley face rendered in SVG shows a mouth moving up and down while the entire face scales in size. D3 v7’s selection, `arc`, and `transition` APIs are used to construct the circle, eyes, and curved path for the mouth, with `setInterval` triggering repeated two-second transitions. Static SVG attributes position the face, while the mouth’s transform and the circle’s scale animate independently.

Sep 28, 2022

Loading thumbnail…

Rendering Data with React

This example demonstrates how React and D3 can work together to render data, displaying CSS named colors as a series of horizontal color swatches. The application loads a CSV file of named colors using D3’s `csv` utility, stores it in React state via the `useState` and `useEffect` hooks, and maps each row to a colored `<div>` element. While the data loads, a simple loading message appears. The visualization highlights the use of React for DOM rendering and state management, with D3 handling data fetching and parsing, resulting in a clean, minimal representation of the dataset’s rows.

Sep 27, 2022

Loading thumbnail…

Loading Data with React and D3

This example demonstrates a minimal React and D3 integration for loading and summarizing a remote CSV dataset. It fetches the data from a GitHub Gist containing CSS named colors, then displays the number of rows, columns, and file size in kilobytes. The code uses D3’s `csv` function with `useEffect` to load data asynchronously, stores the result in React state via `useState`, and renders a message built with `d3.csvFormat`. The interface shows a large loading text until the dataset arrives.

Sep 27, 2022

Loading thumbnail…

Loading Data with React and D3 TMP

This example demonstrates how to load external data into a React application using D3 utilities. It fetches a CSV file containing named CSS colors from a GitHub gist, then displays summary statistics about the dataset, including the number of rows, columns, and file size in kilobytes. The code uses `d3.csv` to parse the remote CSV, `d3.csvFormat` to calculate its size, and React’s `root` DOM element to render the output via plain text. D3 v7 and React are integrated without additional state management.

Sep 27, 2022

Loading thumbnail…

Parsing CSV Data with D3

This example demonstrates how to parse CSV data using D3 within an HTML page. The page fetches a CSV file of named CSS colors from a GitHub gist, parses it with `d3.csvParse`, and displays the total number of rows, columns, and file size in kilobytes as large text. The code relies on the Fetch API to retrieve the raw text asynchronously, then uses D3 v7’s `csvParse` to structure the data. This highlights a minimal workflow for loading and summarizing tabular data before visualization.

Sep 27, 2022

Loading thumbnail…

Mouse Follower

A React component renders an SVG circle that follows the mouse cursor across the full browser window. The circle's position updates continuously through React state and the onMouseMove event handler, using useState and useCallback hooks. The SVG viewport matches the window dimensions, and the circle starts at the center before responding to pointer movements.

Sep 27, 2022

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates the asynchronous loading and parsing of CSV data from a remote URL. It fetches a dataset of CSS named colors hosted as a GitHub gist, converts the response to text, and logs the raw CSV string to the browser console. The code uses the Fetch API with `fetch()` and `response.text()`, wrapped in an async function and promise chain. The HTML page contains no visible visualization, focusing solely on the data acquisition workflow.

Sep 27, 2022

Loading thumbnail…

Hello HTML

A grid of 32 tiny smiley faces fills the viewport. Each face is an SVG assembled from React components for the yellow background circle, black eyes, and a mouth arc, with randomized eye sizes. The code uses React 18.2 to render SVG, and d3.v7’s `range` and `arc` functions to generate the grid and mouth path geometry. The mouth is drawn as a half-circle arc, leaving each face seemingly halfway through a smile.

Sep 26, 2022