Fork of Knowledge Graph、1.7

100%

Fork of Knowledge Graph、1.7

✓ Published0🌍 Public

Last edited Jan 13, 2021

Created on Jan 7, 2021

A force-directed knowledge graph displays relationships between people and films, with nodes colored by type and directed edges labeled with the relationship. The visualization uses `d3.forceSimulation` with link, charge, collision, and center forces to position nodes, while SVG markers render arrowheads on edges. Labels follow curved link paths via `textPath`, and mouseover highlights nodes. Data comes from a static `data.json` file containing actor, director, and film entities with weighted links. The zoomable interface is implemented with `d3.zoom`, and dragging is handled through a custom drag behavior.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Knowledge Graph

A force-directed knowledge graph maps relationships between actors, directors, and films, with arrowed links showing who acted in, directed, or wrote each movie. Node colors and sizes vary by group, while link thickness reflects connection strength. Built with D3 v6, the visualization uses `d3.forceSimulation` for layout, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCollide` for physics, and SVG markers for arrowheads. Zoom and drag interactions are enabled via `d3.zoom` and `d3.drag`, with relationship labels rendered along curved link paths using `textPath`. Data comes from a local JSON file.

Mmiloparra

93% match

Loading thumbnail…

Fork of Knowledge Graph2

This knowledge graph visualizes the relationships between actors, directors, and films, using labeled, arrowed links to show actions like “Acted in” and “Directed.” It loads data from `data.json` and renders an SVG with D3 v6. The layout is computed by `d3.forceSimulation` with link, charge, collision, and center forces. Nodes are draggable via `d3.drag`, and the view supports zooming and panning through `d3.zoom`. Relationship labels are placed along curved paths using `textPath` elements.

PPeter S

92% match

Loading thumbnail…

Fork of Knowledge Graph

A force-directed knowledge graph maps actors, directors, and films, with arrows on each link indicating the direction of relationships like "Acted in" or "Directed." Node color reflects group membership, while link thickness encodes a numeric value. The visualization uses d3.forceSimulation with charge, collision, and centering forces, plus drag and zoom interaction. It renders as SVG lines and paths, with relationship labels placed along curved paths using textPath.

Mmiloparra

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

92% match

Loading thumbnail…

Fork of Knowledge Graph、1.6

A force-directed knowledge graph maps Tom Hanks’s filmography through connections between actors, directors, and films. Node colors reflect entity groups, while curved, arrowed links labeled with relationships such as “Acted in” or “Directed” show the nature of each connection. The visualization uses d3.forceSimulation with link, charge, collision, and center forces, plus d3.zoom for pan and zoom. Data comes from a local JSON file, rendered as SVG with marker-based arrows and text paths for labels.

Ssgzzhinde

89% match

Loading thumbnail…

Knowledge Graph

This knowledge graph visualizes the relationships between actors, directors, and films from a JSON dataset. Nodes represent individuals and movies, while directed links with arrowheads display relationships such as "Acted in" or "Directed," with labels positioned along each edge. The layout is computed using `d3.forceSimulation` with forces for linking, charge, collision, and centering, rendered as an SVG with interactive pan and zoom via `d3.zoom`. Node drag behavior and a color scale for groups enhance exploration of the network.

Ssgzzhinde

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

86% match

Loading thumbnail…

Fork of Knowledge Graph

This visualization displays a knowledge graph of Tom Hanks's filmography, connecting actors, directors, and films through directed edges labeled with relationships like "Acted in" and "Directed." It uses a force-directed layout via `d3.forceSimulation` with charge, collision, and center forces to position nodes. The SVG rendering includes custom arrowhead markers, curved link paths with `textPath` labels for relationship types, and zoom/pan controls implemented with `d3.zoom`. Node and link data comes from a local `data.json` file, with node clusters distinguished by color.

JJoao Loula

85% match