HAORAN CHEN

@MuskAI·8 public vizzes

Fork of D3 v5 Circle-Packing

This interactive circle-packing visualization displays the hierarchical structure of Fudan University’s graduate programs, organized by school and research direction. The D3 v5 code uses `d3.stratify` to convert CSV data into a hierarchy, `d3.pack` for circle layout, and a sequential magma color scale to indicate depth. Hovering highlights ancestor nodes, while leaf circles include clipped text labels. Rendering is done via SVG, with data loaded from `flare.csv`.

May 12, 2021

Loading thumbnail…

Fork of Stylized Bar Chart

This bar chart displays the top 10 most populous countries using data from the United Nations World Population Prospects 2019. It uses React and D3 v5, rendering SVG rectangles scaled with `d3.scaleLinear` for population values and `d3.scaleBand` for country categories. The chart includes styled axes, formatted tick labels using `d3.format`, and tooltips via SVG `<title>` elements. Data is loaded asynchronously with `d3.csv` and filtered to the first ten rows.

May 1, 2021

Loading thumbnail…

Fork of Pathetic Bar Chart

This example visualizes the top 10 most populous countries as a bar chart with no axes, using raw rectangle widths to encode population values. The bars render via React components inside an SVG, with scales created using d3.scaleBand and d3.scaleLinear. Data loads asynchronously from a CSV of United Nations World Population Prospects 2019, filtered to the first ten rows after fetching with d3.csv. The chart intentionally omits axes and labels, presenting only the bar lengths as a minimal, "pathetic" representation of population distribution.

May 1, 2021

Loading thumbnail…

Fork of Rendering Data with React & D3

This example visualizes CSS named colors as a radial burst, with each color represented as a slice of a pie chart emanating from the center of an SVG canvas. The data is loaded from a CSV file via `d3.csv`, and React manages the application state with `useState` and `useEffect`. The pie slices are generated using D3’s `pie` and `arc` utilities, which compute the angular segments, while React renders each slice as an SVG `<path>` element, filling it with the corresponding hex value from the dataset.

May 1, 2021

Loading thumbnail…

Loading Data

This example demonstrates loading a remote CSV file and displaying basic statistics about it. The visualization presents a simple text message indicating the file size in kilobytes and the number of rows contained in the dataset. The code uses D3.js version 6.7.0, specifically the `d3.csv` function to fetch and parse the external CSV data, followed by `d3.csvFormat` to calculate its size. The message is rendered inside an HTML `<pre>` element styled with large font size.

Apr 29, 2021

Loading thumbnail…

Mouth Follower

A yellow smiley face drawn with SVG circles follows the cursor across a full-window canvas. The React application tracks mouse movement via the `onMouseMove` event, updating state to reposition the face’s center. The face itself is composed of three circles—a large yellow head and two black eyes—rendered by React DOM into a single SVG element.

Apr 29, 2021

Loading thumbnail…

Similey face partI

A smiling face is rendered as a yellow circle with black stroke, featuring two eyes and an open mouth. The eyes are drawn as a pair of SVG circles, while the mouth is created using d3.arc to generate a path. The visualization is built with React, combining reusable components for the background circle, eyes, and mouth. All elements are positioned relative to the center of an SVG canvas, demonstrating a component-based approach to data-driven graphics.

Apr 28, 2021

Loading thumbnail…

Fork of Hello HTML

A minimal HTML page titled “Fork of Hello HTML” presents an empty body element with no content or visual elements. The example demonstrates the foundational structure of an HTML document, using only the basic `<html>`, `<head>`, and `<body>` tags. It does not incorporate any JavaScript libraries, data sources, or rendering APIs, serving instead as a blank starting point for visualization work. The page includes a title in the browser tab but produces no graphical output or interactive behavior.

Apr 28, 2021