Skip to main content
100%

Periodic Table Scatter Plot

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

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.

AI-generated description

Built with blockbuilder.org

This data is from GitHub - andrejewski, periodic-table/data.csv. This dataset is a list of elements in the periodic table and their characteristics.

The color scheme uses the CPK Coloring for atoms and the circle size is relative to the atom size.

forked from curran's block: Stylized Scatter Plot with Color Legend

mit Licensed

Similar vizzes

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
92% match
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
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
89% 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
86% 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
79% 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
77% 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
72% match
Loading thumbnail…

Scatter Plot

This scatter plot visualizes the relationship between two numeric variables from a CSV dataset, plotting each point with x and y coordinates. It uses D3 version 6 with an SVG rendering approach, employing `d3.scaleLinear` to map the data domains to pixel ranges and `d3.axisBottom` and `d3.axisLeft` for the axes. Data is loaded asynchronously via `d3.csv`, and circles are appended and joined to the data using `.join('circle')`. The plot is styled with a teal fill and includes axis labels for "Numbers" and "Amount."

Bbugfree55
70% match