add ScatterPlot axis labels

readme.md

@@ -3,7 +3,7 @@
 [![Tests](https://github.com/janosh/periodic-table/actions/workflows/test.yml/badge.svg)](https://github.com/janosh/periodic-table/actions/workflows/test.yml)
 [![Netlify Status](https://api.netlify.com/api/v1/badges/42b5fd04-c538-4e3c-bd69-73e383989cfd/deploy-status)](https://app.netlify.com/sites/ptable-elements/deploys)
 [![pre-commit.ci status](https://results.pre-commit.ci/badge/github/janosh/periodic-table/main.svg?badge_token=nUqJfPCFS4uyMwcFSDIfdQ)](https://results.pre-commit.ci/latest/github/janosh/periodic-table/main?badge_token=nUqJfPCFS4uyMwcFSDIfdQ)
-[![Open in StackBlitz](https://img.shields.io/badge/Open%20in-StackBlitz-darkblue?logo=pytorchlightning)](https://stackblitz.com/github/janosh/periodic-table)
+[![Open in StackBlitz](https://img.shields.io/badge/Open%20in-StackBlitz-darkblue?logo=stackblitz)](https://stackblitz.com/github/janosh/periodic-table)
 
 Interactive Periodic Table component written in Svelte.
 

src/app.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="@sveltejs/kit" />
 
-declare module '*periodic-table-data.ts' {
+declare module '*element-data.ts' {
   const elements: import('./lib/types').ChemicalElement[]
   export default elements
 }

src/lib/BohrAtom.svelte

@@ -7,7 +7,7 @@
   export let shell_width = 15 // TODO SVG is fixed so increasing this will make large atoms overflow
   export let size = adapt_size ? (shells.length + 1) * 2 * shell_width + 30 : 270
   export let base_fill = `white`
-  export let electron_speed = 2 // time for one electron orbit is 10/electron_speed seconds, 0 for no motion
+  export let electron_speed = 1 // time for one electron orbit is 10/electron_speed seconds, 0 for no motion
   // set properties like size, fill, stroke, stroke-width, for nucleus and electrons here
   export let nucleus_props: Record<string, string | number> = {}
   export let shell_props: Record<string, string | number> = {}

src/lib/PeriodicTable.svelte

@@ -23,6 +23,7 @@
       <ScatterPlot
         ylim={[0, null]}
         on_hover_point={(point) => ($active_element = point[2])}
+        x_label_y={42}
       />
     {:else if show_active_elem_stats}
       <ElementStats />

src/lib/ScatterPlot.svelte

@@ -13,9 +13,11 @@
   export let ylim: [number | null, number | null] = [null, null]
   export let pad_top = 5
   export let pad_bottom = 30
-  export let pad_left = 30
+  export let pad_left = 50
   export let pad_right = 20
-  export let on_hover_point: (point: PlotPoint) => void | null = null
+  export let on_hover_point: ((point: PlotPoint) => void) | null = null
+  export let x_label = `Atomic Number`
+  export let x_label_y = 0
 
   let data_points: PlotPoint[]
   $: data_points = elements.map((el) => [el.number, el[$heatmap], el])
@@ -90,6 +92,9 @@
             <text y={-pad_bottom + axis_label_offset.x}>{tick}</text>
           </g>
         {/each}
+        <text x={width / 2} y={height + 5 - x_label_y} class="label x">
+          {x_label}
+        </text>
       </g>
 
       <!-- y axis -->
@@ -105,6 +110,9 @@
             </text>
           </g>
         {/each}
+        <text x={-height / 2} y={13} transform="rotate(-90)" class="label y">
+          {heatmap_label}
+        </text>
       </g>
 
       {#if tooltip_point}
@@ -140,7 +148,7 @@
     z-index: 1;
   }
   g.tick {
-    font-size: 9pt;
+    font-size: clamp(10pt, 1vw, 15pt);
   }
   line {
     stroke: gray;
@@ -165,4 +173,8 @@
     width: max-content;
     box-sizing: border-box;
   }
+  text.label {
+    text-anchor: middle;
+    font-size: clamp(11pt, 1.2vw, 16pt);
+  }
 </style>