Skip to main content
SimilarExport ZIP
100%

Fork of ICE-7 Scatter plot

✓ Published0🌍 Public
Rrohithannadurai@my.unt.edu
Last edited Mar 28, 2024
Created on Mar 28, 2024
Forked from 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.

AI-generated description

A reusable scatter plot inspired by Towards Reusable Charts.

Shows the https://gist.githubusercontent.com/saikrish777/47ff342e130d4cc88e2b70480b8f4f99/raw/ecafed046a68a0dd70350254526c8da082078996/TestCricket_Records.csv

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
90% match
Loading thumbnail…

Fork of ICE-7 (Part-1) Rohith Annadurai

A reusable scatter plot displays the relationship between movie budget and revenue. The D3.js code loads data from a CSV file, converts the numeric fields, and uses linear scales with padding to map values to SVG circles, which are colored steel blue and turn orange on hover. The plot includes labeled x- and y-axes for budget and revenue, with a fixed chart size and margins, and is built entirely with D3 v7's selection, scale, and axis APIs.

Rrohithannadurai@my.unt.edu
89% match
Loading thumbnail…

ICE-7-Assignment-7

This interactive scatter plot displays movie budgets versus box office revenue, with each circle colored by genre and featuring hover tooltips showing title, genre, and financial details. Built with D3 v6, the visualization uses d3.scaleLinear for axes, d3.scaleOrdinal with d3.schemeCategory10 for color encoding, and d3.axisBottom/axisLeft for tick marks. The reusable scatterPlot() function employs data joins and transition-based tooltip opacity changes. The animation aspect comes from interactive mouseover effects that enlarge circles and reveal rich metadata, rendering SVG elements within a bordered container.

KKrishna.
86% 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…

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

Fork of Fork of Fork of ICE7 Pie Chart

This example visualizes movie budgets and their net worth in billions using a pie chart, with each slice labeled and accompanied by a legend. The visualization fetches data from a CSV file and renders it as an SVG using D3 v5, employing `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to generate and color the chart’s segments. The code also uses `d3.format` to display tick values with abbreviations like "K" for thousands, while the title and axes are styled via an external stylesheet.

Ggaddamthanmayeereddy759@gmail.com
83% match
Loading thumbnail…

ICE 7 - Question 1

This interactive scatter plot visualizes the relationship between movie budgets and box office revenues, with points colored by genre. The visualization is built with D3.js v6 and uses a reusable scatterPlot function with configurable margins, scales, and labels. It employs d3.scaleLinear for axes, d3.scaleOrdinal with d3.schemeCategory10 for genre colors, and d3.axisBottom/axisLeft for ticks. Hovering over a circle triggers a tooltip that reveals the movie title, genre, budget, and revenue values.

KKrishna.
83% match