Skip to main content
100%

Data Visualization Assignment #3

✓ Published0🌍 Public
Aannieypi
Last edited Jun 10, 2018
Created on Jun 10, 2018

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.

AI-generated description

This scatterplot is the final visual of my blog on Using a D3 Voronoi grid to improve a chart's interactive experience in which the tooltip is attached to the circles while the event is triggered by an invisible Voronoi grid that lies over the scatterplot. It also has some other features such as a filtering function when clicking on a region in the legend

forked from <a href='http://bl.ocks.org/nbremer/'>nbremer</a>'s block: <a href='http://bl.ocks.org/nbremer/801c4bb101e86d19a1d0'>Final - Voronoi Scatterplot - Life expectancy vs GDP per capita</a>

forked from <a href='http://bl.ocks.org/MattDionis/'>MattDionis</a>'s block: <a href='http://bl.ocks.org/MattDionis/e532e44f1b6edea60ab3'>Final - Voronoi Scatterplot - Life expectancy vs GDP per capita</a>

forked from <a href='http://bl.ocks.org/MattDionis/'>MattDionis</a>'s block: <a href='http://bl.ocks.org/MattDionis/7ad3724778ccd896203b'>Final - Voronoi Scatterplot - Life expectancy vs GDP per capita</a>

forked from <a href='http://bl.ocks.org/MattDionis/'>MattDionis</a>'s block: <a href='http://bl.ocks.org/MattDionis/5114e2dfdc24143cbd77'>Final - Voronoi Scatterplot - Life expectancy vs GDP per capita</a>

Similar vizzes

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
90% match
Loading thumbnail…

Activity6 Task3 Q 1

An interactive SVG scatter plot visualizes the relationship between movie budgets and box office revenue, with each point colored by genre, and hover tooltips revealing title, year, budget, and revenue. The visualization loads data from a CSV file and uses D3.js v7 scales for axes, an ordinal color scale for genre categories, and D3 transitions to animate points and tooltips on mouseover and mouseout events.

Kkoushikkumarreddykoorapati@my.unt.edu
85% match
Loading thumbnail…

fresh block

This interactive scatter plot displays movie budget versus revenue, with each circle’s size encoding return on investment and its color representing genre. The visualization uses D3 v3’s `d3.scale.linear`, `d3.svg.axis`, and category10 color scale, rendering SVG circles with hover tooltips that enlarge the dot and show the movie’s title and financial figures. Data is loaded from a local CSV file containing 19 films.

Aannieypi
85% match
Loading thumbnail…

ICE-7-Assignment-7

This interactive scatter plot displays movie budgets versus box office revenue, with each circle colored by genre and featuring hover tooltips showing title, genre, and financial details. Built with D3 v6, the visualization uses d3.scaleLinear for axes, d3.scaleOrdinal with d3.schemeCategory10 for color encoding, and d3.axisBottom/axisLeft for tick marks. The reusable scatterPlot() function employs data joins and transition-based tooltip opacity changes. The animation aspect comes from interactive mouseover effects that enlarge circles and reveal rich metadata, rendering SVG elements within a bordered container.

KKrishna.
85% match
Loading thumbnail…

Activity6 Task4 Q 1

This scatter plot shows the relationship between movie production budgets and box office revenues for 51 films, with each point colored by genre (Action, Animation, Sci-Fi, etc.). Hovering over a point enlarges the circle and displays a tooltip with the movie title, release year, genre, budget, and revenue. The visualization uses D3.js v7 with `d3.scaleLinear` for both axes, `d3.scaleOrdinal` with `d3.schemeCategory10` for genre colors, and `d3.csv` to load the dataset. Mouse events trigger smooth transitions and tooltip positioning.

Kkoushikkumarreddykoorapati@my.unt.edu
84% match
Loading thumbnail…

Scatter Plot

This interactive scatter plot visualizes movie data, comparing three variables—budget, gross revenue, and IMDB score—through user-selectable dropdown menus. The visualization uses D3 v5’s `scaleLinear`, `axisLeft`, `axisBottom`, and `csv` to load and render the data as animated SVG circles. Each axis is controlled via a dropdown menu, and points transition smoothly into position over one second, with axis labels and tick marks generated dynamically. The data is sourced from a local CSV file.

Ssourcebox-bug
83% match
Loading thumbnail…

Scatter Plot

This interactive scatter plot visualizes movie data, plotting IMDb ratings on the x-axis against production budgets on the y-axis, with each point sized by return on investment (ROI) and colored by genre. Built with D3 v4, the SVG chart includes labeled axes for Rating and Production Budget, and a color legend generated using the d3-legend library. Hovering over a circle changes its fill to pink and displays a tooltip with the exact values. The visualization also includes a bold title and animated transitions, with data sourced from a Gist by alvarorueda89 and styled using the Open Sans font.

Aalvarorueda89
82% match
Loading thumbnail…

Activity_6_q3

This scatter plot from D3 v6 visualizes movie box office performance, plotting Budget on the X-axis against Box Office revenue on the Y-axis, with points colored by Genre. The chart reveals a strong positive correlation between production cost and revenue, with Action films clustering in the upper right at high budgets and revenues, while Dramas concentrate in the lower-left with lower values. The code uses `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.schemeCategory10` to map coordinates and colors, while axes and legends are drawn with `d3.axisBottom` and `d3.axisLeft`. Data loads from a CSV file via `d3.csv` and renders as SVG circles.

Mmaneeshraja47@gmail.com
82% match