MCU Pie chart

100%

✓ Published0🌍 Public

Last edited Jul 2, 2022

Created on Jun 30, 2022

This interactive dashboard visualizes the budgets and worldwide grosses of Marvel Cinematic Universe movies as a pie chart and histogram. The pie chart breaks down each movie’s total into three categories—Budget, Domestic Gross, and Worldwide Gross—with hover interactions on either chart updating the complementary visualization. Built with D3 v3 inside a React framework, it uses `d3.scale.ordinal`, `d3.scale.linear`, and SVG transitions to animate changes, while a legend with frequency and percentage totals provides additional context. Data is embedded directly in the script.

AI-generated description

A bare minimum HTML page.

Similar vizzes

Loading thumbnail…

Pie Chart

This pie chart visualizes IMDB ratings for Marvel and DC movies, comparing titles like The Avengers, Infinity War, and The Dark Knight. The chart uses d3.pie to compute arc angles from the data values and d3.arc to generate SVG path segments, with d3.scaleOrdinal assigning categorical colors. Each slice responds to mouseover and click events, displaying a tooltip with the movie name and rating via d3.event positioning. Data loads from a comma-separated CSV file pulled from a GitHub gist, with the visualization rendering entirely as SVG within a fixed-size viewport.

Hhappymail6

81% match

Loading thumbnail…

Bonus ICE Scatter

This interactive 3D scatter plot shows the relationship between movie titles, genres, and production budgets across the Marvel Cinematic Universe. The chart reveals the distribution of budgets across different film genres through a three-dimensional visualization. The visualization loads MCU data from a CSV file using d3.csv, then constructs a Plotly scatter3d trace with genre on the y-axis and budget on the z-axis. The code uses Plotly's newPlot function to render the interactive chart, which features blue markers with adjustable opacity and thin outline strokes.

Hhappymail6

77% match

Loading thumbnail…

Marvel vs DC Scatter Plot

This interactive scatter plot compares Marvel and DC movies by IMDB rating on the x-axis and budget (in tens of millions) on the y-axis, with each point colored by the movie’s company. The visualization uses D3 v5 scales, axes, and a legend to map data from a CSV file containing movie statistics. SVG circles are positioned via `d3.scaleLinear` for both dimensions, while `d3.scaleOrdinal` with `schemeCategory10` assigns company colors, and the `d3.legend` plugin renders the categorical color legend.

Hhappymail6

76% match

Loading thumbnail…

MCU plott

This animated scatter plot visualizes the Marvel Cinematic Universe dataset, mapping IMDB ratings, Phase, and Metascore across different axes. The visualization cycles through these three variables every two seconds, updating the x-axis and circle positions accordingly. Built with D3.js v6, it uses `scaleLinear`, `axisLeft`, `axisBottom`, and `selection.join()` to render and update SVG circles. The data is loaded from a GitHub Gist CSV file, with parsing handled via `d3.csv` and numeric conversion in a custom row function.

Hhappymail6

76% match

Loading thumbnail…

MCU Scatter plot

A scatter plot visualizes Marvel Cinematic Universe films, plotting IMDB ratings against a cycling x-axis that rotates through Phase, Oscar nominations, and Metascore every 1.5 seconds, with animated transitions between metrics. The SVG visualization uses d3.scaleLinear for axes, d3.scaleOrdinal for colored circles, and d3.axisLeft and d3.axisBottom to render the scales. Data comes from a CSV file loaded via d3.csv, with the plot redrawn on each interval through the scatterPlot helper function, which updates the x-axis label and re-enters circles.

Hhappymail6

74% match

Loading thumbnail…

Marvel

A horizontal bar chart ranks superhero movies by audience rating, with each bar labeled by film title. The visualization compares Marvel and DC films, showing higher-rated titles like *The Dark Knight* and *Avengers: Endgame* extending further right. Built with D3 v7, it loads CSV data, maps ratings to a linear scale, and uses a band scale for movie titles. SVG rectangles render the bars, while D3’s axis functions add labeled scales for rating and title.

Hhappymail6

74% match

Loading thumbnail…

Pie Chart , ICE-7

A pie chart visualizes the net worth in billions for various movies, with each slice colored and labeled to show the corresponding value. The chart is rendered as an SVG using D3 v5, leveraging `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to generate segments and map colors. Data is loaded from a CSV file via `d3.csv`, and a legend on the right lists each movie title alongside its net worth. The visualization emphasizes clear labeling and color coding to compare budget figures across films.

Ggaddamthanmayeereddy759@gmail.com

73% match

Loading thumbnail…

Intercative Bar Chart

This interactive bar chart displays IMDB ratings for Marvel Cinematic Universe movies from a CSV dataset. The chart uses D3.js v5 within a React-compatible HTML page, rendering bars as SVG shapes. Users can hover over bars to trigger mouseenter and mouseleave events that fade the selected bar, display a dashed horizontal line at that rating level, and show percentage divergence values between the selected movie and all others.

Hhappymail6

73% match