Skip to main content
100%

Periodic Table Scatter Plot

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

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`.

AI-generated description

Built with blockbuilder.org

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
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
90% 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
87% 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
76% match
Loading thumbnail…

Scatter Plot

A scatter plot displays individual data points positioned by two numeric variables, with each point rendered as a small circle. The visualization uses D3.js v6 and is built with a simple SVG container. The code applies the `d3.scaleLinear` function to map x- and y-values to pixel coordinates, then appends `circle` elements to the chart area. Axes are generated with `d3.axisBottom` and `d3.axisLeft`. The data is loaded from an external CSV file using `d3.csv`, and the plot updates dynamically once the data is parsed.

JJames Huang
75% 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
75% match