Skip to main content
SimilarExport ZIP
100%

Fork of Netflix titles network graph

✓ Published0🌍 Public
Vviveknaroju999@gmail.com
Last edited Apr 2, 2024
Created on Apr 2, 2024

A force-directed network graph visualizes the hierarchical structure of Netflix titles, categorizing a central catalog into genres, sub-genres, and individual movies or TV shows. Nodes are colored by group and labeled with their names, while links connect each level. The visualization uses `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter` to position the SVG elements, with circle radii and stroke styling defined in CSS. The underlying data is hardcoded in JavaScript, representing a small, curated subset of the Netflix catalog.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Netflix titles network graph

This example shows a hierarchical network graph of Netflix content, organizing titles by genre and sub-genre. The root node connects to three genres, which branch into movie and TV show sub-genres, linking to twelve individual titles. Using D3 v5, the code applies `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter` to position nodes. SVG circles and text labels render the graph, with link lines colored gray. Node colors distinguish hierarchy levels (root, genre, sub-genre, title) via a color array assigned in the fill callback.

Rrobertotienonyaranga@gmail.com
91% match
Loading thumbnail…

Fork of Netflix Titles Tree

This fork of the Netflix Titles Tree uses d3.tree and d3.hierarchy to render a small, hand-coded catalog of Netflix genres in an SVG dendrogram. It shows three genre branches—Dramas, Comedies, and Action & Adventure—each splitting into Movies and TV Shows, with leaf nodes for specific titles. The tree layout is mapped to node coordinates, and curved paths link each parent to its children via custom path commands. Circles and text are appended as SVG groups, with internal nodes shaded lightsteelblue and leaves left white.

Vviveknaroju999@gmail.com
85% match
Loading thumbnail…

Fork of fork 8.2

A force-directed graph maps PG-13 movies to their availability across Netflix, Amazon Prime, Disney Plus, and Hulu. The visualization uses `d3.v3` with an SVG rendering and a `forceSimulation` layout to position nodes, where the central hub connects to four streaming platforms, which in turn branch to individual film titles. Node and link styling is applied directly through CSS classes, with circles and text labels for each movie. The graph's static layout and explicit edge list present a clear, non-interactive overview of content distribution across these services.

Ppmbhupathibalu@gmail.com
84% match
Loading thumbnail…

Fork of Force Network

A force-directed network visualizes the relationships between actors, directors, and films. Actors and directors are color-coded by their professional role, with films as separate nodes. The graph uses a physics simulation with link, charge, and collision forces to position the nodes. Using `d3.forceSimulation` and `d3.forceLink`, the layout is interactive, and users can drag nodes to explore connections. The code loads data from JSON and renders the network as SVG.

DDeepa-Murugesan
83% match
Loading thumbnail…

Fork of Force Network

A force-directed network diagram visualizes relationships between films, actors, and directors from a JSON dataset. Nodes are color-coded by group and sized uniformly, while links represent connections such as "Acted in" or "Directed." The visualization uses D3 v6's `d3.forceSimulation` with link, charge, collision, and centering forces, rendered as SVG circles and lines. Interactive dragging updates node positions via `d3.drag`, with markers indicating link direction.

88DancingElephants
83% match
Loading thumbnail…

Fork of Fork of graph

This graph visualization shows the relationships between streaming platforms and their original shows, with Netflix and Hulu as platform nodes connected to their respective series. The force-directed layout uses d3.forceSimulation with link, charge, and center forces to position nodes dynamically, while SVG lines and circles represent links and nodes, colored by group. The code binds node labels directly and updates positions on each simulation tick, creating an interactive-looking network diagram rendered entirely in SVG.

Nnishanththouta16@gmail.com
83% 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
83% match
Loading thumbnail…

Fork of Force Network

A force-directed network diagram maps actors and directors to their films, with nodes colored by group and sized by connection value. Draggable circles represent people and movies, while gray lines show relationships such as "Acted in" or "Directed." The visualization uses D3 v6's `d3.forceSimulation` with link, charge, collision, and center forces, rendering nodes as SVG circles and links as lines with markers. Data comes from a local JSON file, loaded via `d3.json`.

Bbindhureddy98
83% match