Skip to main content
100%

three.js css3d - periodic table. info.

✓ Published0🌍 Public
Aakollegger
Last edited Aug 4, 2015
Created on Nov 30, 2018

This interactive visualization presents the periodic table of elements as a 3D scene built with three.js and CSS3D. Each element is rendered as a labeled card showing its symbol, name, and atomic weight, with the data embedded directly in the script. Users can switch between four distinct layout modes — TABLE, SPHERE, HELIX, and GRID — via a menu of buttons. The table arrangement uses the standard periodic-table columns and rows, while the alternative layouts reorganize the same element cards into geometric formations: a sphere, a helix, and a grid. The scene is rendered with WebGL and supports smooth animated transitions between the different arrangements, providing an interactive way to explore the periodic table's structure.

AI-generated description

Similar vizzes

Loading thumbnail…

Element Visualization

This interactive visualization explores relationships among chemical elements through two coordinated views: a traditional periodic table layout and a circle packing arrangement. Built with D3.js, the project demonstrates data join and enter/update/exit patterns while allowing users to switch between layouts. Each element is represented as a colored circle, with visual encodings tied to properties like classification, state, and atomic weight from the elements.csv dataset. The table layout positions elements by their standard periodic table coordinates, while the circle packing layout groups related elements, with smooth SVG animations transitioning between the two views. Hovering or clicking on elements reveals details such as atomic weight, melting point, and crystal structure. The visualization is designed to explore relationships among chemical elements while serving as a technical reference for D3 data binding patterns. Note: This project is still under construction.

VVizzzHu
75% match
Loading thumbnail…

PERIODIC TABLE

This interactive periodic table maps common data visualization types onto a grid of colored circles, each labeled with a two-letter abbreviation. Users can hover to see the full chart name, click to log it to the console, and press to temporarily change the fill. Built with D3 v5, it uses SVG rendering, CSV data loading via `d3.csv`, and mouse event handlers for tooltips and interaction.

JJoker-tr
74% match
Loading thumbnail…

Periodic Table Scatter Plot

This visualization presents a periodic table as an interactive scatter plot, with each chemical element positioned by atomic number along the x-axis and atomic mass along the y-axis. Element symbols are plotted as text labels colored by their CPK hex color, providing an immediate visual grouping of element categories. The chart uses D3 v4 with SVG rendering to place elements, and supports interactive features such as mouseover tooltips that display detailed properties like electronegativity, atomic radius, melting point, and year discovered. This unconventional layout lets users explore periodic trends and compare elemental characteristics through spatial relationships rather than the traditional grid structure.

Aapratt2003
72% match
Loading thumbnail…

3D Force-Directed Graph (ThreeJS)

This example shows an interactive 3D force-directed graph rendered with Three.js WebGL, using ngraph.forcelayout3d for physics simulation and trackball controls for rotation, zoom, and panning. It cycles through three topological data sets—Les Misérables character co-occurrences, a blocks.json citation network, and D3 source-code dependencies—with node size, color, and name mapped per dataset using Three.js spheres, line geometry, and raycaster-based tooltips.

TThanaporn-sk
69% match
Loading thumbnail…

Periodic Table Scatter Plot

This scatter plot maps all 118 chemical elements from a CSV dataset of periodic table properties. Each element is positioned according to its atomic number and atomic mass, with circle size scaled to atomic radius and fill color using CPK atom coloring conventions. The visualization is built with D3 v4 and rendered as SVG, with axes showing atomic number and atomic mass, and the periodic table data sourced from andrejewski's GitHub repository.

Aapratt2003
69% match
Loading thumbnail…

Atoms and electrons 3D

This interactive 3D visualization shows the structure of an atom, with a glowing gold nucleus at the center and electrons arranged in three distinct shells colored green, blue, and pink. Using Three.js with WebGL rendering, it displays 18 electrons total—2 in the inner shell, 8 in the middle, and 8 in the outer shell—with each shell rotating at a different speed to simulate orbital motion. The scene includes directional and point lighting to make the electrons appear luminous, and users can rotate, zoom, and pan the camera through OrbitControls. The animation loop continuously updates the shell rotations each frame.

NNita
68% match
Loading thumbnail…

Fork of Atoms and electrons 3D

A 4×4×4 cube of 64 color-coded spheres rotates slowly in 3D space, demonstrating a lattice-like arrangement of electrons or atoms. Built with Three.js, the scene uses a WebGL renderer and OrbitControls for interactive camera rotation and zoom. Each sphere’s hue is derived from its grid position via HSL color mapping, with directional and ambient lighting illuminating the structure. The animation loop continuously rotates the entire group while the camera remains user-controllable.

NNita
68% match
Loading thumbnail…

Gist d773d6efc9640e3600ce

This WebGL-based visualization uses Three.js's CSS3DRenderer to position and animate 3D objects in a browser scene, with device orientation controls enabling rotation based on a mobile device's physical movement. The renderer maps 3D transforms onto CSS3D objects, preserving depth and perspective. The scene is rendered using a combination of CSS3D and WebGL techniques, with animated transitions driven by device orientation input.

Aabernier
68% match