My Knowledge Graph with taxo data

100%

My Knowledge Graph with taxo data

✓ Published4🌍 Public

Last edited Nov 19, 2020

Created on Nov 19, 2020

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.

AI-generated description

MIT Licensed

Similar vizzes

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

91% 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

88% 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

88% 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

87% 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

86% match

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

85% match

Loading thumbnail…

My Knowledge Graph

A network diagram maps related data-processing terms as colored nodes grouped into five hierarchical levels, with directed arrows showing learning dependencies between concepts. Built with D3 v5 and rendered as SVG, the visualization uses `d3.scaleOrdinal` to assign categorical colors and custom SVG markers for arrowheads. Links are drawn as simple lines with tooltips, while node positions are fixed by the dataset rather than a force simulation, presenting a static knowledge graph.

Rrainyrainyguo

82% match

Loading thumbnail…

Knowledge Graph

This knowledge graph visualizes dependencies between system components, grouped into five colored teams (Team A through Team E), with arrows indicating data flow between nodes. The SVG rendering uses d3.forceSimulation to position nodes and draw directed links with arrowhead markers. Node colors are assigned via d3.scaleOrdinal with a custom range, while runtime values and labels are embedded in the dataset. A subgraph highlights a subsection of the network, and each link includes a tooltip via SVG title elements.

Rrainyrainyguo

82% match