Fork of My Knowledge Graph with taxo data

100%

Fork of My Knowledge Graph with taxo data

✓ Published1🌍 Public

Last edited Oct 26, 2023

Created on Oct 26, 2023

Forked from 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.

AI-generated description

MIT Licensed

Similar vizzes

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

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

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

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

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

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

83% match

Loading thumbnail…

Fork of Knowledge Graph

A force-directed knowledge graph displays 13 application components as nodes and 29 directed edges as links with arrowheads, grouped by team and colored with a custom ordinal scale. Built with D3 v5, the visualization uses `d3.forceSimulation` to position nodes and SVG lines to render connections. Node labels and link types distinguish relationships such as "Next →" and "Go to →", while an embedded subgraph area and a legend with team names contextualize the network.

BButterflypatch

81% match

Loading thumbnail…

Fork of Knowledge Graph

This example displays a directed knowledge graph of robot components, organizing nodes into five color-coded teams and showing various connections between them. The visualization uses d3.forceSimulation to position the nodes and SVG lines with arrowhead markers to represent the directed links between components. The dataset includes 13 nodes with metadata such as runtime and category, while the links are grouped into three distinct relationship types including "Next", "Go to", and "This way". The graph uses an ordinal color scale with custom hex values and a subgraph area to display additional information.

MMehdi

81% match