Skip to main content
SimilarExport ZIP
100%

Course Tree

✓ Published2🌍 Public
CCurran Kelleher
Last edited Mar 23, 2023
Created on Mar 22, 2023

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.

AI-generated description

A basic tree visualization.

See also:

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
84% 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
84% 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
84% match
Loading thumbnail…

Courses Tree

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.

Zzkjfry
83% 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
81% match
Loading thumbnail…

Tree Visualization with D3.js

This visualization presents a hierarchical tree of fruit categories, using circles to represent nodes and curved horizontal links to show parent-child relationships. It loads D3 v7 via UNPKG and builds the layout with `d3.tree()` on a `d3.hierarchy` data structure. The SVG renders colored node circles based on fruit-specific color data, while labels position differently for internal nodes versus leaves. The code uses `d3.linkHorizontal()` to generate paths and dynamically adjusts the SVG height from the computed tree extent.

VVinay Vemuri
80% match
Loading thumbnail…

Tree Layout

This example demonstrates a hierarchical tree layout using a cluster-based arrangement in D3 v5. It reads nested JSON data with parent-child relationships and renders the nodes as small circles connected by straight lines. The visualization uses d3.cluster to compute the layout coordinates, d3.hierarchy to structure the data, and SVG circle and line elements for drawing. The tree is positioned within the SVG canvas using a translated group element.

Ffloresh
80% match
Loading thumbnail…

Tree

This visualization displays a hierarchical tree derived from a JSON data file, showing the structure of a model named "HOBS" with its contained classes, attributes, and relationships. The tree layout is generated using D3's `tree` and `hierarchy` functions, with links drawn via the `linkVertical` path generator. The interactive viewport supports zooming through D3's `zoom` event handler, with an `event.transform` applied to the SVG group. Each node renders as a text label positioned by its calculated coordinates, using the Playfair Display font.

MMTR
80% match