add color scale ramp slots to ColorScaleSelect to provide visual prev…

…iew of color scale fix color scale on element detail pages scatter plot fix ElementPhoto not working when imported from NPM package
janosh · Feb 13, 2023 · ebcb0a3 · ebcb0a3
1 parent 84060cd
commit ebcb0a3
Show file tree

Hide file tree

Showing 10 changed files with 93 additions and 30 deletions.
diff --git a/package.json b/package.json
@@ -28,7 +28,8 @@
     "d3-interpolate-path": "^2.3.0",
     "d3-scale": "^4.0.2",
     "d3-shape": "^3.2.0",
-    "d3-scale-chromatic": "^3.0.0"
+    "d3-scale-chromatic": "^3.0.0",
+    "svelte-multiselect": "^8.3.0"
   },
   "devDependencies": {
     "@playwright/test": "^1.30.0",
@@ -58,7 +59,6 @@
     "remark-math": "3.0.0",
     "svelte": "^3.55.1",
     "svelte-check": "^3.0.3",
-    "svelte-multiselect": "^8.3.0",
     "svelte-preprocess": "^5.0.1",
     "svelte-toc": "^0.5.2",
     "svelte-zoo": "^0.2.4",

diff --git a/src/app.css b/src/app.css
@@ -21,9 +21,8 @@
   --zoo-github-corner-color: var(--page-bg);
   --zoo-github-corner-bg: white;
 
-  --sms-margin: auto;
-  --sms-options-bg: black;
-  --sms-max-width: 22em;
+  --sms-options-bg: rgb(20, 18, 36);
+  --sms-max-width: 19em;
   --sms-border: 1px dotted teal;
   --sms-focus-border: 1px dotted cornflowerblue;
   --sms-active-color: cornflowerblue;

diff --git a/src/app.html b/src/app.html
@@ -15,6 +15,12 @@
     />
     <meta property="og:image:alt" content="Interactive Periodic Table" />
 
+    <script
+      defer
+      data-domain="sveriodic-table.janosh.dev"
+      src="https://plausible.io/js/plausible.js"
+    ></script>
+
     <link rel="icon" href="favicon.svg" />
     <link rel="stylesheet" href="prism-vsc-dark-plus.css" />
     <!-- math display -->

diff --git a/src/lib/ColorScaleSelect.svelte b/src/lib/ColorScaleSelect.svelte
@@ -3,17 +3,44 @@
   import Select from 'svelte-multiselect'
 
   export let value: string | null = null
-  export let selected: string[] = []
+  export let selected: string[] = [`Viridis`]
+  export let minSelect: number = 0
 
   const options = Object.keys(d3sc)
     .filter((key) => key.startsWith(`interpolate`))
     .map((key) => key.replace(`interpolate`, ``))
+
+  const ramp_color_scale = (name: string) =>
+    [...Array(10).keys()].map((idx) => d3sc[`interpolate${name}`](idx / 10))
 </script>
 
 <Select
   {options}
   maxSelect={1}
+  {minSelect}
   bind:value
   bind:selected
   placeholder="Select a color scale"
-/>
+>
+  <div slot="option" let:option>
+    {option}
+    <span style:background="linear-gradient(to right, {ramp_color_scale(option)})" />
+  </div>
+  <div slot="selected" let:option>
+    {option}
+    <span style:background="linear-gradient(to right, {ramp_color_scale(option)})" />
+  </div>
+</Select>
+
+<style>
+  div {
+    display: flex;
+    justify-content: space-between;
+    gap: 5pt;
+  }
+  span {
+    border-radius: 2pt;
+    min-height: 1em;
+    min-width: 8em;
+  }
+</style>
diff --git a/src/lib/ElementPhoto.svelte b/src/lib/ElementPhoto.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { homepage } from '$root/package.json'
   import { Icon, type ChemicalElement } from '.'
 
   export let element: ChemicalElement
@@ -8,13 +9,19 @@
 
   $: ({ name, number } = element ?? {})
 
-  $: src = `/elements/${number}-${name?.toLowerCase()}.jpg`
+  $: file = `elements/${number}-${name?.toLowerCase()}.jpg`
   let hidden = false
-  $: src, (hidden = false) // reset hidden to false when src changes
+  $: file, (hidden = false) // reset hidden to false when src changes
 </script>
 
 {#if name && number}
-  <img {src} alt={name} on:error={() => (hidden = true)} {style} {hidden} />
+  <img
+    src="{homepage}/{file}"
+    alt={name}
+    on:error={() => (hidden = true)}
+    {style}
+    {hidden}
+  />
   {#if hidden && missing_msg}
     <div {style}>
       <span>

diff --git a/src/lib/PropertySelect.svelte b/src/lib/PropertySelect.svelte
@@ -8,8 +8,16 @@
   const options = Object.keys(heatmap_labels)
   export let empty: boolean = false
   export let selected: string[] = empty ? [] : [options[0]]
+  export let minSelect: number = 0
 
   $: $heatmap_key = heatmap_labels[value ?? ``] ?? null
 </script>
 
-<Select {options} {selected} maxSelect={1} bind:value placeholder="Select a heat map" />
+<Select
+  {options}
+  {selected}
+  maxSelect={1}
+  {minSelect}
+  bind:value
+  placeholder="Select a heat map"
+/>
diff --git a/src/lib/ScatterPlot.svelte b/src/lib/ScatterPlot.svelte
@@ -22,6 +22,7 @@
   export let y_unit = ``
   export let tooltip_point: Coords
   export let hovered = false
+  export let markers: 'line' | 'points' | 'line+points' = `line+points`
 
   const dispatcher = createEventDispatcher()
   const axis_label_offset = { x: 15, y: 20 } // pixels
@@ -74,10 +75,15 @@
       on:mouseleave={() => (hovered = false)}
       on:mouseleave
     >
-      <Line points={scaled_data} origin={[x_scale(x_range[0]), y_scale(y_range[0])]} />
-      {#each scaled_data as [x, y, fill]}
-        <ScatterPoint {x} {y} {fill} />
-      {/each}
+      {#if markers.includes(`line`)}
+        <Line points={scaled_data} origin={[x_scale(x_range[0]), y_scale(y_range[0])]} />
+      {/if}
+
+      {#if markers.includes(`points`)}
+        {#each scaled_data as [x, y, fill]}
+          <ScatterPoint {x} {y} {fill} />
+        {/each}
+      {/if}
 
       <!-- x axis -->
       <g class="x-axis">

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -29,10 +29,12 @@
 
 <h1>Periodic Table of Elements</h1>
 
-<PropertySelect empty />
-{#if $heatmap_key}
-  <ColorScaleSelect bind:value={color_scale} selected={[`Viridis`]} />
-{/if}
+<label for="heatmap-select">
+  <PropertySelect empty id="heatmap-select" />
+  {#if $heatmap_key}
+    <ColorScaleSelect bind:value={color_scale} minSelect={1} />
+  {/if}
+</label>
 
 {#if $last_element && window_width > 1100}
   {@const { shells, name, symbol } = $last_element}
@@ -84,7 +86,12 @@
   }
   a[href='bohr-atoms'] {
     position: absolute;
-    top: 8%;
-    right: 10%;
+    top: 2%;
+    left: 2%;
+  }
+  label {
+    display: flex;
+    place-content: center;
+    gap: 1em;
   }
 </style>
diff --git a/src/routes/[slug]/+page.svelte b/src/routes/[slug]/+page.svelte
@@ -2,6 +2,7 @@
   import type { ChemicalElement } from '$lib'
   import {
     BohrAtom,
+    ColorScaleSelect,
     ElementHeading,
     ElementPhoto,
     ElementScatter,
@@ -13,8 +14,6 @@
   import { pretty_num, property_labels } from '$lib/labels'
   import { active_element, heatmap_key } from '$lib/stores'
   import { PrevNextElement } from '$site'
-  import { extent } from 'd3-array'
-  import { scaleLinear } from 'd3-scale'
   import type { PageData } from './$types'
 
   export let data: PageData
@@ -64,11 +63,8 @@
   }
 
   $: scatter_plot_values = element_data.map((el) => el[$heatmap_key])
-  $: color_scale = scaleLinear()
-    .domain(extent(scatter_plot_values))
-    .range([`blue`, `red`])
-
   $: [y_label, y_unit] = property_labels[$heatmap_key] ?? []
+  let color_scale: string
 </script>
 
 <svelte:window bind:innerWidth={window_width} />
@@ -93,8 +89,10 @@
     </p>
   {/if}
 
-  <PropertySelect />
-
+  <label>
+    <PropertySelect minSelect={1} />
+    <ColorScaleSelect bind:value={color_scale} minSelect={1} />
+  </label>
   <section class="viz">
     <ElementPhoto
       element={$active_element}
@@ -247,4 +245,9 @@
   table tr:hover {
     background-color: rgba(150, 150, 255, 0.2);
   }
+  label {
+    display: flex;
+    place-content: center;
+    gap: 1em;
+  }
 </style>
diff --git a/src/site/Footer.svelte b/src/site/Footer.svelte
@@ -26,7 +26,7 @@
   </p>
   <p>
     <small>
-      Pro tip: Use arrow keys &thinsp;&larr; &rarr;&thinsp; to navigate between elements.
+      Use arrow keys &thinsp;&larr; &rarr;&thinsp; to navigate between elements.
     </small>
   </p>
 </footer>