Skip to main content
SimilarExport ZIP
100%

Fork of Simple Scatter Plot

✓ Published0🌍 Public
Mmadipadiga.raviteja@gmail.com
Last edited Mar 21, 2024
Created on Mar 21, 2024

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.

AI-generated description

A simple scatter plot with D3 showing the Penguins Dataset.

Challenge

  • Fork this viz
  • Modify it to show your data
MIT Licensed

Similar vizzes

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
96% match
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
93% 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
88% match
Loading thumbnail…

Scatter Plot - ICE 6

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.

Ggaddamthanmayeereddy759@gmail.com
86% 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
86% match
Loading thumbnail…

Scatter Plot

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
85% 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
85% 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
84% match