Scatter Plot

100%

Scatter Plot - ICE 6

✓ Published2🌍 Public

Last edited Mar 19, 2024

Created on Mar 14, 2024

This scatter plot shows the relationship between movie budgets and domestic gross earnings, with each data point represented as a circle. The visualization uses D3 version 6 to fetch CSV data from a GitHub gist via `d3.csv` and `d3.autoType`. A linear scale for each axis maps the data extents to the SVG canvas, and circles are positioned using the `cx` and `cy` attributes. Axis labels appear in red, and the chart fills the entire browser window, incorporating a larger top margin for the title.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Scatter Plot - ICE 6

This scatter plot visualizes the relationship between movie budgets and domestic gross earnings, with each point representing a film. The visualization uses D3.js v6 to load CSV data from a remote URL and render circles scaled along linear axes for both variables. The chart includes a titled header, red axis labels, and axis ticks generated through D3’s axis methods. The underlying data comes from a GitHub-hosted budget dataset, and the plot is drawn as an SVG using D3 selections to bind data to circle elements. The layout fills the browser window, with margins adjusted for the title and axis labels.

Mmadipadiga.raviteja@gmail.com

94% 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

86% match

Loading thumbnail…

Fork of ICE-7 Scatter plot

This example presents a scatter plot of movie budget versus revenue, sourced from a CSV file fetched via a Gist URL. The visualization maps budget on the x-axis and revenue on the y-axis, with each point represented by a blue, semi-transparent circle. The chart’s axes are scaled to include a 10% buffer above the maximum values for clarity. Built with D3.js v7, the code uses `d3.csvParse` to parse the data, `d3.scaleLinear` for axis scaling, `d3.axisBottom` and `d3.axisLeft` to render the axes, and appends SVG circles within a `#scatterplot` div.

Rrohithannadurai@my.unt.edu

86% match

Loading thumbnail…

Fork of Simple Scatter Plot

This scatter plot visualizes the relationship between movie budget and domestic gross revenue, with each point representing a film. The visualization uses D3 v6 to load CSV data from a GitHub gist, scales the two variables linearly, and renders circles as SVG dots. The chart includes labeled axes, a centered title, and resizes dynamically to fit the browser window, with red axis labels and steelblue data points.

Mmadipadiga.raviteja@gmail.com

84% match

Loading thumbnail…

Bar Chart - ICE 6

This bar chart visualizes movie budgets from a CSV data source, displaying each film’s budget as a horizontal bar sorted by movie title. The visualization uses D3 v6 to create the SVG-based chart, with bar lengths encoded by budget values and movie titles on the y-axis. The code employs `scaleLinear` for the x-axis and `scaleBand` for the y-axis, while axes are rendered using `axisLeft` and `axisBottom`. A gradient fill (green to orange) colors the bars, and the chart includes labeled axes and a title, "MOVIES WITH THEIR BUDGET (IN MILLIONS)." The x-axis uses tick formatting (e.g., "45M") to simplify large numbers.

Ggaddamthanmayeereddy759@gmail.com

83% match

Loading thumbnail…

A scatter plot displays movie gross collections against budgets, with each point colored by MPAA rating and sized proportionally to gross earnings. The visualization uses D3 v3 with SVG rendering, including d3.svg.axis for axes, d3.scale.sqrt for point sizing, and d3.scale.category10 for color encoding. A d3-tip tooltip reveals movie title and gross on hover. Data originates from a tab-separated file listing movie attributes.

MMrajyalakshmi

81% 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

81% 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

80% match