Skip to main content
SimilarExport ZIP
100%

Fork of bonus ice

✓ Published0🌍 Public
Aajaysonu
Last edited Apr 5, 2023
Created on Apr 5, 2023
Forked from bonus ice

The visualization displays 3D bar charts derived from a CSV file, with cubes representing data values and an animated, interactive rotation controlled by mouse drag. Built with React and D3 v4, it uses the `d3._3d` API combined with SVG paths and `transition` animations for cube rendering and text labels. The underlying data is loaded via `d3.csv` from a GitHub-hosted source, while a Plotly 3D scatter plot module is also present for comparison.

AI-generated description

Axes with 3D

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of bonus ice

This visualization presents a 3D cube field where each cube's height encodes a data value, rendered with SVG and animated transitions. The cubes originate from a CSV dataset of population figures, though the primary visual focus is the interactive perspective. Users can drag to rotate the entire scene, adjusting the beta and alpha rotation angles via d3.drag. The code leverages d3._3d(), a custom plugin, to generate and sort cube faces, while d3.randomUniform determines cube heights. A text label on each cube animates its numeric value using transition.tween and d3.interpolateNumber, creating a dynamic, exploratory 3D bar chart experience.

PPujitha14challagulla
91% match
Loading thumbnail…

Fork of bonus ice

This example visualizes country population data with a bar chart that uses an isometric 3D cube rendering style, generated from a CSV file loaded via `d3.csv`. The chart displays horizontal bars scaled by `d3.scaleLinear` and positioned with `d3.scaleBand`, while the 3D effect is created using the `d3-3d` library to draw cubes with height proportional to population values. The rendering includes interactive drag rotation, implemented with D3 drag events, and per-cube color mapping via `d3.scaleOrdinal`.

SSravyaAnnadi
88% match
Loading thumbnail…

Fork of bonus ice

This fork of the "bonus ice" example displays a horizontal bar chart of population data for ten countries, drawn as SVG rectangles. The React app loads the data from a CSV, parses population values for 2020, and uses d3's `csv`, `scaleBand`, and `scaleLinear` to map countries and their populations to bar positions and lengths. A grid of x-axis ticks and country label texts supplement the bars. The visualization is rendered with React and D3 v4, using static SVG elements without animation.

SSamanvitha1
83% match
Loading thumbnail…

Fork of Bonus ICE - 3D Scatter plot

A 3D scatter plot visualizes bridge measurements, using the Plotly.js library and a dataset loaded via D3.js from a CSV file. Each marker represents a bridge, positioned by its length, width, and height, with axis titles labeled accordingly. The code uses `d3.csv` to fetch the data and `Plotly.newPlot` to render the interactive plot into a specified div. The layout configures the 3D scene with custom axis styling, while the plot’s markers appear as circles with defined opacity and outline properties.

Bbageltoes
82% match
Loading thumbnail…

Fork of 3D Bar Plot AISHWARYA-M

This example presents an interactive 3D bar plot rendered as cubes in SVG, with each cube’s height representing a numeric value. The visualization uses the d3-3d plugin to project 3D coordinates onto a 2D plane, supporting mouse-drag rotation around both axes via d3.drag. Cubes are generated from random uniform height values and colored with d3.scaleOrdinal using a category color scheme. The code also includes a fork with a separate React-based 2D bar chart that loads UN population data from a CSV using d3.csv, applying scaleBand and scaleLinear for axes and animated transitions.

CCHENNI-Nidhaleddine
81% match
Loading thumbnail…

Fork of ICE

This example displays a 3D multi-series bar chart of student scores in Science, English, History, and Maths for named individuals, with data loaded from a CSV file. The visualization uses the d3-x3d library alongside d3.v5, x3dom, and the d3-3d plugin to render interactive WebGL-based bars. The chart is generated by calling `d3.x3d.chart.barChartMultiSeries()` on a chart holder div, with data parsed via D3’s `csv` function and rows transformed into key-value pairs using a custom `parseRow` function. Yellow backgrounds and black text style the page.

SSnarasimhap
81% match
Loading thumbnail…

Fork of Fork of Bonus ICE Scatter plot using D3.js

This example shows two 3D scatter plots of agricultural data, comparing crop production and district names against crop year, season, and area. The visualization uses Plotly's `scatter3d` traces rendered inside a `myDiv` container, with data loaded from a CSV file via D3.js’s `d3.csv`. Each trace maps distinct dataset columns to the x, y, and z axes, using marker size, color, and opacity to differentiate the points. The code relies on Plotly’s `newPlot` API to render the interactive chart.

Vvryvarma5577@gmail.com
81% match
Loading thumbnail…

Fork of Fork of Bonus ICE Scatter plot using D3.js

This example shows two 3D scatter plots of agricultural data, comparing crop production and district names against crop year, season, and area. The visualization uses Plotly's `scatter3d` traces rendered inside a `myDiv` container, with data loaded from a CSV file via D3.js’s `d3.csv`. Each trace maps distinct dataset columns to the x, y, and z axes, using marker size, color, and opacity to differentiate the points. The code relies on Plotly’s `newPlot` API to render the interactive chart.

Vvryvarma5577@gmail.com
81% match