api-kg

100%

✓ Published0🌍 Public

Last edited Dec 27, 2020

Created on Dec 27, 2020

This interactive knowledge graph visualizes a film dataset, showing connections between actors, directors, and their movies. The graph uses colored nodes and directed, labeled edges to represent relationships like "Acted in" and "Directed". Built with D3.js, the visualization uses `d3.forceSimulation` for physics-based layout, with forces for links, charge, collision, and centering. Users can pan and zoom, while nodes are draggable. The code loads its data from a JSON file, which contains the nodes and links, and the graph is rendered as SVG elements, with arrowheads defined using SVG markers and relationship labels placed along curved paths.

AI-generated description

MIT Licensed

Similar vizzes

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

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

81% match

Loading thumbnail…

Actor Graph

This interactive visualization displays a force-directed graph of actors and the movies they appear in, where each actor is represented as a node and connections between actors who share a film are shown as links. The graph is built using D3.js v7, with the `d3.forceSimulation` API handling node positioning and link physics. Data comes from a CSV file listing movies and their cast, parsed using `d3.csvParse`, and rendered as SVG elements (circles, text labels, and lines). The visualization explores collaborative networks among actors across the included film dataset.

KKyle?

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

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

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

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

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

76% match