Skip to main content
100%

Periodic Table Scatter Plot

✓ Published0🌍 Public
Aapratt2003
Last edited Sep 17, 2017
Created on Sep 17, 2017

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.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/apratt2003/'>apratt2003</a>'s block: <a href='http://bl.ocks.org/apratt2003/4a74cc4d8421f1053b959f6e81c5c0f2'>Periodic Table Scatter Plot</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/4e68a41dcc470ddbf22930664fbc077b'>Periodic Table Scatter Plot</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/4418ec55d2e45327edb197e98f1bbb00'>Periodic Table Scatter Plot</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Periodic Table Scatter Plot

This visualization plots elements from the periodic table as a scatter plot, with atomic number on the x-axis and atomic mass on the y-axis. Each element is represented by a circle colored according to its CPK hex color value, with a legend explaining the color mapping. The code uses D3 v4 with SVG rendering, employing `d3.scaleLinear` for both axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and `d3.legendColor` from the d3-legend plugin to display the color scale. Data is loaded from a CSV file via `d3.csv`.

Aapratt2003
93% 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
92% match
Loading thumbnail…

Periodic Table Scatter Plot

This visualization uses D3.js v4 to render a scatter plot of the periodic table, with each element positioned by atomic number and atomic mass. The SVG-based chart includes a color legend built with d3-legend, coloring each element by its group block (e.g., nonmetal, alkali metal, noble gas) and encoding atomic mass on the y-axis. The dataset is sourced from the UCI Machine Learning Repository and includes properties like electronegativity and atomic radius, though the example focuses on the relationship between atomic number and atomic mass. The visualization is part of a D3.js video course and is available under an MIT license.

Aapratt2003
91% match
Loading thumbnail…

Resizing Scatter Plot

This responsive scatter plot visualizes the periodic table, with each element positioned by atomic number and mass, colored by CPK conventions, and sized according to atomic radius. Built with D3 v4 and SVG, the visualization is implemented as a reusable function that adapts to the container’s dimensions on window resize. The dataset comes from a GitHub repository of periodic table properties. Circles are color-coded by element type and scaled by atomic radius, providing an at-a-glance view of elemental trends. The code is MIT licensed and forked from Curran's Stylized Scatter Plot with Color Legend.

Aapratt2003
88% 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
79% match
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
78% match
Loading thumbnail…

three.js css3d - periodic table. info.

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.

Aakollegger
72% match
Loading thumbnail…

Scatter Plot

A simple scatter plot displays categorical labels on the vertical axis and numeric values on the horizontal axis, with circles sized at 18 pixels. The data comes from a CSV file, and the chart uses `d3.scaleLinear` for the x-axis and `d3.scalePoint` for the y-axis, with a tick format converting large numbers to abbreviated units. Axes are rendered via `d3.axisLeft` and `d3.axisBottom`, and the visualization is built using SVG elements selected through `d3.select`. The chart includes a title and axis labels styled via CSS.

CChocoOrange
71% match