Skip to main content
SimilarExport ZIP
100%

Fork of 3D Bar Chart using D3.js

✓ Published1🌍 Public
Vvegurusaiprathyusha
Last edited Mar 12, 2022
Created on Mar 12, 2022

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`).

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

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
95% 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…

Fork of ICE-6

This visualization displays a horizontal bar chart of the top 10 countries with the highest COVID-19 death counts, with country names on the y-axis and death totals on the x-axis. The chart uses React for component structure and D3 v5 modules including `scaleLinear`, `scaleBand`, and `csv` for data loading, rendering as SVG rectangles. Data is sourced from a public CSV file fetched asynchronously, and the bars are styled with a uniform purple fill against a dashed-border title.

Vvegurusaiprathyusha
89% 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
88% match
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
87% match
Loading thumbnail…

Fork of Fork of ICE-6: Rendering Marks and Channels with React & D3

This interactive data visualization displays the top 10 most populous countries using a bar chart, with data sourced from a COVID-19 CSV dataset. Built with React and D3 v5, the code implements `scaleBand` and `scaleLinear` for chart axes and `csv` for data loading. It employs an SVG rendering approach, alongside a 3D bar chart visualization created with the d3-x3d library, which is initialized via `d3.x3d.chart.barChartMultiSeries()` to render the multi-series data.

RRavi Teja Bonam
87% match
Loading thumbnail…

Fouzan Uddin Bar Plot

This example visualizes COVID-19 death counts by country as an interactive 3D bar chart. The bars rise vertically from a flat plane, with each country’s death total mapped to bar height. The visualization uses the `d3-x3d` library to render the scene via X3DOM, while D3 v5’s `csv` loader fetches and parses the data from a GitHub gist. The `barChartMultiSeries` component from `d3-x3d` handles the 3D geometry, and the page loads required scripts for D3, X3DOM, and the chart wrapper.

Ffouzanuddin
86% match
Loading thumbnail…

Fork of Fork of ICE-6: Rendering Marks and Channels with React & D3

This bar chart displays the top 20 countries by reported COVID-19 cases, using horizontal bars to compare values. The visualization loads CSV data via `d3.csv` and slices the first 20 rows, with React managing state and rendering SVG elements. Scales are created using `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis, with axis ticks manually generated and mapped to React components. Each bar is drawn as a `rect` element, with the x-axis grid lines and tick labels rendered as SVG `line` and `text` elements.

Bblikitha
85% match