d3 = require("d3@7")
// Main container for the widget.
triadWidget = {
const widgetId = "dobereiner-triads-widget";
const container = html`<div id="${widgetId}"></div>`;
// --- 1. CSS STYLING ---
const style = html`<style>
/* Dark mode styles only */
body.quarto-dark #${widgetId} {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
background: linear-gradient(135deg, #0a0e27 0%, #1a1a2e 100%);
border: 2px solid #00fff2;
border-radius: 12px;
padding: 2rem 2.5rem;
max-width: 750px;
margin: 1rem auto;
box-shadow: 0 0 30px rgba(0, 255, 242, 0.3), 0 0 60px rgba(255, 0, 255, 0.15);
position: relative;
}
/* Light mode - simple default styling */
body:not(.quarto-dark) #${widgetId} {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
background-color: #ffffff;
border: 1px solid #dee2e6;
border-radius: 8px;
padding: 1.5rem 2rem;
max-width: 750px;
margin: 1rem auto;
box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
body.quarto-dark #${widgetId}::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(45deg, #00fff2, #ff00ff, #00fff2);
border-radius: 12px;
z-index: -1;
opacity: 0.3;
filter: blur(10px);
}
body.quarto-dark #${widgetId} .widget-title {
font-size: 22px;
font-weight: 700;
text-align: center;
margin-bottom: 0.5rem;
color: #00fff2;
text-shadow: 0 0 10px rgba(0, 255, 242, 0.8), 0 0 20px rgba(0, 255, 242, 0.4);
letter-spacing: 1px;
}
body:not(.quarto-dark) #${widgetId} .widget-title {
font-size: 20px;
font-weight: 600;
text-align: center;
margin-bottom: 0.5rem;
color: #212529;
}
body.quarto-dark #${widgetId} .widget-subtitle {
font-size: 14px;
text-align: center;
color: #b0b0ff;
margin-bottom: 2rem;
text-shadow: 0 0 5px rgba(176, 176, 255, 0.5);
}
body:not(.quarto-dark) #${widgetId} .widget-subtitle {
font-size: 14px;
text-align: center;
color: #6c757d;
margin-bottom: 2rem;
}
/* Common styles for both themes */
#${widgetId} .widget-container {
display: flex;
justify-content: space-around;
gap: 2rem;
align-items: flex-start;
}
#${widgetId} .triad-column {
flex: 1;
text-align: center;
}
/* Dark mode element styles */
body.quarto-dark #${widgetId} .triad-title {
font-size: 18px;
font-weight: 600;
margin-bottom: 1rem;
color: #ff00ff;
text-shadow: 0 0 8px rgba(255, 0, 255, 0.6);
}
body.quarto-dark #${widgetId} .element-card {
background: linear-gradient(145deg, #16213e 0%, #0f1620 100%);
border: 1px solid #444;
border-radius: 8px;
padding: 0.75rem;
margin: 0.5rem auto;
width: 120px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
transition: all 0.3s ease;
}
body.quarto-dark #${widgetId} .element-card:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 255, 242, 0.3);
}
body.quarto-dark #${widgetId} .middle-card {
border-color: #00fff2;
border-width: 2px;
box-shadow: 0 0 20px rgba(0, 255, 242, 0.4), 0 4px 15px rgba(0, 0, 0, 0.5);
}
body.quarto-dark #${widgetId} .middle-card:hover {
box-shadow: 0 0 25px rgba(0, 255, 242, 0.6), 0 6px 20px rgba(0, 0, 0, 0.5);
}
body.quarto-dark #${widgetId} .symbol {
font-size: 28px;
font-weight: 700;
color: #00fff2;
text-shadow: 0 0 10px rgba(0, 255, 242, 0.6);
}
body.quarto-dark #${widgetId} .name {
font-size: 13px;
color: #a0a0c0;
margin: 0;
}
body.quarto-dark #${widgetId} .mass {
font-size: 15px;
font-weight: 500;
color: #d0d0e8;
margin-top: 0.25rem;
}
body.quarto-dark #${widgetId} .calculation-box {
margin-top: 1.5rem;
padding: 0.75rem;
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
border: 1px solid #444;
border-radius: 6px;
box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.3);
}
body.quarto-dark #${widgetId} .calc-title {
font-size: 13px;
font-weight: 600;
color: #b0b0ff;
margin-bottom: 0.5rem;
text-transform: uppercase;
letter-spacing: 1px;
}
body.quarto-dark #${widgetId} .calc-equation {
font-size: 16px;
font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
color: #e0e0ff;
}
body.quarto-dark #${widgetId} .calc-equation strong {
color: #ff00ff;
font-size: 18px;
text-shadow: 0 0 8px rgba(255, 0, 255, 0.6);
}
body.quarto-dark #${widgetId} .description {
font-size: 14px;
color: #c0c0d8;
margin-top: 1.5rem;
line-height: 1.5;
text-align: left;
}
/* Light mode element styles */
body:not(.quarto-dark) #${widgetId} .triad-title {
font-size: 18px;
font-weight: 500;
margin-bottom: 1rem;
color: #343a40;
}
body:not(.quarto-dark) #${widgetId} .element-card {
background-color: #f8f9fa;
border: 1px solid #ced4da;
border-radius: 6px;
padding: 0.75rem;
margin: 0.5rem auto;
width: 120px;
box-shadow: 0 2px 4px rgba(0,0,0,0.04);
}
body:not(.quarto-dark) #${widgetId} .middle-card {
border-color: #007bff;
border-width: 2px;
}
body:not(.quarto-dark) #${widgetId} .symbol {
font-size: 28px;
font-weight: 700;
color: #000;
}
body:not(.quarto-dark) #${widgetId} .name {
font-size: 13px;
color: #6c757d;
margin: 0;
}
body:not(.quarto-dark) #${widgetId} .mass {
font-size: 15px;
font-weight: 500;
color: #495057;
margin-top: 0.25rem;
}
body:not(.quarto-dark) #${widgetId} .calculation-box {
margin-top: 1.5rem;
padding: 0.75rem;
background-color: #e9ecef;
border-radius: 5px;
}
body:not(.quarto-dark) #${widgetId} .calc-title {
font-size: 13px;
font-weight: 600;
color: #495057;
margin-bottom: 0.5rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
body:not(.quarto-dark) #${widgetId} .calc-equation {
font-size: 16px;
font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
color: #212529;
}
body:not(.quarto-dark) #${widgetId} .calc-equation strong {
color: #007bff;
font-size: 18px;
}
body:not(.quarto-dark) #${widgetId} .description {
font-size: 14px;
color: #495057;
margin-top: 1.5rem;
line-height: 1.5;
text-align: left;
}
</style>`;
const triadData = [
{
title: "The Alkali Metals",
elements: [
{ symbol: "Li", name: "Lithium", mass: 6.9 },
{ symbol: "Na", name: "Sodium", mass: 23.0 },
{ symbol: "K", name: "Potassium", mass: 39.1 }
],
description: "All three are soft, highly reactive metals that form +1 ions and react violently with water."
},
{
title: "The Halogens",
elements: [
{ symbol: "Cl", name: "Chlorine", mass: 35.5 },
{ symbol: "Br", name: "Bromine", mass: 80.9 },
{ symbol: "I", name: "Iodine", mass: 127 }
],
description: "All three are corrosive, diatomic nonmetals that form -1 ions and are known for forming salts."
}
];
// --- 3. D3 WIDGET CONSTRUCTION ---
const mainContainer = d3.create("div");
mainContainer.append("div").attr("class", "widget-title").text("Döbereiner's Triads");
mainContainer.append("div").attr("class", "widget-subtitle").text("An early pattern recognized among the elements (c. 1829)");
const widgetContent = mainContainer.append("div")
.attr("class", "widget-container");
// Create a column for each triad
const triadColumns = widgetContent.selectAll(".triad-column")
.data(triadData)
.join("div")
.attr("class", "triad-column");
// Add titles
triadColumns.append("div")
.attr("class", "triad-title")
.text(d => d.title);
// Add element cards
triadColumns.selectAll(".element-card")
.data(d => d.elements.map((el, i) => ({...el, isMiddle: i === 1})))
.join("div")
.attr("class", d => d.isMiddle ? "element-card middle-card" : "element-card")
.html(d => `
<div class="symbol">${d.symbol}</div>
<div class="name">${d.name}</div>
<div class="mass">Mass: ${d.mass}</div>
`);
triadColumns.append("div")
.attr("class", "calculation-box")
.html(d => {
// BUG FIX: Correctly access the mass of the first [0] and last [2] elements.
const topMass = d.elements[0].mass;
const bottomMass = d.elements[2].mass;
const middleElement = d.elements[1]; // Get the middle element for the title
const average = (topMass + bottomMass) / 2;
// Round-half-to-even (banker's rounding) to 1 decimal place
const factor = 10;
const shifted = average * factor;
const floored = Math.floor(shifted);
const diff = shifted - floored;
let rounded;
if (Math.abs(diff - 0.5) < 1e-9) {
rounded = (floored % 2 === 0 ? floored : floored + 1) / factor;
} else {
rounded = Math.round(shifted) / factor;
}
const avgStr = rounded.toFixed(1);
return `
<div class="calc-title">Average vs. ${middleElement.name} (${middleElement.symbol})</div>
<div class="calc-equation">(${topMass} + ${bottomMass}) / 2 = <strong>${avgStr}</strong></div>
`;
});
// Add description text
triadColumns.append("p")
.attr("class", "description")
.text(d => d.description);
// --- 4. ASSEMBLE THE WIDGET ---
container.append(style);
container.append(mainContainer.node());
return container;
}The Periodic Table: A Map of the Elements
Introduction: Organizing a World of Atoms
By the mid-19th century, the world of chemistry was getting crowded. Chemists had identified over 60 different elements, each with its own set of properties. This created a problem: how could anyone organize it all? Was there an underlying logic, or was chemistry just a collection of disconnected facts?
Several scientists searched for a pattern in the chaos. In 1829, the German chemist Johann Döbereiner found that he could group certain elements into “triads.” In these small groups, the middle element often had properties that were an average of the other two.
Examples of Triads
Atomic masses used below were those known in the time of Döbereiner (early 1800s).
Rule 1: The Family Resemblance Rule (Chemical Properties)
First, the three elements in a triad had to behave in very similar ways. They had to look and act like they were related.
- For example, Lithium (Li), Sodium (Na), and Potassium (K) were all soft, silvery metals that were dangerously reactive with water. They clearly belonged to the same chemical family.
- Similarly, Chlorine (Cl), Bromine (Br), and Iodine (I) were all corrosive nonmetals that formed salts. They were also clearly related.
This part of the rule was qualitative as it was based on observing their chemical behavior.
Rule 2: The Math Rule (Atomic Mass)
This was Döbereiner’s insight. He discovered that if you arranged the three related elements by their atomic mass, the mass of the middle element was almost exactly the average of the first and third elements.
Example 1: The Alkali Metal Triad
- Take the mass of the lightest element, Lithium (6.9).
- Take the mass of the heaviest element, Potassium (39.1).
- Calculate their average: (6.9 + 39.1) / 2 = 23.0
That calculated average, 23.0, is the atomic mass of the middle element, Sodium.
Example 2: The Halogen Triad
- Take the mass of the lightest element, Chlorine (35.5).
- Take the mass of the heaviest element, Iodine (127).
- Calculate their average: (35.5 + 127) / 2 = 81.2
That calculated average, 81.2, is remarkably close to the actual atomic mass of the middle element, Bromine (79.9).
Why Was This So Important?
For the first time, Döbereiner showed that the properties of the elements were not random. There was a seemingly mathematical relationship that connected an element’s chemical behavior to its physical mass.
While his triad system didn’t work for all the known elements, it was the first hint of a deeper order, and it inspired other chemists to look for a more complete system.
Later, in 1865, the English chemist John Newlands arranged the elements by their atomic mass. He noticed that their properties seemed to repeat every eighth element, a pattern he called the “Law of Octaves.”
These were important first steps, but they were mostly viewed as interesting quirks. Neither system worked for all the known elements. The scientific community needed a more complete framework.
Mendeleev’s Periodic Law
The breakthrough came in 1869 from Dmitri Mendeleev. Like others before him, he began by writing each element on a card and arranging them in order of increasing atomic mass. What set him apart was prioritizing an element’s chemical properties above its strict place in the mass-based lineup.
Russian chemist Dmitri Mendeleev (1834–1907) (Source: Wikipedia)
As he laid out his cards, he insisted that elements with similar chemical behaviors (like lithium, sodium, and potassium, which all react explosively with water) had to line up in the same vertical column. If the next element by mass did not fit the properties of a column, he did something revolutionary. He left a blank space and moved the element to the next column where its properties did fit.
Mendeleev’s 1871 Periodic Table (Source: Wikipedia)
This approach led to two brilliant and testable predictions:
The Gaps Were Undiscovered Elements. Mendeleev argued that the blank spaces in his table were not mistakes. Instead, they represented elements that simply had not been discovered yet. Based on the location of each gap, he was able to predict the properties of these missing elements with remarkable accuracy. For example, he predicted an element he called “eka-aluminum.” A few years later, the French chemist Paul-Émile Lecoq de Boisbaudran discovered gallium, an element whose properties matched Mendeleev’s predictions almost perfectly.
Some Atomic Masses Were Wrong. In a few instances, Mendeleev had to swap the order of elements to keep them in their correct chemical families. For example, tellurium (Te) has a greater atomic mass than iodine (I). Yet he placed tellurium before iodine because iodine’s properties were a clear match for bromine and chlorine. He concluded that the accepted atomic mass for tellurium had to be wrong.
NoteThe Modern Fix: Atomic Number
Mendeleev was right to trust chemical properties over the reported atomic masses, but he was mistaken about the reason for the tellurium-iodine problem. The atomic mass measurements were actually correct.
The real issue was that atomic mass is not the fundamental property that defines an element. Decades later, experiments by Henry Moseley revealed the true defining trait is an element’s atomic number, which is the number of protons in its nucleus. Since iodine has 53 protons and tellurium has 52, iodine rightfully comes after tellurium. The modern periodic table is organized by increasing atomic number, a change that resolves all the ordering exceptions Mendeleev encountered.
Mendeleev’s willingness to trust the pattern and leave gaps for future discoveries turned the periodic table from a simple organizational chart into a predictive tool.
The Periodic Law: Why It’s ‘Periodic’
Mendeleev’s arrangement reflected a fundamental law of nature, which gives the table its name. The word periodic means “occurring at regular intervals.” Think of a calendar: the days of the week repeat in a regular cycle of seven. After seven days, the properties of “Monday” return.
Mendeleev discovered the same was true for the elements. When arranged in order of increasing atomic mass, their chemical properties repeated in a predictable, periodic pattern. This observation is known as the Periodic Law.
Today, we state the modern Periodic Law based on atomic number, not mass:
When the elements are arranged in order of increasing atomic number, there is a periodic repetition of their chemical and physical properties.
Because these properties repeat periodically, the chart is called the Periodic Table. Each new row, or period, represents the start of a new cycle. As you move across a period, the properties of the elements change steadily. At the end of a period, the next element begins a new row, and its properties are remarkably similar to the element directly above it, starting the cycle over again.
With this periodic structure in mind, let’s examine the modern version of this chart and learn how to read it.
The Modern Periodic Table
The periodic table is chemistry’s most important organizational tool. It arranges all known elements in a way that reveals fundamental patterns in their properties and behavior. You will be referring to this resource often so it is permanently linked in the navigation bar of this website (see Periodic Table)
Elements are organized into columns/groups and rows/periods.
NoteA Guide to Group Numbering
You will encounter two different systems for labeling the groups on the periodic table. While the modern system is simpler, the historical system used Roman numerals and letters in an attempt to capture chemical similarities.
The Modern IUPAC System (1–18): This is the current, internationally accepted standard. It simply numbers the columns from 1 to 18, from the alkali metals (Group 1) to the noble gases (Group 18). It is clear and unambiguous.
The Historical A/B System: This older system, common in North American resources, tried to link an element’s group number to its number of valence electrons—the outermost electrons involved in chemical bonding.
“A” Groups (Representative Elements): The elements in the tall columns on the left and right (Groups 1–2 and 13–18) were labeled IA through VIIIA. The Roman numeral was intended to directly correspond to the number of valence electrons for that group. For example, elements in Group IIA (like Magnesium) have 2 valence electrons, and elements in Group VIIA (like Chlorine) have 7 valence electrons. This created a powerful and predictive pattern.
“B” Groups (Transition Metals): The elements in the lower, central block (Groups 3–12) were labeled with a “B”. Chemists knew these elements were different; their electron structures were more complex, and they didn’t follow the simple valence electron rule of the “A” groups. The “B” designation effectively separated these less predictable metals from the “representative” A groups.
Why the Change? The A/B system, while useful, became confusing. Different regions of the world applied the A and B labels to different columns. To eliminate this ambiguity, the International Union of Pure and Applied Chemistry (IUPAC) recommended the simple 1–18 numbering system that is the global standard today.
This text will use the modern 1–18 IUPAC numbering for clarity, but understanding the logic behind the A/B system can give you a deeper appreciation for the patterns in the table.
Key Groups and Regions
The periodic table is not just a list of elements; it’s a map of chemical behavior. Elements in the same vertical group share similar properties. While we won’t cover every group in detail, several are so important they have special names.
Main Group Elements
These are the elements in Groups 1–2 and 13–18, where the patterns of reactivity are most straightforward.
- Group 1: Alkali Metals (excluding hydrogen) These are soft, shiny, extremely reactive metals. They react vigorously with water and are never found pure in nature. Their defining chemical trait is that they readily lose one electron to form a +1 ion (like Na+ or K+).
Why exclude hydrogen? Although hydrogen sits in Group 1 and has one valence electron like the alkali metals, it is a nonmetal gas with vastly different properties. Unlike the soft, reactive metals below it, hydrogen forms H2 molecules and can either lose an electron (like a metal) or gain one (like a halogen). Its unique chemistry earns it a position all its own.
Group 2: Alkaline Earth Metals Like their neighbors, these are reactive metals, but slightly less so than the alkali metals. They are common in minerals and the earth’s crust. They consistently lose two electrons to form a +2 ion (like Mg2+ or Ca2+).
Group 15: Pnictogens The name comes from the Greek pnigein, meaning “to choke” or “to suffocate,” a reference to nitrogen’s role as an asphyxiant. This is a diverse group containing nonmetals like nitrogen, metalloids like arsenic, and metals like bismuth. The nonmetals at the top, particularly nitrogen and phosphorus, tend to gain three electrons to form a −3 ion (like N3−).
Group 16: Chalcogens This group, whose name means “ore-forming,” includes oxygen and sulfur. These nonmetals are highly reactive and are essential components of many minerals. They characteristically gain two electrons to form a −2 ion (like O2− or S2−).
Group 17: Halogens Meaning “salt-formers,” these are highly reactive nonmetals. In their pure form, they exist as diatomic molecules (F2, Cl2, Br2). They are known for gaining one electron to form a −1 ion, or halide (like F− or Cl−), and they readily combine with metals to form salts.
Group 18: Noble Gases These are the most stable and unreactive elements on the table. They are all gases at room temperature and rarely form chemical bonds. Their defining trait is their chemical inertness. Originally called “inert gases,” the name was changed after chemists discovered that the heavier members (xenon and krypton) can form compounds under extreme conditions.
Transition and Inner Transition Metals
Transition Metals (Groups 3–12) This is the large central block of the table. These are the elements most people think of as typical metals: hard, shiny, with high melting points and good conductivity. Their most important chemical feature is their ability to form ions with variable positive charges. For example, iron can form both Fe2+ and Fe3+ ions. Many transition metal compounds are known for their vibrant colors.
Inner Transition Metals (Lanthanides and Actinides) These are the two rows placed at the very bottom of the table. They are separated out only to keep the periodic table from being impractically wide. They technically fit inside the main table after Group 3.
- The Lanthanides (the top row) are often called the rare earth elements.
- The Actinides (the bottom row) are distinguished by being universally radioactive. This series includes well-known elements like uranium (U) and plutonium (Pu).
NoteThe Newest Elements: Pushing the Periodic Table’s Boundaries
The seventh period of the periodic table was only completed in 2016, when IUPAC officially named the final four elements: nihonium (Nh, 113), moscovium (Mc, 115), tennessine (Ts, 117), and oganesson (Og, 118). These “superheavy” elements do not exist in nature and can only be created in particle accelerators.
The process involves smashing lighter atomic nuclei together at tremendous speeds. When the nuclei fuse, they form a new, heavier element for a brief moment before it decays. Scientists at laboratories in Russia, Japan, Germany, and the United States have spent decades perfecting these techniques, sometimes producing only a handful of atoms of a new element over years of experiments.
These elements exist for fractions of a second before breaking apart through radioactive decay. Oganesson, for example, has a half-life of less than a millisecond. Despite their fleeting existence, synthesizing these elements tests our understanding of nuclear physics and explores whether a predicted “island of stability” exists, where superheavy elements might be surprisingly long-lived.
Broad Classifications
The entire table can also be divided into three broad regions based on general properties:
- Metals: Found on the left side and in the center. They are typically shiny, malleable, and good conductors of heat and electricity.
- Nonmetals: Found on the upper right side. They are generally poor conductors and can be solids, liquids, or gases at room temperature.
- Metalloids: Located along the “stair-step” line that divides the metals and nonmetals. They have properties intermediate between metals and nonmetals.
What are the metalloids? There is debate regarding what elements are metalloids as there is no standard definition. The most recognized ones are B, Si, Ge, As, Sb, and Te.
Understanding the Numbers
The number in each element’s box on the periodic table is its standard atomic weight, a dimensionless number (it is a ratio relative to 1/12 of carbon-12, though it is often expressed in atomic mass units, amu or Da). This value often causes confusion because it’s not a whole number.
The reason is simple: the atomic weight is a weighted average of the masses of all an element’s naturally occurring isotopes. Because most elements exist as a mixture of isotopes with different masses, the average is almost always a decimal value.
The Secret to the Structure
The structure of the periodic table is no accident. Its periods and groups are a direct reflection of how electrons are arranged within the atom. This arrangement, known as an element’s electron configuration, is the key to understanding chemical bonding, reactivity, and why elements in the same group behave so similarly.
For now, simply notice that the patterns are real: all alkali metals are highly reactive, all noble gases are inert, all halogens form similar compounds. These are not coincidences. There is a deeper reason rooted in atomic structure that explains every trend in the periodic table. We will explore this fundamental concept in the chapters to come.