chun0330

@chun0330·5 public vizzes

Fork of Collapsible Tree Version 1

This interactive collapsible tree visualizes a hierarchical dataset about Placemaking Design Learning, with nodes representing categories and subcategories. Users can click any node to expand or collapse its children, with smooth animated transitions. The visualization uses D3 v6’s `d3.tree` layout, `d3.linkHorizontal` for curved links, and SVG elements. It features zoom and pan via `d3.zoom`, and all node and link updates are animated using `transition` with configurable durations.

Oct 24, 2021

Loading thumbnail…

Fork of World Countries Hierarchy

A hierarchical tree visualization displays the world’s countries, organized by continent and then by subregion (e.g., Southern Asia, Western Asia). Node labels use the `Playfair Display` serif font, with font size decreasing by tree depth. The chart is rendered as an SVG using `d3.tree`, `d3.hierarchy`, `d3.linkHorizontal`, and `d3.zoom`. It loads `data.json` and uses `root.descendants()` to place text labels and generate paths for the links between nodes.

Oct 24, 2021

Loading thumbnail…

Fork of Costa Rica

This radial tree visualization displays a hierarchical dataset of countries organized by continent and subregion, rooted at “PlaceMaking Pedagogy.” The D3 v4 code uses `d3.cluster` to compute the radial layout and `d3.zoom` for panning and zooming. Each node is rendered as an SVG text label with size scaled by depth. The project function converts polar coordinates to Cartesian positions, with curved links drawn using SVG path commands, and the data is loaded from `data.json` via `d3.json`.

Oct 19, 2021

Loading thumbnail…

Doraemon

This visualization is a stylized SVG portrait of the cartoon character Doraemon, rendered with React and D3.js. It shows the iconic blue robotic cat with a white face, red nose, yellow bell, and black whiskers. The code constructs the image using React's SVG elements like `ellipse`, `circle`, `rect`, and `line`, and employs D3's `arc` generator to draw the character's mouth. All shapes are positioned and scaled relative to a center point, with specific coordinates for facial features.

Oct 19, 2021

Loading thumbnail…

Hello HTML

This example renders a simple smiley face in SVG using React and D3. The face is composed of a yellow background circle, two black eye circles, and a mouth path generated with the `arc()` function from D3. The code uses React to create the SVG elements and computes coordinates with static variables, such as `eyeOffsetX` and `eyeOffsetY`. The mouth arc is drawn with an inner and outer radius, starting and ending angles defining a half-circle shape. The visualization shows basic composition and DOM manipulation with React 17 and D3 v7.

Oct 17, 2021