Skip to main content
SimilarExport ZIP
100%

Bonus ICE - 3D Bar chart

✓ Published0🌍 Public
Pprathyusha-reddy-arch
Last edited Apr 4, 2023
Created on Apr 4, 2023
Forked from HTML Starter

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.

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

Fork of Bonus ICE - 3D Bar chart

This example displays a 3D bar chart comparing growth metrics for seven social media platforms across six categories: Users, Revenue, WorkForce, Stocks, Locations, and Ranking. The chart utilizes the Highcharts library with the highcharts-3d module, enabling three-dimensional column rendering with configurable alpha, beta, and depth settings. Each category appears as a grouped series with stacked data points, plotted against a categorical xAxis and numeric yAxis. The code defines chart margins, column depth, and group padding to create the visual depth effect, with all data hardcoded as arrays within the series definitions.

Kkirangithub23
79% match
Loading thumbnail…

Bonus ICE

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.

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