Skip to main content
100%

d3js: Scatterplot using CSV data.

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

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`.

AI-generated description

d3js: Scatterplot using CSV data.

Similar vizzes

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

Movie Stats Scatter Plot

This visualization plots movie ratings against box office revenue using a D3 v7 scatter plot, with data from a CSV file of film statistics. The plot displays each movie as a circle, and the interface includes checkboxes for filtering by genre, which dynamically update the visible data points using a bitstring representation. The code uses `d3.csvParse`, `d3.scaleLinear`, and `d3.extent` to handle data parsing and scaling, while the interactive filtering logic is implemented in the `dotAppears` function within `scatterPlot.js`.

KKyle?
80% 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
80% match
Loading thumbnail…

scatter plot v1

This scatter plot v1 example visualizes movie data from a CSV file, plotting each film’s budget against its gross earnings. The visualization uses D3 v5 with an SVG rendering approach, employing `scaleLinear` for the x-axis and `scaleBand` for the categorical y-axis. Bars are colored steelblue via CSS. The code loads data with `d3.csv`, converts population values, and renders axes using `axisLeft` and `axisBottom`. The dataset originates from a movie ratings source.

Yyqinolive
79% match
Loading thumbnail…

Fork of Simple Scatter Plot

This scatter plot visualizes movie budgets against domestic gross earnings, with each circle representing a film. The chart uses D3 v6 to load CSV data and render SVG circles, with linear scales mapping budget to the x-axis and domestic gross to the y-axis. The code includes axis labels in red, a title, and interactive margins. D3’s `d3.csv` and `d3.autoType` handle data parsing, while `d3.scaleLinear`, `d3.extent`, `d3.axisBottom`, and `d3.axisLeft` construct the visualization.

Mmadipadiga.raviteja@gmail.com
79% match
Loading thumbnail…

Scatter Plot

This interactive scatter plot explores relationships among movie budget, gross revenue, and IMDb scores using data loaded from a CSV file. Dropdown menus let users select which three measures to compare on the x-axis, y-axis, and color scale. The visualization uses D3 v5’s `scaleLinear`, `axisLeft`, and `axisBottom` to render animated SVG circles that transition from the chart’s center to their final positions. A modular `dropdownMenu` component and reusable `scatterPlot` function structure the code for maintainability.

Ddrmurugesh
78% 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
78% match