Fork of Knowledge Graph

100%

Fork of Knowledge Graph

✓ Published0🌍 Public

Last edited May 28, 2021

Created on May 28, 2021

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.

AI-generated description

MIT Licensed

Similar vizzes

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

94% match

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

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

85% match

Loading thumbnail…

Fork of Knowledge Graph、1.7

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.

Ssgzzhinde

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

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

85% match

Loading thumbnail…

Fork of Force Network

This force-directed network graph visualizes the relationships between actors, directors, and films using D3.js. It shows Tom Hanks as a central node connected to his films, while directors link to the films they directed. The visualization employs d3.forceSimulation with link, charge, collision, and center forces to position the SVG circles and lines. Node colors are assigned by group using a categorical color scale, and arrow markers indicate link direction. Data is loaded from a JSON file containing nodes and links with relationship metadata.

Rrushithareddyy

84% match

Loading thumbnail…

Fork of Fork of Fork of Force Network

A force-directed network graph displays the relationships between Tom Hanks films and their directors, with nodes colored by group. The visualization uses D3 v6’s `d3.forceSimulation`, along with `d3.forceLink`, `forceManyBody`, `forceCollide`, and `forceCenter` to position nodes, while SVG circles and lines render the data from a JSON file. Drag interactions are enabled via `d3.drag`, and link arrowheads are defined using SVG markers, though text labels remain incomplete.

Ggayathri

83% match