Courses Tree

100%

✓ Published1🌍 Public

Last edited Oct 31, 2020

Created on Oct 31, 2020

This example displays a course prerequisite tree as a vertically oriented node-link diagram, with nodes representing individual courses and curved paths indicating dependencies. Users can click on course nodes to highlight their prerequisite chains in red and add the course labels to a fixed sidebar. The visualization uses D3 v5 with the `d3.json` loader and `d3.linkVertical` generator to draw links from precomputed x/y coordinates in a static data file. Interactive coloring and the sidebar list are managed through D3 selections and data joins.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Courses Tree

This example presents a course prerequisite tree as a static, pre-positioned node-link diagram. Users can click circular nodes to select courses, which highlights all related links and appends the course label to a sidebar list; clicking again deselects it. The visualization uses D3 v5, with an SVG renderer, vertical link paths via `d3.linkVertical`, explicit x/y coordinates per node, and CSS class-based styling for link highlighting. It uses a JSON data file containing nodes with levels and class attributes.

Nnadia-el

95% match

Loading thumbnail…

Courses Tree

This interactive course tree visualizes a hierarchical math curriculum across five levels, using circles positioned by level and links to show prerequisites. Clicking a course highlights all related prerequisite connections in red and adds the course label to a fixed sidebar, while clicking again removes it. Built with D3 v5, it uses the `linkVertical` generator to draw curved paths and `d3.json` to load the node/edge data.

Zzkjfry

91% match

Loading thumbnail…

Course Tree

This visualization displays a hierarchical course structure as a node-link tree, with circles representing topics and connecting lines showing parent-child relationships. The tree layout is computed using d3.hierarchy and d3.tree, which positions nodes based on the nested JSON data loaded from hierarchy.json. The SVG rendering uses D3’s data join pattern, binding circle and line elements to descendant and link data respectively, with coordinates mapped to the tree’s computed x and y positions. The visualization fills the entire viewport by dynamically setting the SVG dimensions to the window size.

CCurran Kelleher

83% match

Loading thumbnail…

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.

NNguyễn Nhật Minh Khôi

77% match

Loading thumbnail…

Tree Visualization

This example visualizes a hierarchical tree structure of a university’s departments and courses using D3 v5. Thecode imports data from a local ES6 module and renders an SVG tree layout with `d3.tree()`, `d3.hierarchy()`, and custom link paths via cubic Bézier curves. Each depth level is distinguished by a different shape (circle, rectangle, ellipse) and color, while node labels are positioned above or below based on whether they have children. The visualization runs entirely in the browser with SVG rendering.

VVenkat-Sumith-Thota

77% match

Loading thumbnail…

D3 Course Code Along - Art Tree

This example displays a hierarchical tree of world regions and countries, rendered as an SVG with branching paths and nodes. The visualization uses D3 v5’s `tree` layout and `hierarchy` to structure the data, with `linkHorizontal` generating the curved connecting paths. The `data.json` file provides the geographic nesting, while the full viewport is sized dynamically using `document.body` dimensions. Paths are styled with a teal fill and white strokes, though the code does not explicitly render node labels or interactive behaviors.

Rrenenadorp

74% match

Loading thumbnail…

Video Dependency Graph

This example displays the dependency structure of a video course as a static graph, listing 14 tutorial nodes with titles and durations, though the link array is initially empty. The visualization loads the JSON dataset and renders it in a `<pre>` element by serializing the data with `JSON.stringify(data, null, 2)`. Using D3 v5's `json()` function and the `select()` API, the code demonstrates a minimal approach to fetching and displaying raw hierarchical data without any interactive or force-directed layout.

Xxushengwang

74% match

Loading thumbnail…

Hello HTML

This example shows a force-directed network graph of university courses, where nodes represent courses and links show associations between them with labels describing support and confidence values. The visualization uses D3 v3’s `d3.layout.force` for layout and computes node positions and link paths, which are rendered as SVG curves with arrowheads via a custom marker. Course names are displayed within the network, and link styling and text are set using SVG `path` and `textPath` elements. The data is hardcoded in a JavaScript array, and the page runs as a bare HTML document with React integration.

苏苏巨亮

74% match