100%

PopCha! Movie Network

✓ Published0🌍 Public

Last edited Oct 17, 2018

Created on Oct 17, 2018

PopCha! Movie Network visualizes a subset of a movie-similarity graph, where nodes are films and links represent co-occurrence in user interactions from the PopCha! recommender engine, ignoring all movie content metadata. The D3.js force-directed layout animates node positions and link connections, with node size mapped to a similarity score and red borders highlighting the top-seeded films. Hovering reveals a movie’s title and its direct connections; clicking opens a detail panel with metadata like cast, genre, and director, and allows recentering or navigating to related movies. Zooming expands the graph around the current focus, and titles appear on all nodes beyond a certain zoom threshold.

AI-generated description

The PopCha! Movie Network

A visualization of similarity between movies by means of a network graph

Similarity data taken from [PopCha!] 1 recommender engine (R*)
Movie info from [The Movie Database] 3
Visualization done in JavaScript with [D3.js] 2

forked from <a href='http://bl.ocks.org/paulovn/'>paulovn</a>'s block: <a href='http://bl.ocks.org/paulovn/9686202'></a>

mit Licensed

Similar vizzes

Loading thumbnail…

PopCha! Movie Network

This example visualizes a movie network derived from user interactions in the PopCha! mobile app, where nodes represent films and links indicate similarity based on how users pick them. The force-directed graph, built with D3.js layout and rendering, lets users hover over nodes to see titles and click to open a details panel. The code uses `d3.layout.force` for layout, SVG for rendering, and scales for zooming, with movie data loaded from a JSON file.

NNathannous

92% match

Loading thumbnail…

Untitled

This interactive network graph visualizes connections between movies, with each node representing a film and links showing relationships between them. The visualization uses d3.v3 to render the force-directed layout, with nodes colored and sized by their calculated score and level values. Clicking a node displays additional movie details including title, cast, director, and cover image in a side panel. The implementation reads from a movie-network.json data file and uses d3.forceSimulation for the physics-based node positioning and link rendering.

NNathannous

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

70% match

Loading thumbnail…

Data Mining

A network visualization maps movie recommendations from a CSV dataset, showing connections between films based on association-rule mining. Users can click or hover over nodes to highlight related movies, with a tooltip displaying the film title and a zoom feature for closer inspection. The code uses d3.forceSimulation for layout, d3.csv for data loading, and SVG circles and lines for rendering, with d3.zoom enabling pan and zoom interactions.

MMelanieSalignat

69% match

Loading thumbnail…

Data Mining

This interactive visualization maps the interconnectedness of films, showing how a single movie like *2001: A Space Odyssey* links to a vast network of over one hundred related titles. The primary display uses a force-directed graph layout via D3.js v4’s `forceSimulation` to position the nodes of the recommendation network. A separate chart reveals the frequency of genre pairs, drawing on the `genres.csv` dataset. Data is rendered as SVG, with the dataset loaded from external CSV files in a custom script.

MMelanieSalignat

67% match

Loading thumbnail…

Network Graph

A force-directed network graph displays seven nodes representing movie-related concepts, such as Movie, Story, and Director, connected by weighted links that indicate relationships. The SVG visualization uses the D3.js `layout.force()` API for physics-based positioning, allowing nodes to be dragged and repositioned. Data loads from a local `graphFile.json` file, with link thickness proportional to each connection's weight, and node styling applied via CSS classes.

Vvarun-030

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

64% match

Loading thumbnail…

Scatter Plot with Menus of Top 5000 TMDB Movies showing various correlations

This interactive scatter plot visualizes correlations among the top 5,000 TMDB movies, with dropdown menus letting users select budget, popularity, revenue, runtime, or vote average for either axis. Semi-transparent, colored circles reveal overlapping data points and density clusters. D3 v6 handles the scalable axes, animated transitions, and menu-driven updates, while SVG renders the chart.

TT-Reiser

64% match