My collapsible Knowledge Graph with taxo data Final Version v4

100%

My collapsible Knowledge Graph with taxo data Final Version v4

✓ Published0🌍 Public

Last edited Nov 29, 2020

Created on Nov 28, 2020

Forked from My collapsible Knowledge Graph with taxo data

This interactive collapsible knowledge graph displays a hierarchical taxonomy of computer science topics, with nodes that expand and collapse on click and text labels that link to Wikipedia pages. Built with D3 v4, the visualization uses `d3.forceSimulation` with link, charge, and positional forces to arrange the SVG elements, while `d3.zoom` enables panning and scaling. Node depth is calculated recursively, and data comes from a taxonomy dataset with named nodes, rendered as circles with text labels.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

My collapsible Knowledge Graph with taxo data

This visualization displays a hierarchical knowledge graph of taxonomic data, showing computer science concepts and their relationships across multiple depth levels. The graph is rendered as a collapsible node-link diagram using SVG, with nodes colored by depth level and connected by arrowed links. The code uses d3.forceSimulation with charge, collision, x, and y forces to position nodes, while d3.scaleOrdinal maps depth values to distinct colors. Clicking nodes toggles their children, expanding and collapsing the hierarchical structure. The layout is computed from the data2.js hierarchy, with forceX positioning nodes at depth-based x-coordinates.

Rrainyrainyguo

92% match

Loading thumbnail…

My Knowledge Graph with taxo data

This visualization displays a knowledge graph of computer science topics, using a force-directed layout via `d3.forceSimulation` with forces for links, charge, x, y, and collision. Nodes are colored by group and positioned along vertical axes corresponding to their group value, revealing a taxonomic structure. The SVG rendering includes labeled arrows on links via `marker` elements and text paths for edge labels. The dataset is defined in a separate JavaScript file and loaded as an ES module.

Rrainyrainyguo

85% match

Loading thumbnail…

My Knowledge Graph with taxo data

This visualization displays a hierarchical knowledge graph of computer science concepts, with taxonomy data organized by depth levels. It uses a custom `CreateHierarchy` function to derive parent-child relationships from node and link data, then renders them as an SVG with color-coded nodes based on depth. The graph shows learning paths with labeled edges and arrowheads, implemented using D3 v4 selections and SVG markers. The layout manually positions nodes and links rather than using force simulation, and includes interactive elements like edge paths and text labels.

Rrainyrainyguo

85% match

Loading thumbnail…

Collapsible Tree Final Version 2

This interactive collapsible tree visualization displays a hierarchical structure of computer science topics using SVG and animation. Users can click on circular nodes to expand or collapse their children, while clicking on text labels opens a Wikipedia page for that topic. The tree uses D3 v4’s zoom behavior, transitions with `duration`, and a custom depth-based layout algorithm. Node positions are calculated using depth counts and a scale factor, with data sourced from the `newData2.js` file. The visualization includes white text outlines and color-coded nodes to indicate expandable branches.

Rrainyrainyguo

80% match

Loading thumbnail…

Fork of My Knowledge Graph with taxo data

This example visualizes a knowledge graph of educational data components, showing 13 labeled nodes organized into five color-coded groups connected by directional links with arrowheads. A force-directed layout positions nodes using `d3.forceSimulation` with `d3.forceX` and `d3.forceY` forces that group nodes by their taxonomic category, while `d3.forceManyBody` adds repulsion and `d3.forceCollide` prevents overlap. The SVG rendering includes markers for arrowheads, edge paths for label placement via `textPath`, and drag behavior for interactive node movement. The dataset is defined in a separate `data.js` file containing nodes and links.

NNareshkumar Borana

80% match

Loading thumbnail…

My Knowledge Graph with taxo data

This example visualizes a knowledge graph of 13 interconnected components, organized into five colored groups representing different functional categories. It shows the relationships and dependencies between entities like “Aggregation,” “Eligibility,” and “Reporting” as directed links with arrowheads. The layout is computed using `d3.forceSimulation` with forces for link distance, charge repulsion, and group-based x-positioning using `d3.forceX`, while the SVG rendering uses D3 v5 to draw nodes and edges. Node colors are assigned via a `d3.scaleOrdinal` based on group membership.

Rrainyrainyguo

79% match

Loading thumbnail…

Fork of My Knowledge Graph with taxo data

A force-directed knowledge graph maps thirteen labeled nodes across five color-coded groups, with directed arrows showing relationships between concepts like Aggregation, Eligibility, and Reporting. Links are drawn as lines with arrowhead markers and text paths for edge labels. The layout uses `d3.forceSimulation` with `forceX` and `forceY` to position nodes by group, while `d3.forceLink` and `d3.forceManyBody` manage link distances and repulsion. Click-drag interaction enables node repositioning.

Yyoav95

79% match

Loading thumbnail…

Fork of Fork of My Knowledge Graph with taxo data

This example visualizes a knowledge graph of learning path components, with 13 nodes grouped into five color-coded categories and 21 directed links showing dependencies. The graph uses a D3 force simulation (`d3.forceSimulation`) with forces for link distance, charge repulsion, x-positioning by group, y-centering, and collision avoidance. Nodes are rendered as SVG circles with labels, while links are drawn as lines with arrowhead markers and empty text paths for potential edge labels. Node positions are also influenced by custom x-center coordinates per group, and dragging is enabled via `d3.drag`.

NNareshkumar Borana

77% match