Nguyễn Nhật Minh Khôi

@minhkhoi1026·2 public vizzes

D3 Test

This example shows a directed graph of university courses, with nodes representing courses and links indicating prerequisites. Users can drag nodes to reposition them; double-clicking a node releases it from its fixed position, while dragging fixes it in place. The visualization uses D3 v3’s `d3.layout.force` for physics-based layout, with `d3.json` loading the course data from `graph.json`. Node and link positions are updated during the force simulation’s `tick` event, although the tick handler itself is left unimplemented, so nodes remain static initially. Rendering is done via SVG elements styled with CSS.

Sep 3, 2021

Loading thumbnail…

Fork of World Countries Tree

This fork of the World Countries Tree visualizes the hierarchical structure of countries by continent and subregion, using an indented tree layout. The code leverages d3.js v5 APIs, including `d3.select`, `d3.json`, `d3.tree`, and `d3.hierachy`, to load a nested `data.json` file and render the structure as an SVG. Nodes are connected by teal paths, with country names displayed in a serif font, while the layout dynamically fills the browser viewport.

Sep 3, 2021