add individual element detail pages (closes #1)

src/labels.ts

@@ -1,12 +1,41 @@
 import { Element } from './types'
 
-export const heatmap_labels: Record<string, keyof Element> = {
-  'Atomic Mass (u)': `atomic_mass`,
-  'Atomic Radius (Å)': `atomic_radius`,
-  'Covalent Radius (Å)': `covalent_radius`,
-  Electronegativity: `electronegativity`,
-  'Density (solid: g/cm³, gas: g/liter)': `density`,
-  'Boiling Point (K)': `boiling_point`,
-  'Melting Point (K)': `melting_point`,
-  'First Ionization Energy (eV)': `first_ionization`,
+// TODO add labels and units for all elemental properties
+export const element_property_labels: Partial<
+  Record<keyof Element, [string, string | null]>
+> = {
+  number: [`Atomic Number`, null],
+  atomic_mass: [`Atomic Mass`, `u`],
+  melting_point: [`Melting Point`, `K`],
+  boiling_point: [`Boiling Point`, `K`],
+  density: [`Density`, `solid: g/cm³, gas: g/liter`],
+  atomic_radius: [`Atomic Radius`, `Å`],
+  covalent_radius: [`Covalent Radius`, `Å`],
+  electronegativity: [`Electronegativity`, null],
+  first_ionization: [`First Ionization Energy`, `eV`],
+  electron_affinity: [`Electron Affinity`, null],
+  n_shells: [`Number of Shells`, null],
+  n_valence: [`Electron Valency`, null],
+  shells: [`Electron Shell Occupations`, null],
+  specific_heat: [`Specific Heat`, `J/g`], // TODO check correct unit
 }
+
+const heatmap_keys: (keyof Element)[] = [
+  `atomic_mass`,
+  `atomic_radius`,
+  `covalent_radius`,
+  `electronegativity`,
+  `density`,
+  `boiling_point`,
+  `melting_point`,
+  `first_ionization`,
+]
+
+export const heatmap_labels: Partial<Record<string, keyof Element>> =
+  Object.fromEntries(
+    heatmap_keys.map((key) => {
+      const [label, unit] = element_property_labels[key] ?? []
+      if (!label) throw `Unexpected missing label ${label}`
+      return [label + (unit ? ` (${unit})` : ``), key]
+    })
+  )

src/lib/ChemicalElement.svelte

@@ -11,7 +11,7 @@
 
   $: category = element.category.replaceAll(` `, `-`)
 
-  $: color = $heatmap ? (value ? $color_scale?.(value) : `transparent`) : undefined
+  $: bg_color = value ? $color_scale(value) : `transparent`
 </script>
 
 <a
@@ -21,7 +21,8 @@
     $active_element?.name === element.name}
   {style}
   on:mouseenter
-  style:background-color={color}
+  on:mouseleave
+  style:background-color={$heatmap ? bg_color : null}
 >
   {#if show_number}
     <span class="atomic-number">

src/lib/ElementPhoto.svelte

@@ -1,21 +1,22 @@
 <script lang="ts">
-  import { active_element as element } from '../stores'
+  import { active_element } from '../stores'
+  import { Element } from '../types'
 
-  export let show_photo = true
+  export let style = ``
+  // element defaults to active_element store but can be pinned by passing it as prop
+  export let element: Element | null = $active_element
 
-  $: src = `https://images-of-elements.com/s/${$element?.name?.toLowerCase()}.jpg`
+  $: src = `https://images-of-elements.com/s/${element?.name?.toLowerCase()}.jpg`
 </script>
 
-{#if show_photo && $element}
+{#if element}
   {#key src}
-    <img {src} alt={$element?.name} onerror="this.style.display='none'" />
+    <img {src} alt={element?.name} onerror="this.style.display='none'" {style} />
   {/key}
 {/if}
 
 <style>
   img {
-    grid-column: 1 / span 2;
-    grid-row: 9 / span 2;
     width: 100%;
     height: 100%;
     object-fit: cover;

src/lib/ElementStats.svelte

@@ -1,48 +1,48 @@
 <script lang="ts">
-  import { active_element as element } from '../stores'
+  import { last_element } from '../stores'
 
   export let padding = `1vw 3vw`
   export let precision = 2
+  $: element = $last_element
 </script>
 
-{#if $element}
-  <h2 style:padding>
-    {$element?.number} - {$element?.name} <small>{$element?.category}</small>
-  </h2>
-  <div style:padding>
-    <section>
-      <p>
-        Atomic Mass
-        <abbr title="Dalton aka atomic mass unit">(u)</abbr>
-      </p>
-      <strong>{parseFloat($element?.atomic_mass?.toFixed(precision))}</strong>
-    </section>
-    <section>
-      <p>
-        Density
-        <abbr title="grams per cubic centimeter">(g/cm&sup3;)</abbr>
-      </p>
-      <strong>{parseFloat($element?.density?.toFixed(precision))}</strong>
-    </section>
-    <section>
-      <p>Phase</p>
-      <strong>{$element?.phase}</strong>
-    </section>
-    <section>
-      <p>Year of Discovery</p>
-      <strong>
-        {$element?.year}
-      </strong>
-    </section>
+{#if element}
+  <div style:padding style="overflow: hidden;">
+    <h2>
+      {element.number} - {element.name} <small>{element.category}</small>
+    </h2>
+    <div style="display: flex;">
+      <section>
+        <p>
+          Atomic Mass
+          <abbr title="Dalton aka atomic mass unit">(u)</abbr>
+        </p>
+        <strong>{parseFloat(element.atomic_mass?.toFixed(precision))}</strong>
+      </section>
+      <section>
+        <p>
+          Density
+          <abbr title="grams per cubic centimeter">(g/cm&sup3;)</abbr>
+        </p>
+        <strong>{parseFloat(element.density?.toFixed(precision))}</strong>
+      </section>
+      <section>
+        <p>Phase</p>
+        <strong>{element.phase}</strong>
+      </section>
+      <section>
+        <p>Year of Discovery</p>
+        <strong>
+          {element.year}
+        </strong>
+      </section>
+    </div>
   </div>
 {:else}
   <h3 style="text-align: center;">Try hovering an element!</h3>
 {/if}
 
 <style>
-  div {
-    display: flex;
-  }
   div > section {
     width: 25%;
   }
@@ -55,21 +55,21 @@
     font-size: clamp(6pt, 1.2vw, 15pt);
   }
   h2 {
-    margin: 0 0 2vw;
     font-size: clamp(9pt, 3vw, 25pt);
     white-space: nowrap;
   }
   h2 small {
     margin-left: 8pt;
     font-weight: 100;
+    opacity: 0.7;
   }
   abbr {
     font-size: 0.9vw;
     text-decoration: none;
   }
   h3 {
-    margin: 0 0 2vw;
-    font-size: clamp(9pt, 3vw, 25pt);
+    font-size: clamp(9pt, 3vw, 20pt);
     white-space: nowrap;
+    align-self: center;
   }
 </style>

src/lib/PeriodicTable.svelte

@@ -14,7 +14,7 @@
 <div class="periodic-table">
   <TableInset>
     {#if $heatmap}
-      <ScatterPlot />
+      <ScatterPlot on:hover={(e) => ($active_element = e.detail.element)} />
     {:else}
       <ElementStats />
     {/if}
@@ -24,6 +24,7 @@
     <ChemicalElement
       {element}
       on:mouseenter={() => ($active_element = element)}
+      on:mouseleave={() => ($active_element = null)}
       show_name={show_names}
       style="grid-column: {element.column}; grid-row: {element.row};"
       value={element[$heatmap]}

src/lib/ScatterPlot.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { extent } from 'd3-array'
   import { scaleLinear } from 'd3-scale'
+  import { createEventDispatcher } from 'svelte'
   import elements from '../periodic-table-data.ts'
   import { active_element, color_scale, heatmap } from '../stores'
   import { Element } from '../types'
@@ -9,6 +10,10 @@
 
   export let style = ``
 
+  const dispatch = createEventDispatcher<{ hover: { element: Element } }>()
+  type $$Events = { hover: CustomEvent<{ element: Element }> }
+
+  let data: [number, number, Element][]
   $: data = elements.map((el) => [el.number, el[$heatmap], el])
 
   const padding = 10 // pixels
@@ -26,7 +31,7 @@
     .domain(yrange)
     .range([height - padding, padding])
 
-  let scaled_data: [number, number, string, Element][]
+  let scaled_data: [number, number, Element][]
   $: scaled_data = data
     .filter(([x, y]) => !(isNaN(x) || isNaN(y) || x === null || y === null))
     .map(([x, y, ...rest]) => [x_scale(x), y_scale(y), ...rest])
@@ -37,14 +42,13 @@
     <svg>
       <Line data={scaled_data} />
       {#each scaled_data as [x, y, element]}
-        {@const fill = $color_scale(y)}
         {@const active = $active_element?.name === element.name}
         <Datapoint
           {x}
           {y}
-          {fill}
-          on:mouseenter={() => ($active_element = element)}
+          fill={$color_scale?.(y)}
           {active}
+          on:mouseenter={() => dispatch(`hover`, { element })}
         />
       {/each}
     </svg>

src/lib/ScatterPoint.svelte

@@ -7,7 +7,7 @@
   export let fill = `gray`
   export let active = false
 
-  const tX = tweened(0, { duration: 400, easing: cubicOut, local: true })
+  const tX = tweened(0, { duration: 400, easing: cubicOut })
   const tY = tweened(0, { duration: 400, easing: cubicOut })
 
   $: tX.set(x)

src/lib/TableInset.svelte

@@ -9,8 +9,7 @@
 
 <style>
   aside {
-    width: 100%;
-    height: 100%;
+    display: grid;
     box-sizing: border-box;
   }
 </style>

src/periodic-table-data.ts

@@ -4957,7 +4957,7 @@ export default [
     name: `Meitnerium`,
     appearance: null,
     atomic_mass: 278,
-    category: `probably transition metal`,
+    category: `transition metal`,
     density: 37.4,
     discoverer: `Gesellschaft für Schwerionenforschung`,
     molar_heat: null,
@@ -5002,7 +5002,7 @@ export default [
     name: `Darmstadtium`,
     appearance: null,
     atomic_mass: 281,
-    category: `probably transition metal`,
+    category: `transition metal`,
     density: 34.8,
     discoverer: `Gesellschaft für Schwerionenforschung`,
     molar_heat: null,
@@ -5047,7 +5047,7 @@ export default [
     name: `Roentgenium`,
     appearance: null,
     atomic_mass: 282,
-    category: `probably transition metal`,
+    category: `transition metal`,
     density: 28.7,
     discoverer: `Gesellschaft für Schwerionenforschung`,
     molar_heat: null,
@@ -5137,7 +5137,7 @@ export default [
     name: `Nihonium`,
     appearance: null,
     atomic_mass: 286,
-    category: `probably transition metal`,
+    category: `post transition metal`,
     density: 16,
     discoverer: `RIKEN`,
     molar_heat: null,
@@ -5227,7 +5227,7 @@ export default [
     name: `Moscovium`,
     appearance: null,
     atomic_mass: 289,
-    category: `probably post-transition metal`,
+    category: `post-transition metal`,
     density: 13.5,
     discoverer: `Joint Institute for Nuclear Research`,
     molar_heat: null,
@@ -5272,7 +5272,7 @@ export default [
     name: `Livermorium`,
     appearance: null,
     atomic_mass: 293,
-    category: `probably post-transition metal`,
+    category: `post-transition metal`,
     density: 12.9,
     discoverer: `Joint Institute for Nuclear Research`,
     molar_heat: null,
@@ -5317,7 +5317,7 @@ export default [
     name: `Tennessine`,
     appearance: null,
     atomic_mass: 294,
-    category: `probably metalloid`,
+    category: `metalloid`,
     density: 7.17,
     discoverer: `Joint Institute for Nuclear Research`,
     molar_heat: null,
@@ -5362,7 +5362,7 @@ export default [
     name: `Oganesson`,
     appearance: null,
     atomic_mass: 294,
-    category: `probably noble gas`,
+    category: `noble gas`,
     density: 4.95,
     discoverer: `Joint Institute for Nuclear Research`,
     molar_heat: null,