Skip to main content
100%

Periodic Table Scatter Plot

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

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.

AI-generated description

Part of the video course: D3.js in Motion.

An example scatter plot with color legend using D3 and d3-legend.

This shows the "Iris" dataset. Originally published at UCI Machine Learning Repository: Iris Data Set, this small dataset from 1936 is often used for testing out machine learning algorithms and visualizations. Each row of the table represents an iris flower, including its species and dimensions of its botanical parts, sepal and petal, in centimeters.

forked from curran/.block

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
91% 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
90% 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
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
84% 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
75% 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
73% match
Loading thumbnail…

Scatter Plot

This scatter plot visualizes the relationship between two numeric variables, plotting each data point as a circle on a Cartesian plane. The chart uses the D3.js library to generate the axes and scale the data, while the `d3.select` and `d3.scaleLinear` APIs handle element creation and coordinate mapping. Each point’s position is derived from the input dataset, and the visualization updates dynamically when new data is passed to the main `update` function. The renderer draws only the SVG shapes, with no additional interactivity or color encoding applied to the points.

Hhaozhou334@gmail.com
71% 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