My Knowledge Graph2

100%

My Knowledge Graph2

✓ Published1🌍 Public

Last edited Nov 19, 2020

Created on Nov 19, 2020

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

My Knowledge Graph2

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.

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

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

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

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

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

78% match

Loading thumbnail…

Fork of Knowledge Graph

This example visualizes a knowledge graph of films, actors, and directors, where nodes represent entities and directed links indicate relationships such as “Acted in” or “Directed.” A force-directed layout using `d3.forceSimulation`, `forceLink`, `forceManyBody`, and `forceCollide` positions the nodes. The SVG rendering includes arrowhead markers for links, with relationship labels placed along translucent paths using `textPath`. The graph loads JSON data and supports zooming and dragging via D3’s zoom behavior and `d3.drag`.

HHunterHans

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

77% match