Skip to main content
SimilarExport ZIP
100%

Bonus ICE - 3D Bar chart

✓ Published0🌍 Public
Rrajasrilekkala
Last edited Apr 3, 2023
Created on Apr 3, 2023
Forked from HTML Starter

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.

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 - Bar Chart

This example shows a 3D bar chart of the World Happiness Report data for selected countries, with each bar representing a country and its segments colored by social support, freedom, generosity, and perceptions of corruption. It uses the d3-x3d library to render the chart in X3DOM, a WebGL-based 3D viewer, while d3.v5 handles CSV parsing and data binding. The bars support hover highlighting, and the visualization is embedded in a React page with a pink background and tooltip styling.

Rrajasrilekkala
90% 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
83% 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
82% match
Loading thumbnail…

3d Chart Bonus ICE

This interactive 3D bar chart visualizes H1 application data for a single country across five years (2019–2023). The visualization uses a multi-series bar chart from the `d3.x3d.chart` API, rendering bars in three dimensions via the X3DOM library. Data is loaded asynchronously from a CSV file using `d3.csv` and parsed into the expected format. The chart is attached to a holder element and dynamically redrawn when new data arrives. The example demonstrates integration between D3.js, the d3-x3d extension, and X3DOM for 3D web visualization.

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

Bonus ICE - 3D Bar Chart

This 3D bar chart displays employee counts at nine major companies, grouping them by the country of origin: the United States, Germany, and Japan. The visualization uses Highcharts with the Highcharts 3D extension, enabling an isometric view through configurable alpha, beta, and depth settings. The chart employs a column series with stacking and grouping disabled, using groupZPadding and depth parameters to create a single row of three-dimensional bars across the category axis.

SSatyaVineeth
80% match