Skip to main content
100%

Gist bec8d320e856dfbbbf6045d7f90b4a80

✓ Published0🌍 Public
Aaimunoz73
Last edited Jun 16, 2018
Created on Jun 16, 2018

This visualization uses a force-directed graph to map movie genres, with each movie node colored by genre and sized by budget. The chart displays all 26 movies from the dataset, using `d3.forceSimulation` to position nodes and `d3.scaleOrdinal` for color mapping. Labels appear next to each movie title, while the ROI value is shown on hover. The graph emphasizes genre clustering, with action and adventure films forming distinct groups, while the axis-free layout highlights relationships between budget, box office performance, and critical ratings.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist 084750a10fa41a3849235a117dec0b7b

This visualization plots movie production budget against box office earnings, with each film’s genre, ROI, and IMDb rating encoded through color, size, and position. Using a scatterplot rendered with D3.js, it employs `d3.forceSimulation` to arrange overlapping points and `d3.scaleOrdinal` for genre-based coloring. Data comes from the included `movies.csv` file, with axes scaled linearly to handle outliers like *Avatar* and *ET*.)

CCarlosVelamazan
85% match
Loading thumbnail…

Database4dataviz

This visualization compares 26 movies by budget, box office revenue, ROI, and IMDb rating using a force-directed network layout. The code builds a d3.forceSimulation with nodes positioned by genre clusters and links sized by budget-revenue relationships. Each movie is labeled with its title, while axes encode ROI horizontally and rating vertically. The data comes from a gist CSV with genre, production budget, box office, and rating columns, rendered as SVG circles with color-coded genres. The simulation applies charge, link, and collision forces to arrange the nodes.

Aalvarorueda89
85% match
Loading thumbnail…

Gist d8a5e47b4328b5560fb610c5731de2bd

This visualization displays a movie dataset from a JSON file, plotting each film as a circle positioned by a force-directed simulation. The circles are colored by genre and sized according to rating, with a legend mapping colors to categories. The code uses `d3.forceSimulation` to compute layout, with `d3.scaleOrdinal` for genre colors and `d3.scaleLinear` for circle radii. Titles appear as labels near each node, and the chart updates smoothly as forces settle the positions.

Aalanponce
85% match
Loading thumbnail…

Movies example dataset from RawGraphs.io

This example visualizes the financial performance of 26 movies using a force-directed network layout, where each node represents a film and its position encodes the relationship between production budget, box office revenue, and return on investment. The graph reveals clusters of high-performing genres like Action and Adventure, with outliers such as *ET* and *Titanic* dominating the ROI scale. The visualization is built with D3.js, leveraging `d3.forceSimulation` for physics-based node placement and `d3.scaleLinear` to map continuous financial metrics to visual encodings like node size and color intensity. The underlying data comes from RawGraphs.io’s “Movies” dataset, sourced from a gist by Enriquema, and is parsed directly from CSV.

EEnriquema
82% match
Loading thumbnail…

Movie Genre, Rating and Budget

This visualization displays movies as bubbles in a force-directed chart, with each bubble’s position along the x-axis encoding IMDB rating and its y-axis position encoding genre. Bubble size represents the movie’s budget, and color encodes the rating value. The chart uses the `d3.forceChart()` plugin, which is built on `d3.layout.force`, to gently shift bubbles toward their target x and y positions while preventing overlaps through collision detection. Data comes from the ggplot2 `movies` dataset, filtered to include only post-2000 films with budget and rating information, and rendered as SVG circles.

FFrissAnalytics
81% match
Loading thumbnail…

Data Viz 3 Group C

This interactive scatterplot visualizes the relationship between movie budget and revenue from a dataset of 15 films. Revenue is mapped to the x-axis, budget to the y-axis, with circle size encoding return on investment (ROI) and color distinguishing genre. Hovering over a circle enlarges it and displays a tooltip with the movie name, exact revenue, and budget. Clicking a genre in the legend filters the display to show only that genre; clicking again restores all genres. The plot includes axes labeled "Revenue in millions" and "Budget in millions" and uses an animated hover effect to enhance detail-on-demand exploration. Built with D3 v3 and blockbuilder.org.

Aannieypi
80% match
Loading thumbnail…

Data Visualization Assignment #3

This interactive scatterplot visualizes movie budgets versus revenue, colored by genre, with tooltips powered by an invisible D3 Voronoi overlay to improve hover detection. The chart uses SVG circles to represent individual movies, with a logarithmic x-axis for budget and a linear y-axis for revenue. Users can click legend items to filter the data by genre, and hovering over any point triggers a tooltip through the Voronoi grid, which extends the interactive area beyond the small circle targets. The visualization includes animated transitions and a color-coded legend for genres (Action, Adventure, Drama, Thriller/Suspense), making it easy to explore trends in movie financial performance.

Aannieypi
79% match
Loading thumbnail…

Scatter Plot_Group H

This scatter plot visualizes movie data, mapping IMDB rating on the x-axis and production budget on the y-axis. Each circle represents a movie, with its size encoding return on investment (ROI) and its color indicating genre (e.g., Action, Drama, Adventure) via a legend. Hovering over a circle highlights it in yellow and displays a tooltip with the movie name and ROI. The visualization uses D3 v4 with SVG rendering and smooth animations to support interactive exploration of the relationship between movie ratings, budgets, and profitability.

Aalvarorueda89
78% match