Skip to main content
SimilarExport ZIP
100%

3D chart

✓ Published7🌍 Public
Bbhargavarathod
Last edited Mar 12, 2022
Created on Mar 12, 2022
Forked from HTML Starter

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.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

3D Bar Chart

This example displays the top 10 countries most affected by COVID-19 as a 3D bar chart using the d3-x3d library, which bridges D3.js with X3D for WebGL rendering. The bars are generated from a CSV dataset containing case counts per country, loaded asynchronously via d3.csv. The chart uses d3.x3d.chart.barChartMultiSeries to create the three-dimensional visualization, with the axis and layout handled by the x3dom framework. The page includes custom CSS for styling the title and center alignment.

HHarshinireddyy19
94% match
Loading thumbnail…

Fork of 3D chart

This example displays the top 10 countries most affected by COVID-19 using a 3D bar chart rendered via the d3-x3d library and X3DOM. It loads CSV data from a GitHub gist, parses each row into key-value pairs for country and case counts, and feeds this into a multi-series bar chart component. The chart is attached to a div with a heading, and the visualization updates once the asynchronous CSV fetch completes. The code relies on d3.csv for data parsing, d3.select for DOM manipulation, and the chart’s datum and call methods for rendering.

VVineela Reddy
92% match
Loading thumbnail…

3D Bar Chart

This 3D bar chart visualizes the top 10 countries most affected by a virus, comparing case counts through extruded rectangular bars. The visualization uses the d3-x3d library to render three-dimensional graphics in the browser via X3DOM, while D3 v5 handles data loading and parsing from a CSV file. The chart displays each country on the x-axis with bar height representing the number of cases, styled with a pink heading and light blue background from the accompanying CSS.

HHarshinireddyy19
91% match
Loading thumbnail…

3D chart

This 3D bar chart visualizes the top 10 countries most affected by COVID-19, comparing Age and Height metrics for each nation. The visualization uses the d3.x3d library to render an interactive three-dimensional bar chart, with data loaded from a CSV file hosted on GitHub. The implementation combines d3.csv for data parsing, d3.scaleLinear for value mapping, and the d3-x3d chart component to generate the 3D scene, which is displayed within an HTML div element using the X3DOM framework.

DDINESH SAI BOPPANA
90% match
Loading thumbnail…

Fork of 3D chart

This visualization presents a 3D bar chart of the top 10 countries with the highest COVID-19 death counts, rendered using the d3-x3d library, which leverages the x3dom framework for WebGL-based 3D graphics. The chart displays each country as a vertical bar, with height representing death numbers, populated from a CSV dataset loaded via d3.csv. The code explicitly uses `d3.x3d.chart.barChartMultiSeries()` to generate the 3D scene, combining D3 v5 for data handling and CSS for page styling.

Vvegurusaiprathyusha
89% match
Loading thumbnail…

Fork of 3D Bar Chart using D3.js

This example renders an interactive 3D bar chart showing the top 10 countries with the highest COVID-19 death counts, as loaded from a CSV file using D3’s `csv` function. It builds the visualization by combining D3 v5, the `d3-3d` plugin, and the `d3-x3d` library, which converts SVG-like scenes into X3DOM for hardware-accelerated 3D rendering in the browser. The chart uses multi-series bars, with each country represented as a separate series, and scales are implicitly handled via the x3d.barChartMultiSeries component. Axes and data parsing are managed with standard D3 utilities (`scaleLinear`, `axisLeft`, `axisBottom`).

Vvegurusaiprathyusha
88% match
Loading thumbnail…

Amulya kannam

This interactive 3D bar chart visualizes the top 10 countries most affected by COVID-19, with each bar representing a country's case count. The visualization uses the d3-x3d library to render the chart in a 3D X3D scene, leveraging data loaded from a CSV file hosted on GitHub. The implementation combines d3.v5 for data parsing and chart configuration, while the d3-3d and x3dom libraries handle the three-dimensional rendering. The page includes a styled header and a chart holder div with fixed dimensions.

KkannamAmulyachowdary
87% match
Loading thumbnail…

<iframe width="560" height="292" src="https://vizhub.com/blikitha/f111e8fa345c43fa9a6e6d45227a5024?mode=embed" title="Untitled" frameborder="0" ></iframe>

This example presents a horizontal bar chart that displays the top 20 countries by reported COVID-19 cases, based on data from a CSV file loaded via `d3.csv`. The visualization uses React to manage component state and render an SVG, with D3 v5 scales (`scaleBand` and `scaleLinear`) to map country names and case counts to pixel positions. Each rectangle’s width encodes the case count, and the chart includes a blue gridline for the x-axis ticks.

Bblikitha
85% match