choey1324@gmail.com

@choey1324·4 public vizzes

Fork of MY Tree ICE-8

This example displays a family tree as an animated node-link diagram, with a root ancestor and several generations of descendants. The tree data is manually defined in JavaScript, and each node can be clicked to collapse or expand its child branches. The visualization is built using the D3.js library (version 3.5.17), which handles the tree layout and SVG rendering. The code uses the `d3.layout.tree` API to compute node positions, `d3.svg.diagonal` to draw the connecting links, and animation via a `duration` variable to smoothly transition between states. The interface is styled with CSS, featuring a prominent heading and a strong color scheme of cyan, red, and blue on an orange background.

Jan 31, 2024

Loading thumbnail…

Fork of D3.js collapsible tree with boxes

This interactive tree diagram displays hierarchical data from a nested JSON file, with each node rendered as a labeled rectangle. The visualization shows a collapsible hierarchy where nodes can be expanded or collapsed to explore the data structure. Built with D3.js v3 and jQuery, the example uses SVG rectangles and animated transitions for the tree layout. Link labels indicate relationships between parent and child nodes, while node types are color-coded. The code implements custom zoom and drag behavior through D3’s zoom utility, and includes tooltips for additional information.

Jan 31, 2024

Loading thumbnail…

Fork of React Starter

This example demonstrates a minimal React application that renders a static “Hello React!” message centered on the page. It uses React 18.2.0 with the `react` and `react-dom` UMD builds loaded from unpkg, and defines the app component in JavaScript. The `App` component returns a `<div>` with a large, centered font style, and the code calls `createRoot` from `react-dom` to mount this component into the `#root` element of the HTML page. No data source or interactive behavior is present; it serves as a basic starter template for a React project.

Jan 30, 2024

Loading thumbnail…

Fork of World Countries Tree

This visualization displays a hierarchical tree of world countries, organized by continent and subregion. It uses a D3 tree layout with horizontal links to show the parent-child relationships between geographic groupings, from "World" down to individual nations. The text labels are sized according to depth, with shallower nodes appearing larger. The implementation uses D3 v5’s `tree`, `hierarchy`, and `linkHorizontal` functions to compute the layout and link paths, while a zoom behavior allows panning and scaling of the SVG rendering.

Jan 30, 2024