Skip to main content
SimilarExport ZIP
100%

Bonus ICE

✓ Published0🌍 Public
Hhappymail6
Last edited Jul 6, 2022
Created on Jul 6, 2022
Forked from HTML Starter

This example presents the production budgets of Marvel Cinematic Universe films, grouped by genre subcategories such as action-adventure-sci-fi and fantasy. It uses Highcharts with its 3D module to render an interactive column chart where bars are stacked and grouped in a three-dimensional perspective. The chart plots budget values in millions of dollars against movie titles, with individual data points defined as arrays in the series configuration. The visualization relies on the Highcharts API for 3D rendering and the jQuery library for DOM integration.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

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

BONUS ICE

This example shows a three-dimensional bar chart of movie and TV show views across multiple streaming platforms, including Netflix, Amazon Prime, Hulu, and HBO Max. Each series represents a title like FRIENDS, TITANIC, or DARK, plotted to a single category position along the x-axis. The chart uses Highcharts and the highcharts-3d module to enable a perspective view with configurable alpha, beta, and depth settings. Data is hard-coded inline as arrays in the series definitions, with stacked columns rendered using the column depth option.

SSaahithi49
75% match
Loading thumbnail…

BONUS ICE

This example visualizes view counts for various movies and TV shows across OTT platforms, including Netflix, Amazon Prime, and Hulu, using a 3D column chart. It constructs the visualization with the Highcharts library, specifically utilizing the highcharts-3d module to enable depth, rotation angles, and perspective for the bars. Each series represents a single title, such as FRIENDS or TITANIC, and is plotted at a specific platform position, while axes label the platforms and the number of views. The chart uses a dark blue background and stacking properties to organize the data points.

SSaahithi49
73% match
Loading thumbnail…

BONUS ICE1 - 3D Bar Chart

This example uses Highcharts and the Highcharts 3D add-on to render a three-dimensional vertical bar chart that visualizes total profit for sub-category products, grouped into quadrants based on sales and profit levels. The chart displays profit values on the y-axis and product categories on the x-axis, with distinct series for low and high sales/profit combinations. The code configures 3D properties such as depth, alpha, beta, and viewDistance within the `options3d` object to create the perspective view.

Rrallabandisushen@gmail.com
73% match
Loading thumbnail…

MCU Pie chart

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.

Hhappymail6
73% match
Loading thumbnail…

Bar Chart - ICE 6

This bar chart visualizes movie budgets from a CSV data source, displaying each film’s budget as a horizontal bar sorted by movie title. The visualization uses D3 v6 to create the SVG-based chart, with bar lengths encoded by budget values and movie titles on the y-axis. The code employs `scaleLinear` for the x-axis and `scaleBand` for the y-axis, while axes are rendered using `axisLeft` and `axisBottom`. A gradient fill (green to orange) colors the bars, and the chart includes labeled axes and a title, "MOVIES WITH THEIR BUDGET (IN MILLIONS)." The x-axis uses tick formatting (e.g., "45M") to simplify large numbers.

Ggaddamthanmayeereddy759@gmail.com
72% match
Loading thumbnail…

Bonus ICE

This example visualizes genre and YouTube video upload count per month using an interactive 3D bar chart. It displays multi-series data with each genre represented as a group of bars for the months January through May. The visualization is built with React, using d3.v5 for data processing and the d3-x3d library to render the 3D scene. Data is loaded from a CSV file via d3.csv, parsed, then passed to the chart holder through the barChartMultiSeries component. The X3DOM library handles the 3D rendering in the browser.

MMahitha-Moparthi
72% match
Loading thumbnail…

Bonus ICE - 3D Bar chart

This example presents a 3D bar chart visualizing PS4 game sales across five titles, broken down by region and global totals. Each game appears as a set of depth-enhanced, stacked columns along the x-axis, with sales values mapped to the y-axis. The chart uses the Highcharts library with its highcharts-3d module, configuring options3d for rotation and depth, and defines series for North America, Europe, Japan, Rest of the World, and Global sales. The x-axis categories list the game titles, while the y-axis and z-axis are labeled for total sales.

Aanushaanumula
71% match