Interesting Knowledge

100%

Interesting Knowledge

✓ Published0🌍 Public

Last edited Jan 17, 2023

Created on Jan 17, 2023

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.

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

85% match

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

82% match

Loading thumbnail…

Force Network

A force-directed network diagram maps relationships between actors, directors, and films. Using d3.forceSimulation with link, charge, collision, and center forces, nodes drift and settle while connecting links and node labels render via SVG. Node color encodes group membership, and link labels show shortened relationship types. The chart loads data from a JSON file and supports dragging nodes to reposition them interactively.

NNita

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

75% match

Loading thumbnail…

Force Network

A force-directed network diagram maps relationships between actors, directors, and films, using node colors to distinguish roles and link markers to show direction. The visualization runs a `d3.forceSimulation` with link, charge, collision, and centering forces, while SVG circles and text labels represent nodes, and lines with arrowheads depict connections. Node positions update on each simulation tick, and dragging via `d3.drag` lets users reposition elements, with hover effects highlighting selected nodes. The chart renders from the provided `data.json` file and uses `d3.scaleOrdinal` for the color scale.

AAnthony Alsford

75% match

Loading thumbnail…

Untitled

This example shows a force-directed network graph of board game relationships, with nodes connected by curved links. The visualization uses d3.forceSimulation with link, charge, and centering forces to position the nodes, which are rendered as SVG circles and can be dragged by the user. Data is loaded from a CSV file using d3.dsv, and the curved paths are drawn with SVG path elements. The simulation updates positions on each tick, applying drag behavior via d3.drag to allow interactive exploration.

SSupplyScience

75% match

Loading thumbnail…

Force Network

A force-directed network chart maps the connections between actors, directors, and films from a local JSON dataset. Nodes are colored by group and sized uniformly, while links represent professional relationships such as "Acted in" or "Directed." Built with D3 v6, the visualization uses `d3.forceSimulation` with link, charge, collision, and center forces, and renders nodes and edges as SVG elements. Node positions update on each simulation tick, and nodes are interactive via `d3.drag`.

Ssgzzhinde

74% match

Loading thumbnail…

Directional Force Layout Diagram with Node Highlighting

This interactive force-directed network diagram displays the relationships between named characters, with arrows indicating direction and thickness conveying connection strength. Clicking a node highlights it by enlarging its circle and changing its label’s color, size, and position; double-clicking resets the node to its default styling. Built with D3.js 3.5.17, it uses `d3.layout.force` for physics-based simulation, SVG elements for rendering, and transitions on `attr` and `style` properties to animate the highlight and reset effects. The input data is loaded from a CSV file containing source, target, and value columns for each edge.

Dd3noob

74% match