Skip to main content
SimilarExport ZIP
100%

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

✓ Published1🌍 Public
Rrohithannadurai@my.unt.edu
Last edited Mar 28, 2024
Created on Mar 28, 2024
Forked from ICE-7 (Part-1)

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.

AI-generated description

CSCE 5320.002 Scientific Data Visualization (ICE-7)

Part-1 REUSABLE SCATTER PLOT

  • Rohith Annadurai 11664585
MIT Licensed

Similar vizzes

Loading thumbnail…

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

This D3.js visualization presents two charts analyzing movie data: a line chart tracking revenue across movies by name and genre, and a reusable scatter plot comparing budget against revenue. The line chart uses `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the revenue axis, and `d3.line` to render the path, with rotated axis labels. The scatter plot uses `d3.scaleLinear` for both axes and appends circles to an SVG via `d3.select`. Data is loaded asynchronously from a GitHub-hosted CSV file using `d3.csv`, with date parsing via `d3.timeParse`.

Rreddysushma994@gmail.com
92% match
Loading thumbnail…

ICE-7 (Part-2) Rohith Annadurai

This example demonstrates a reusable scatter plot and a pie chart for visualizing movie data, created with D3 v7 and rendered as SVG. The scatter plot maps movie budgets to revenues, with circles colored steelblue and an orange hover effect, while the pie chart displays the distribution of movie genres as percentage-labeled slices with a custom color palette and a separate legend. Both visualizations are driven by a shared CSV dataset loaded from a gist, and the code is structured to allow easy reuse and adaptation for other datasets.

Rrohithannadurai@my.unt.edu
89% 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
89% match
Loading thumbnail…

ICE-7 (Part-4) Rohith Annadurai

This example presents two visualizations: a reusable scatter plot and an area chart, both built with D3.js v7. The scatter plot maps movie budgets against revenues using `d3.scaleLinear` for axes and SVG circles, with hover styling. The area chart displays cancer deaths over years, using `d3.area` to generate a filled path and `d3.axisBottom`/`d3.axisLeft` for scales. Both load data from external CSV files via `d3.csv`, and render interactively with SVG elements, including labeled axes and a steelblue fill for the area chart.

Rrohithannadurai@my.unt.edu
86% 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
85% match
Loading thumbnail…

ICE-7 (Part-3) Rohith Annadurai

This example demonstrates a line chart visualizing movie revenue over time, with each movie labeled by name and genre. The chart uses D3.js v7 to load CSV data from a GitHub gist, parse dates, and render an SVG line plot. The x-axis employs a band scale to display categorical movie-genre labels with rotated text for readability, while the y-axis linearly maps revenue values. The visualization includes labeled axes for clarity, and the line path connects revenue values across the dataset, providing a clear view of revenue trends across different movie entries.

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

Rohithice6 Q2

A scatter plot shows the relationship between a film’s budget (ranging from $1M to $3.5M) and its revenue (between $5M and $12M), with each circle representing a movie. The visualization uses D3.js v7 to load CSV data from a remote GitHub gist and render an SVG chart with linear scales for both axes. The code applies `d3.csv` for data loading, `d3.scaleLinear` for coordinate mapping, and `d3.axisBottom`/`d3.axisLeft` to draw labeled axes. The plot encodes individual data points as steelblue circles, with fixed margins and an 800×600 pixel container, but no trend line or interactive features are included.

Rrohithannadurai@my.unt.edu
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
82% match