record links graph_1.5

100%

record links graph_1.5

✓ Published0🌍 Public

Last edited Jan 8, 2021

Created on Jan 5, 2021

This example visualizes a directed graph of film-related records, showing relationships between actors, directors, and films. A force-directed layout with arrow markers displays links and labels for relationship types. The code uses `d3.forceSimulation` for physics-based positioning, with SVG rendering. Node groups are distinguished by color via `scaleOrdinal`. The data comes from `data.json` and includes both node and link arrays with metadata like relationship and type.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Graph_test

This graph visualization shows the relationships between actors, directors, and films, with nodes representing people and movies connected by directed links that indicate actions like "Acted in" and "Directed." The node size and link thickness vary based on a value attribute, while different colors differentiate node groups. Built with D3.js v6, it uses `d3.forceSimulation` with link, charge, collision, and center forces to position the elements, and renders the graph as an SVG with arrowheads marking link direction. The visualization also supports zooming and panning via `d3.zoom`.

BButterflypatch

82% match

Loading thumbnail…

Graph

This graph visualization maps the relationships between actors, directors, and films using a force-directed layout. It displays movies as one node type and the people involved as another, with arrows indicating the specific role each person played in a production, such as acting or directing. The visualization uses the D3.js library with the `d3.forceSimulation` and `d3.forceLink` APIs to simulate physical forces that position the nodes, while a custom drag interaction lets users rearrange the network. Data comes from the provided `data.json` file, which contains nodes for people and films along with links specifying their relationships.

VVictor Lorena

81% match

Loading thumbnail…

Force Network

This force-directed network visualizes the relationships between actors, directors, and films, with nodes colored by their type (actor, director, or film) and links weighted by the number of collaborations. The layout uses `d3.forceSimulation` with `forceLink`, `forceManyBody`, `forceCollide`, and `forceCenter` forces to position nodes, while user interaction is handled via `d3.drag` to manually reposition them. Node labels are displayed, and hovering highlights the node with a blue stroke. The data is loaded from `data.json` and rendered as an SVG, with markers on links to indicate direction.

Rrushithareddyy

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

80% match

Loading thumbnail…

Fork of Force Network

This force-directed network graph visualizes relationships between actors, directors, and films using data from a JSON file. Nodes are color-coded by group type (actors, directors, films), with links representing connections like "Acted in" or "Directed." The visualization uses `d3.forceSimulation` with forces for links, charge, collision, and centering, rendered as SVG with draggable nodes and hover highlighting. Arrow markers denote link direction, while the simulation updates node and link positions on each tick.

Ddas888530

80% match

Loading thumbnail…

Fork of Force Network

This force-directed network graph maps relationships between actors, directors, and films from a JSON dataset. It uses D3 v6's `d3.forceSimulation` with `forceLink`, `forceManyBody`, `forceCollide`, and `forceCenter` physics, plus `d3.drag` for interactive node repositioning. SVG rendering shows colored nodes (by group), labeled with names, and links labeled with truncated relationship types (e.g., "Acte..." for "Acted in"). Line thickness reflects edge value, and arrowheads are defined via SVG markers.

Ssgzzhinde

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

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

79% match