Skip to main content
SimilarExport ZIP
100%

Courses Tree

✓ Published0🌍 Public
Zzkjfry
Last edited Oct 31, 2020
Created on Oct 31, 2020
Forked from 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.

AI-generated description
MIT Licensed

Similar vizzes

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

Family_TREES

This tree visualization maps university courses through a hierarchical structure of departments, levels, and individual courses, with each depth level colored distinctly. Built using D3.js v7, it renders as an SVG with interactivity, displaying tooltips when hovering over nodes. The data is loaded from a remote CSV file, and the layout is generated using D3's `d3.tree()` and `d3.hierarchy()` functions, with `d3.linkVertical()` creating the connecting edges.

Llohitsai62@gmail.com
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
73% 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
73% match
Loading thumbnail…

ICE8_Tree

This interactive visualization displays a hierarchical family tree of academic data, showing the relationships between students, courses, names, and their associated attributes. The tree uses color-coded generation levels to distinguish between different depths, with animated SVG paths drawing connections between nodes, and circles representing each entity. Built with D3.js v6, the code uses `d3.stratify()` to structure the data and `d3.tree()` for layout, with transitions animating both the link paths and node radii over time.

RRevanthReddyG
72% match