My Knowledge Graph2

100%

My Knowledge Graph2

✓ Published1🌍 Public

Last edited Nov 19, 2020

Created on Nov 19, 2020

This interactive network visualization maps the command hierarchy and relationships among characters from Star Trek: The Next Generation. Using D3.js force-directed layout via `d3.forceSimulation`, `d3.forceLink`, and `d3.forceManyBody`, it renders an SVG graph of nodes and labeled directed edges from a hardcoded triple array. Users can drag nodes, with edges and labels updating continuously throughout the simulation. The code builds the graph using D3's data join operators, `Immutable.Set` for deduplication, and custom arrow markers to indicate relationship direction.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

My Knowledge Graph2

A force-directed knowledge graph visualizes relationships among Star Trek characters, ranks, and ships. The node-link diagram displays triples from a small dataset, with edges labeled by the relationship type between entities. Built with D3 v5 and Immutable.js, the graph uses `d3.forceSimulation`, `forceLink`, and `forceManyBody` to simulate physical forces for layout. Nodes are draggable, and each edge includes an arrow marker indicating direction. The SVG rendering computes link orientations dynamically, and the pink circles with text labels depict entities like Picard, the Enterprise, and their connections.

Rrainyrainyguo

93% match

Loading thumbnail…

Interesting Knowledge

This example shows a force-directed network graph of character relationships from Star Trek: The Next Generation, with labeled edges for actions like "commands", "outranks", and "species." The visualization uses d3.forceSimulation to position nodes and links, with SVG lines and text for edges and labels, plus draggable circles for nodes. Arrow markers indicate directed connections, and the layout adjusts dynamically as the simulation runs.

110thblock

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

78% match

Loading thumbnail…

Knowledge Graph

A force-directed knowledge graph visualizes dependencies among robot components, with each node colored by team and arrowed links indicating relationships such as "Next" or "Go to." The simulation uses `d3.forceSimulation` to position nodes and render SVG lines and markers. Data includes component roles, runtimes, and inter-team connections. Initial layout anchors subgraphs in a bounded area, while node categories and team assignments drive the color scale via `d3.scaleOrdinal`.

Ssgzzhinde

77% match

Loading thumbnail…

Knowledge Graph

A force-directed knowledge graph visualizes the relationships between software components, grouping nodes into five teams and coloring them accordingly. The graph uses `d3.forceSimulation` to position nodes and links, with arrowheads defined via SVG markers to indicate directional dependencies. Each node is labeled with its name and full descriptor, while edges are differentiated by link type. The layout includes a titled subgraph area, and the rendering is done with D3 v5 in an SVG container, using a predefined color scale and manually specified data.

Ddata-inside

76% match

Loading thumbnail…

Knowledge Graph

This visualization shows a directed knowledge graph of robot components, with colored nodes representing teams and labeled edges indicating workflow transitions. The code uses d3.forceSimulation to calculate node positions, d3.scaleOrdinal for team-based coloring, and SVG markers for arrowheads. The graph displays 13 nodes and 29 links with three edge types ("Next", "Go to", "This way"), rendered as a static SVG after force simulation stabilizes, with text labels and a subgraph panel for additional context.

Rrainyrainyguo

76% match

Loading thumbnail…

Fork of Knowledge Graph

This interactive network diagram maps data flows between subscriber and network system components, with nodes grouped by category and colored by system type. The graph uses a force-directed layout via `d3.forceSimulation`, combining `forceY`, `forceX`, and `forceCollide` to organize nodes into vertical bands. SVG lines with arrowhead markers trace directed links, while each edge carries a label along an invisible `path` using `textPath`. Node radius encodes runtime values, and drag behavior allows manual repositioning. The dataset includes 14 nodes and 12 links defined in a separate module.

Mmiloparra

76% match

Loading thumbnail…

Knowledge Graph Test

A force-directed knowledge graph maps relationships between actors, directors, and films, with edges representing actions like "Acted in" or "Directed" and node colors indicating entity type. Built with d3.forceSimulation, the visualization applies charge, collision, and centering forces, while links include arrowhead markers and curved path labels showing relationship types. Nodes are draggable, and the entire graph supports zooming and panning via d3.zoom. The SVG rendering pulls data from a local JSON file containing nodes and links with metadata such as relationship value and source/target types.

Xxsg13

76% match