Scatter Plot

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

94% match

Scatter Plot with Menus

A scatter plot visualizes movie data from the UCI Machine Learning Repository, displaying budget, gross revenue, and IMDb scores. Two dropdown menus allow the user to select which columns map to the X and Y axes. Built with D3.js v5, the visualization uses SVG rendering with animated transitions as circles move between positions. The code implements custom dropdownMenu and scatterPlot modules, using d3.scaleLinear for axes and d3.extent for domain calculations.

Aaalejandroq

88% match

Movie Stats Scatter Plot Iteration 5

This interactive scatter plot visualizes movie statistics from a CSV dataset, allowing users to compare variables such as IMDB rating, revenue, runtime, and year. Users can filter points by genre through colored checkboxes, search for specific actors, and switch the x- and y-axis among six quantitative fields. Clicking a circle displays the movie’s title. The visualization uses D3 v7 APIs like `scaleLinear`, `axisLeft`, and `axisBottom` to render axes and circles, with SVG elements updated dynamically via `selectAll` and `join`.

88% match

Movie Stats Scatter Plot Iteration 3

This interactive scatter plot visualizes movie statistics, letting users explore relationships between attributes like IMDB rating, runtime, and revenue. Users can toggle checkboxes to filter movies by genre, with each genre assigned a distinct color, and can switch the x- and y-axis variables via radio buttons, which update the plot accordingly. The visualization uses D3 v7's `scaleLinear`, `axisBottom`, and `axisLeft` to render axes and data points, loading tabular data from a CSV file.

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

Scatter Plot with Menus

This interactive scatter plot uses dropdown menus to let viewers select which data columns to display on the x- and y-axes. The visualization reads from a CSV file containing movie attributes like budget, gross, and IMDb score. The scatterPlot function creates linear scales, axes, and animated circles using d3.scaleLinear, d3.extent, d3.axisLeft, and d3.axisBottom. A dropdownMenu module builds the select elements with d3 data joins. The circles transition over 2 seconds with staggered delays, showing how axis labels and data points update dynamically when menu options change.

AArikuzzaman Idrisy

Movie Stats Scatter Plot Final Iteration

This interactive visualization lets users explore IMDB movie data through a customizable scatter plot. Users select which genres or actors to display and independently choose the X and Y axes from yearly release, runtime, rating, votes, and revenue. The plot encodes genre with color and includes hover effects that reveal movie titles. Built with D3 v7, the visualization uses the `scaleLinear` and `extent` functions for scales, `axisLeft` and `axisBottom` for labeled axes, and SVG circles for data points. The project also features a separate actor network graph, though it remains incomplete. Movie data is loaded from a local CSV file.

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