Bonus ICE

100%

✓ Published0🌍 Public

Last edited Jul 6, 2022

Created on Jul 6, 2022

This example shows three groups of five values as 3D bars, comparing their heights across categories. The chart uses the ZingChart library, specifically the `bar3d` type with a configured `3d-aspect` setting for depth. Data is hardcoded into three series arrays, and the chart renders into a div with ID `myChart` via the `zingchart.render` method, set to a height of 400 pixels and full width. The page relies on plain HTML, CSS, and JavaScript without a framework or external data source.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Bonus ICE - 3D Bar chart

This example visualizes happiness report data across several countries using a 3D bar chart. It displays multiple metrics—including log GDP per capita, life ladder, social support, health, freedom, and generosity—as grouped, stacked columns along the x-axis, with z-axis categories for each happiness source. The chart is rendered using the Highcharts library with the highcharts-3d module, enabling 3D depth, rotation angles (alpha and beta), and perspective distance. The data is embedded directly in the JavaScript code within an HTML page, with a pink background.

Rrajasrilekkala

80% match

Loading thumbnail…

Bonus ICE - 3D Bar chart

This example shows a 3D vertical bar chart comparing annual income across seven professions, with male and female series plotted side-by-side along a depth axis. The chart uses Highcharts with the highcharts-3d module, enabling rotation and depth through the `options3d` configuration, which sets alpha, beta, and view distance. Data is provided as hardcoded arrays in the series, with categories on the x-axis, income on the y-axis, and gender on the z-axis. The code relies on jQuery to initialize the chart within a container div.

Pprathyusha-reddy-arch

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

79% match

Loading thumbnail…

Fork of Bonus ICE - 3D Bar chart

This example shows a 3D vertical bar chart of download numbers for five applications across five categorical sources, with data series plotted along a depth axis to create a three-dimensional column layout. The chart uses the Highcharts library with the highcharts-3d module, enabling rotation through the `options3d` configuration. The `plotOptions` define stacking and grouping for the columns, while the x-axis lists categories like latitude and longitude, and the z-axis is labeled "Various Sources." Each series is paired with its data points, and the chart is rendered inside a container using jQuery to initialize the Highcharts instance.

SSweetierams

79% match

Loading thumbnail…

Bonus ICE - 3D Bar chart

This example presents a 3D vertical bar chart displaying minimum and maximum temperature data for seven station names, shown as paired, stacked columns. The visualization uses Highcharts with the highcharts-3d module, enabling an isometric perspective through configurable alpha, beta, and depth settings. Each category on the x-axis represents a station, while the y-axis tracks station-names and the z-axis indicates temperature values. Data is loaded as arrays with explicit category indices, and series are defined for MIN_TEMP and MAX_TEMP with stacking and groupZPadding to separate the two temperature groups visually.

SSweetierams

79% match

Loading thumbnail…

3D Bar chart - Bonus_ICE

This example presents a 3D multi-series bar chart visualizing attrition across departments for three years (2016–2018). It renders the categorical data as extruded bars in a spatial scene, with axes and grid lines for depth perception. The visualization leverages the `d3-x3d` library, which bridges D3.js v5 with X3DOM for WebGL-based 3D output. Data is loaded asynchronously from a CSV file using `d3.csv` and parsed into key-value pairs, then bound to the chart via `chartHolder.datum(data).call(myChart)`. The demo also includes sample random data generation for initial display before the real dataset loads.

HHema1430

78% match

Loading thumbnail…

Bonus ICE - 3D Bar chart

This 3D bar chart visualizes the runs scored by seven cricketers across five months (January through May), using a three-dimensional perspective to compare performance over time. The chart employs Highcharts with the highcharts-3d extension, configuring the chart type as 'column' with 3D options for depth, alpha, beta, and view distance. Each month is represented as a separate series with stacked, grouped columns, while the x-axis lists player names and the y-axis displays runs scored. The z-axis denotes months, and colors distinguish each series within the interactive HTML page.

Aachalasam

78% match

Loading thumbnail…

Bonus ICE

This example shows a 3D bar chart titled “Top phone sales in 3 countries,” comparing sales figures for nine product categories across the United States, India, and Germany. The chart uses Highcharts with the Highcharts 3D extension, enabling a column chart with stacking, grouping, and depth settings for a three-dimensional visual effect. Each series is assigned a different country, with data values expressed in billions of USD. The chart is rendered inside an HTML page using jQuery to initialize the Highcharts configuration on a container div.

Ssuchitra2602

77% match