Angel Lam

@Azn4n6el·11 public vizzes

Refactored Bar Chart

This visualization displays the populations of ten countries in 2020 as horizontal bars, with the country names on the y-axis and population values on the x-axis. The chart is built using React to render SVG elements, with D3’s `scaleBand` and `scaleLinear` handling the scales. Data is loaded asynchronously via `d3.csv` from a GitHub-hosted UN population dataset, and the chart uses reusable components for axes and marks.

Mar 15, 2021

Loading thumbnail…

Axes with React & D3

This example shows a horizontal bar chart of the ten most populous countries in 2020, with axes rendered as SVG elements. The code uses React’s `useState` and `useEffect` hooks to load CSV data via `d3.csv`, then builds linear and band scales with `d3.scaleLinear` and `d3.scaleBand`. Ticks and labels are generated manually using `xScale.ticks()` and the scale domains, while bars are drawn as `<rect>` elements.

Mar 15, 2021

Loading thumbnail…

The Margin Convention

This visualization displays the top 10 countries by projected 2020 population as horizontal bars, with country names on the vertical axis and population values on the horizontal axis. It uses React hooks to load and parse CSV data from a GitHub gist via `d3.csv`, then renders SVG rectangles scaled by `d3.scaleLinear` and positioned with `d3.scaleBand`. The chart follows the margin convention by shifting an inner group element to account for top, right, bottom, and left margins, keeping the plot area separate from the SVG’s full dimensions.

Mar 15, 2021

Loading thumbnail…

Rendering Data With React & D3

A horizontal bar chart displays the top ten countries by 2020 population, using a CSV of UN population data loaded with D3's `csv` utility. React manages the application state with `useState` and `useEffect`, rendering SVG `<rect>` elements for each bar. The chart uses `scaleBand` for country categories on the y-axis and `scaleLinear` for population values on the x-axis, with a loading message shown before data arrives.

Mar 15, 2021

Loading thumbnail…

Data Visualization with D3 and React

A radial burst of CSS named colors is rendered as a single pie chart, with each color occupying a wedge of equal size. D3 loads the dataset via `csv` and computes the layout with `pie`, while `arc` generates the SVG path shapes. React manages the component state and renders the resulting `path` elements, with each fill set from the `RGB hex value` column. The visualization splits the full width into a circular layout centered on a 960×500 SVG canvas.

Mar 15, 2021

Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a bar chart of the top 10 countries by “Genshin Impact: (2020)” values. The visualization loads data from a CSV file hosted on Gist, which originates from the UCI Machine Learning Repository’s Auto MPG Data Set. It uses the Vega-Lite API (`vl.markBar`, `vl.x().fieldN`, `vl.y().fieldQ`) to define the chart, and renders it with D3 (via `d3.csv`) for data loading and Vega for rendering. The chart resizes to the browser window and includes a tooltip for the quantitative field.

Mar 15, 2021

Loading thumbnail…

Mouse Follower

A circle tracks the mouse's position across an SVG canvas, updating its center coordinates in real time. The React component uses the `useState` hook to store the current mouse position and `useCallback` to handle `onMouseMove` events. D3's `arc` API is imported but not used, while the circle's movement relies purely on React state updates triggered by the `clientX` and `clientY` values from the event object. The visualization demonstrates a simple interactive pattern with SVG rendering within a React application.

Mar 12, 2021

Loading thumbnail…

Loading Data With React & D3

This example demonstrates how to load and summarize a CSV dataset using React state and D3 utilities. The app fetches CSS named colors from a GitHub gist via `d3.csv`, stores the parsed result in React’s `useState` hook, and displays its size, row count, and column count using `d3.csvFormat`. While loading, it renders a simple “Loading…” message. The visualization relies on React’s `useEffect` for the asynchronous data fetch and ReactDOM to mount the component, with D3 v6 providing the CSV parsing.

Mar 12, 2021

Loading thumbnail…

Loading And Parsing CSV Data

This example demonstrates loading and parsing CSV data from a remote URL, then displaying basic statistics about the dataset. It uses D3 v6’s `d3.csv` method to fetch and parse the file, followed by `d3.csvFormat` and `d3.csvParse` for additional processing. The code counts the data size in kilobytes, the number of rows, and the number of columns, rendering these results in a large `<pre>` element. The data source is a GitHub gist containing CSS named colors.

Mar 12, 2021

Loading thumbnail…

Fork of HTML Starter

This example generates a grid of 18 procedurally varied faces using React and D3. Each face is composed of a yellow circle with a black border, two eyes, and a D3 arc-based mouth inside an SVG container. The faces are randomly generated with attributes such as eye offset, eye radius, and mouth width using JavaScript’s Math.random. The code imports React, ReactDOM, and D3’s range and arc functions, rendering the faces as SVG elements to the page.

Mar 6, 2021

Loading thumbnail…

Fork of Smiley Face Part III - Challenge

A smiling face rendered in SVG displays layered radial and linear gradients, giving the face a polished, three-dimensional appearance. The example combines React with D3’s `arc` generator to construct the mouth’s shape, while static SVG elements—circles, ellipses, and `path`—define the eyes and face. Colors such as yellows, oranges, and browns create depth. The code uses React’s `ReactDOM.render` and D3 v5’s `arc` API to compose the visualization declaratively.

Mar 5, 2021