Marvel vs DC Scatter Plot

100%

Marvel vs DC Scatter Plot

✓ Published0🌍 Public

Last edited Jun 29, 2022

Created on Jun 24, 2022

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.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

MarvelVsDC Bar Chart

This bar chart compares Marvel and DC movies by their IMDB ratings, displaying each film title along the vertical axis and its rating as a horizontal bar. The visualization uses D3 v5 within a React framework, employing `scaleLinear` for the x-axis and `scaleBand` for the categorical y-axis. Axes are generated with `axisLeft` and `axisBottom`, while the chart is rendered as SVG elements. The data is loaded from a CSV file via `d3.csv`, with rating values parsed to numbers before rendering.

Hhappymail6

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

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

80% match

Loading thumbnail…

Fork of MarvelVsDC Bar Chart

This horizontal bar chart compares revenue figures for Marvel and DC movies, ranking titles by their dollar value. The visualization uses D3 v5 with SVG rendering, employing `d3.scaleLinear` for the x-axis, `d3.scaleBand` for categorical y-axis spacing, and `d3.axisBottom` with a custom tick formatter that abbreviates large numbers. Data is loaded from a CSV file via `d3.csv`, with numeric conversion applied to the rate field. The chart demonstrates custom axis styling, including removal of domain lines and addition of axis labels.

Hhappymail6

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

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

79% match

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

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

77% match