Skip to main content
SimilarExport ZIP
100%

Bonus ICE - 3D Bar chart

✓ Published0🌍 Public
Aachalasam
Last edited Jul 7, 2022
Created on Jul 7, 2022
Forked from HTML Starter

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.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Cricket Runs Analysis

This interactive bar chart visualizes cricket runs scored by different players each month from January through May. The visualization uses d3.x3d to render a 3D multi-series bar chart, with each player’s monthly performance represented as a separate series. The code loads player data from a CSV file using d3.csv, parses the values into the required format, and feeds them into the d3.x3d.chart.barChartMultiSeries function. The chart is displayed within an HTML page that imports D3 v5, d3-3d, and x3dom libraries to support the three-dimensional rendering.

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

Bonus ICE - 3D Bar Chart using D3.js

This example presents a 3D bar chart visualizing the hourly climbing distances of athletes over five consecutive hours. Built with React and D3.js v5, it uses the `d3.x3d.chart.barChartMultiSeries` API to render the multi-series data as 3D bars, relying on the d3-3d and X3DOM libraries for the 3D scene. The data is fetched from a CSV file using D3’s `csv` function and parsed into a key-value structure before being passed to the chart.

Aav.dj.2000@gmail.com
80% match
Loading thumbnail…

Bonus ICE

This example shows the top 10 cricket batters by ICC Player Ranking, grouped by their national teams. The chart presents a 3D bar chart, with bars grouped by country, including India, Australia, England, New Zealand, Sri Lanka, and Pakistan. The code uses the Highcharts library with the Highcharts 3D module, enabling a three-dimensional perspective. The chart has margins and a view distance configured, stacking bars in groups per country while displaying batting ratings along the y-axis.

Uubl2
79% match
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
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
78% match
Loading thumbnail…

Bonus ICE - 3D Bar chart

A 3D vertical bar chart compares total downloads for seven music artists across six app stores, with each store’s download counts stacked as distinct colored bars per artist. Built with Highcharts and the Highcharts 3D extension, it renders columns with depth, enabled via `options3d` (alpha, beta, viewDistance, depth), and uses `plotOptions.column` for stacking and grouping. The chart plots series arrays for each store, with categories on the x-axis, download totals on the y-axis, and a z-axis titled “Various Sources.” The example uses a grey background and a fixed-height container.

Ssuchitra2602
78% 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
78% match