Genres

100%

✓ Published0🌍 Public

Last edited Jan 19, 2017

Created on Jan 18, 2017

This force-directed network diagram visualizes associations between movie genres, derived from an association-rule mining dataset. Each node represents a genre, with links indicating co-occurrence relationships and their thickness reflecting item-set support values. Using `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter`, the layout positions nodes based on connection strength. The SVG rendering uses circles colored via `d3.scaleOrdinal` with `d3.schemeCategory20`, while `d3.drag()` enables interactive repositioning of nodes, with the simulation updating link and node positions on each tick.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/nbonneel/'>nbonneel</a>'s block: <a href='http://bl.ocks.org/nbonneel/91f6d433810029851e170ba668436340'>TP 6 DataViz</a>

forked from <a href='http://bl.ocks.org/RomyRatolojanahary/'>RomyRatolojanahary</a>'s block: <a href='http://bl.ocks.org/RomyRatolojanahary/a5f367a3df0cee665051b17c94ecd8a6'>TP 6 DataViz</a>

forked from <a href='http://bl.ocks.org/RomyRatolojanahary/'>RomyRatolojanahary</a>'s block: <a href='http://bl.ocks.org/RomyRatolojanahary/910ef595f20d2d61b451ff973f88d5f5'>TP 6 DataViz</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Conceptual Network

This interactive network visualizes connections between six movie genres and ten films, using a force-directed layout to position nodes. The visualization, built with D3 v7, employs `d3.forceSimulation` for the physics simulation and `d3.zoom()` to facilitate panning and zooming. Genre and film nodes are colored distinctly, with links representing genre assignments sourced from the IMDB dataset.

Mmustafaksyed1@gmail.com

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

79% match

Loading thumbnail…

Force Network

A force-directed network diagram maps relationships between actors, directors, and films, using node colors to distinguish roles and link markers to show direction. The visualization runs a `d3.forceSimulation` with link, charge, collision, and centering forces, while SVG circles and text labels represent nodes, and lines with arrowheads depict connections. Node positions update on each simulation tick, and dragging via `d3.drag` lets users reposition elements, with hover effects highlighting selected nodes. The chart renders from the provided `data.json` file and uses `d3.scaleOrdinal` for the color scale.

AAnthony Alsford

78% match

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

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

77% match

Loading thumbnail…

Fork of Netflix titles network graph

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.

Vviveknaroju999@gmail.com

76% match

Loading thumbnail…

Data Mining

This visualization shows a network of movie recommendations, where each node represents a film and links connect movies that are frequently recommended together based on association rules. Users can drag nodes to explore relationships, and hovering over a movie highlights its directly connected neighbors. The code uses D3 v4’s `d3.forceSimulation` with `d3.forceLink` and `d3.forceManyBody` to position the graph, and renders nodes as SVG circles with drag interactions. Data comes from a CSV file containing antecedent-consequence pairs from a recommendation dataset.

MMelanieSalignat

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

76% match