Skip to main content
Log in
Z

zkjfry

@zkjfry·2 public vizzes

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.

Oct 31, 2020
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.

Oct 31, 2020