PopCha! Movie Network

100%

PopCha! Movie Network

✓ Published0🌍 Public

Last edited Apr 28, 2020

Created on Apr 28, 2020

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.

AI-generated description

A bare minimum HTML page.

Similar vizzes

Loading thumbnail…

PopCha! Movie Network

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.

663anp3ca

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

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

72% 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…

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

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

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

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

68% match