Skip to main content
SimilarExport ZIP
100%

Bonus ICE - Bart Chart 3D

✓ Published2🌍 Public
AAashish Pandey
Last edited Mar 11, 2022
Created on Mar 11, 2022
Forked from HTML Starter

This example visualizes the top 10 countries by COVID-19 case counts using a 3D stacked bar chart. Each column represents a country, with three stacked segments showing total cases, total recovered, and active cases. The chart uses the Highcharts library with its highcharts-3d module, enabling a rotated perspective via the `options3d` configuration (alpha, beta, and depth). Data is supplied directly in the series arrays, with categories labeled by country names on the x-axis and case numbers on the y-axis.

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

A 3D bar chart displays Covid-19 case data for seven U.S. states, showing total cases, deaths, recoveries, and population as stacked, grouped columns. Using the Highcharts library with its highcharts-3d.js extension, the chart applies a 3D perspective through the options3d settings, with each series (Total Cases, Total Deaths, Total Recovery, Population) rendered as separate colored bars. The x-axis lists state names, the y-axis measures total cases, and the z-axis is labeled "Observations(Covid)." The dataset appears to be sourced from state-level Covid-19 statistics, rendered with depth and rotation for visual comparison.

Ggayuvurukuti@gmail.com
86% match
Loading thumbnail…

ICE-6 (Bar Chart)

A bar chart displays the top 10 countries by total COVID-19 cases, with country names labeled along the vertical axis and case counts on the horizontal axis. The visualization is built with React and D3 v5, using `csv` to load data, `scaleBand` for the categorical y-axis, and `scaleLinear` for the numeric x-axis. SVG rectangles are rendered for each bar, with axes and tick marks generated manually via D3's `max` and `format` functions.

AAashish Pandey
83% match
Loading thumbnail…

ice 6

A horizontal bar chart displays the top 10 countries by COVID-19 case counts, with countries listed on the y-axis and case numbers on the x-axis. The visualization uses React to manage state and render SVG elements, while D3 v5 functions like `csv`, `scaleBand`, and `scaleLinear` handle data loading, scaling, and axis ticks. Data is fetched from a GitHub-hosted CSV file.

Bbhargavarathod
82% match
Loading thumbnail…

Bonus ICE 11554625

This example visualizes COVID-19 case counts for multiple countries across the years 2019–2023 as a multi-series 3D bar chart. It renders the data using the d3-x3d library, which combines D3.js v5 with X3DOM for WebGL-based 3D graphics. The visualization reads CSV data from a GitHub gist, parses it with `d3.csv`, and binds it to the chart via the `datum()` method. The chart is displayed inside an HTML div with styling, allowing interactive rotation and exploration of the three-dimensional bars representing case numbers.

MManohar Kowthavarapu
81% 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
81% match
Loading thumbnail…

3D chart

This 3D bar chart visualizes the top 10 countries most affected by COVID-19, with each country’s total case count represented as a vertical bar. The example uses D3 v5 alongside the d3-3d and d3-x3d libraries to generate the interactive scene, which is rendered through X3DOM in the browser. Data is loaded asynchronously from a CSV file, then parsed and passed to a `d3.x3d.chart.barChartMultiSeries()` component attached to a chart holder div. The page includes custom CSS styling for the heading and body layout.

Bbhargavarathod
81% 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…

ICE-6_11590101

This visualization displays the top 10 countries by total COVID-19 cases as a horizontal bar chart, with country names on the y-axis and case counts on the x-axis. The bars are rendered as SVG rectangles using React and D3 v5, with scales created via `d3.scaleBand` and `d3.scaleLinear`. Data is loaded asynchronously from a CSV file using `d3.csv`, and axes are drawn manually with gridlines and tick labels. The title indicates the chart focuses on the highest COVID-19 case counts among nations.

DDivyasri0310
79% match