100%

bonus ice

✓ Published0🌍 Public

Last edited Jul 7, 2022

Created on Jul 7, 2022

This example visualizes state-wise population growth using a 3D cube plot, where each cube's height corresponds to population values. The visualization is built with React and D3 v4, rendering SVG elements with animated transitions. It uses `d3.scaleBand` and `d3.scaleLinear` for axes, and the 3D rendering utilizes the `d3-3d` library's cube shapes with interactive drag rotation. Data is loaded from a CSV file via `d3.csv`.

AI-generated description

Axes with 3D

MIT Licensed

Similar vizzes

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

86% match

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

84% match

Loading thumbnail…

bonus ice

A grid of 3D cubes rises and falls over a flat plane, each cube’s height representing a numerical value from a static dataset. Users drag the scene to rotate it in three dimensions, revealing the bars from any angle. The visualization uses d3-3d to project cube vertices into two-dimensional SVG paths, with d3.scaleOrdinal assigning colors. Each cube displays its height as a tweened text label on its top face. The rendering is SVG, with animations driven by D3 transitions during rotation.

PPujitha14challagulla

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

78% match

Loading thumbnail…

Fork of 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.

Aajaysonu

78% match

Loading thumbnail…

ice7-3

This example displays population data for different states as a line chart, with population on the y-axis and time-based population values on the x-axis. The visualization uses D3 v5’s `csv`, `scaleLinear`, `scaleTime`, `axisLeft`, `axisBottom`, and `line` APIs to load and render the data as an SVG path. It reads data from a GitHub gist, applies margins and gridlines via tick sizing, and styles the line in red with labeled axes.

Ggayathri

77% match

Loading thumbnail…

Refactoring initial Gapminder Population Growth in React and D3

This example visualizes Gapminder population growth data, plotting total population against year for each country as circles with tooltips showing country names. Built with React and D3 v5, it uses `scaleLinear` for both axes, `scaleOrdinal` for color encoding, and `format` to abbreviate population labels. The SVG rendering includes custom `AxisBottom` and `AxisLeft` components that generate ticks, while `Marks` generates circles with D3’s `interpolateRainbow` color scheme. The data is loaded asynchronously from a CSV via `useData` and D3’s `csv` parser.

Llakalia@wpi.edu

77% match

Loading thumbnail…

Ice

This example displays a static SVG illustration of a map-like shape alongside a table of U.S. state population data. The visualization loads a CSV file from a GitHub gist using `d3.csv` and reports the dataset’s size, row count, and column count in a text element. All rendering occurs in SVG within a React framework, with minimal styling applied via CSS.

PPavaniMangugari

76% match