Bonus ICE

100%

✓ Published0🌍 Public

Last edited Apr 4, 2023

Created on Apr 4, 2023

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.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Interactive Bar Chart Bonus ICE

This interactive bar chart displays the share of subscribers across YouTube channel categories, using a sample dataset. Hovering over a bar dims it, highlights its value with a dashed reference line, and labels every other category with its percentage difference from the selected one. The visualization uses D3 v5 with a React scaffold, rendering SVG bars with mouseenter and mouseleave handlers, value text, axes, and grid lines via d3.axisBottom and d3.axisLeft.

SSrujana390

80% match

Loading thumbnail…

Bonus ICE 3D Bar Chart

This example presents Netflix subscription prices for Basic, Standard, and Premium plans from 2016 to 2022 as an interactive 3D bar chart. The visualization uses the `d3.x3d.chart.barChartMultiSeries()` component from the d3-x3d library to render three grouped bars per year, with data loaded from a CSV file via `d3.csv`. The scene is displayed in an X3DOM container, combining D3.js for data parsing and the d3-3d extension for three-dimensional layout, allowing viewers to rotate and explore the price trends across plan tiers.

Jjayavamsi

80% match

Loading thumbnail…

Bonus ICE-3D Bar Chart using D3.js

This example visualizes car manufacturer sales data for the first six months using a 3D bar chart. The multi-series bar chart displays each manufacturer’s monthly values, rendered in an X3DOM scene through the d3-x3d library. The visualization loads CSV data from a GitHub gist, parses it into a dataset with month-value pairs, and passes it to a barChartMultiSeries component. The chart is created using d3.x3d.chart.barChartMultiSeries(), with data attached to the chart holder via the D3.js v5 selection API.

Ggayuvurukuti@gmail.com

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

79% match

Loading thumbnail…

Bonus ICE 3D Bar Chart

This example shows Netflix subscription price changes from 2016 to 2022 across three tiers—Basic, Standard, and Premium—as a 3D bar chart. The visualization uses the `d3.x3d.chart.barChartMultiSeries()` component to render the multi-series data, with D3 v5 loading the CSV and parsing rows. The chart is displayed within an X3DOM scene, and the bars are sized based on the numeric values from the dataset. Data is fetched from a GitHub Gist containing yearly costs for each plan.

Jjayavamsi

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

79% match

Loading thumbnail…

Bonus ICE - 3D Bar chat

This example presents a 3D bar chart visualizing the number of cancer cases for the first six months of 2022, broken down by cancer type. It uses the `d3-x3d` library to render the chart in X3D, with data loaded from a CSV file. The chart uses `d3.x3d.chart.barChartMultiSeries()` to create a multi-series 3D bar graph, with the x-axis representing cancer types and the z-axis representing months.

KKetha

79% match

Loading thumbnail…

Bonus ICE - 3D Bar Chart

This example visualizes average stock prices for nine major companies from 2015 to 2022 in an interactive 3D bar chart using X3DOM and d3-x3d. The d3.csv method loads data from a GitHub-hosted CSV file, which is parsed and bound to the chart via chartHolder.datum(data).call(myChart). The bar chart shows each stock on one axis, the year on another, and the price as the bar height, with the scene rendered in a browser using X3D markup.

NNaveen Kumar

78% match