Skip to main content
SimilarExport ZIP
100%

3D Bar Chart

✓ Published0🌍 Public
RRohithReddy-thoughts
Last edited Mar 12, 2022
Created on Mar 12, 2022
Forked from HTML Starter

This example visualizes the top 10 most liked companies for cryptocurrency based on social sentiment analysis data. It renders a 3D multi-series bar chart using the d3-3d library and D3 v5, with each company displaying three bars for Price, Posts, and Likes. The code loads CSV data via `d3.csv`, parses it into a hierarchical format, and attaches it to an X3DOM chart component through the d3-x3d library. The visualization includes an interactive 3D scene rendered in an HTML page with custom styling.

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 3D bar chart visualizes social sentiment data for the top 10 most-liked stocks and cryptocurrencies, comparing metrics like likes, posts, and price. It uses the d3-x3d library to render interactive 3D bars within an X3DOM scene, driven by D3 v5 for data loading and scaling. The visualization reads CSV data from a GitHub gist, parsing each asset’s name and its three numeric values. The chart’s multi-series layout displays each metric as a separate clustered bar group, with a custom-styled title and a blue background enhancing the visual presentation.

HHarishma Nallala
93% match
Loading thumbnail…

Data visualization ICE-6: Rendering Marks and Channels with React & D3

This bar chart displays the top 10 most-liked companies for crypto, based on social sentiment analysis data loaded from a CSV file. The visualization uses React and D3.js v5 to render SVG marks and channels, with a band scale for the categorical y-axis and a linear scale for the quantitative x-axis. Each company is represented as a rectangular bar, with the width encoding the number of likes, and axis ticks are generated using `scaleLinear.ticks`. The chart includes a styled title and uses a custom React component with `useState` and `useEffect` to fetch and process the data.

RRohithReddy-thoughts
85% match
Loading thumbnail…

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

This example shows the top 10 most liked companies for cryptocurrency based on sentiment analysis data from a CSV file, rendered as a horizontal bar chart using React and D3. The chart uses SVG marks with `rect` elements, scaled by `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis, with axis ticks generated from D3’s scale methods. Data is loaded asynchronously via `d3.csv`, sorted to the top 10 entries, and displayed with a custom title and styling in a React component.

RRohithReddy-thoughts
85% match
Loading thumbnail…

3D bar chart

This interactive 3D bar chart visualizes the stock prices of top companies from January to June, with a multi-series dataset loaded from a CSV file. The visualization renders each company's monthly values as three-dimensional bars using the d3-x3d library, which integrates D3.js with X3DOM for WebGL-based rendering. The chart is animated and supports hover interactions, allowing users to inspect individual data points. Additional libraries including AnyChart are loaded but not utilized in the visible code, while the styling is handled through custom CSS.

Nnikhilagopi
84% match
Loading thumbnail…

3d bar chart (TestCode)

This example presents a 3D bar chart visualizing the stock prices of major companies across the first six months of 2022. The visualization uses the d3-x3d library in conjunction with D3 v5 to render an interactive, three-dimensional scene that users can rotate and explore. Data is loaded asynchronously from a remote CSV file using D3's `csv` function and parsed into a multi-series format. The chart combines the bar chart component from d3-x3d with X3DOM for web-based 3D rendering, and includes AnyChart libraries for additional charting capabilities.

VVamsi Krishna
82% match
Loading thumbnail…

Fork of 3D Bar Chart using D3.js

This example renders a 3D bar chart visualizing stock market data for top stocks across six months. The visualization uses the d3-x3d library to generate X3D scenes, with x3dom handling the browser-based 3D rendering. Data is loaded from a CSV file using d3.csv, parsed into a multi-series format, and passed to the d3.x3d.chart.barChartMultiSeries component. The code also loads d3-3d and the D3 v5 library to support the chart construction within an HTML page.

VVenkata Sai Preetham
81% match
Loading thumbnail…

Data visualization ICE-6: Rendering Marks and Channels with React & D3

This visualization displays the top 10 most-liked companies for stocks and crypto using a horizontal bar chart. The bars are rendered as SVG rectangles, with orange fills atop a green background, and the chart includes axis tick marks and labels. The code loads data from a CSV file using `d3.csv`, then uses a React component with `useState` and `useEffect` hooks to manage state. D3’s `scaleBand` and `scaleLinear` map company names and like counts, while the chart is drawn with JSX inside an SVG element, combining React’s declarative rendering with D3’s data utilities.

HHarishma Nallala
81% match
Loading thumbnail…

3D Bar Chart using D3.js

This example shows mobile phone sales data for multiple companies across twelve months as an interactive 3D bar chart. It uses the d3-x3d library to render the chart in X3DOM, a WebGL-based scene graph, by populating a `d3.x3d.chart.barChartMultiSeries()` component inside a React application. The data is loaded as CSV and parsed into a multiseries format, with D3 v5 handling scales, axes, and selections while d3-3d assists with 3D transformations.

Aachyutanandmishra17@gmail.com
79% match