Tell us what works and what could be better. We read every submission.
@annieypi·4 public vizzes
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.
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.
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.
This scatterplot visualizes the relationship between movie revenue and return on investment (ROI) using CSV data loaded via `d3.csv`. The visualization renders circles in an SVG, with x and y positions determined by `d3.scale.linear` scales for Revenue and ROI. Hovering triggers animated transitions via `transition.attr` that enlarge circles and thicken strokes, while a `title` element provides tooltips. Axis labels and ticks are formatted using `d3.svg.axis` and `d3.format`.