Add legend

src/SidePanel.svelte

@@ -1,9 +1,21 @@
 <script>
+  import Legend from './components/Legend.svelte';
+
   import { selectedJournal } from './stores/selections';
 </script>
 
 <div class="side-panel">
-  Side Panel
+  <h1>Title</h1>
+
+  <p>
+    Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
+    sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
+    aliquyam erat, sed diam voluptua. At vero eos et accusam et
+    justo duo dolores et ea rebum. Stet clita kasd gubergren,
+    no sea takimata sanctus est Lorem ipsum dolor sit amet.
+  </p>
+
+  <Legend />
 
   <select bind:value={$selectedJournal}>
     <option value="nature">Nature</option>
@@ -14,5 +26,8 @@
 <style>
   .side-panel {
     position: absolute;
+    top: var(--spacing);
+    left: var(--spacing);
+    width: 250px;
   }
 </style>

src/components/Legend.svelte

@@ -0,0 +1,41 @@
+<script>
+  import Svg from './Svg.svelte';
+  import Defs from './Defs.svelte';
+  import Star from './Star.svelte';
+
+  import { radiusScale } from '../stores/scales';
+
+  const size = 40;
+
+  let legendItems = [];
+  
+  $: legendItems = [1, 10, 100, 1000]
+    .map((citedBy) => ({
+      citedBy,
+      radius: $radiusScale ? $radiusScale(citedBy) : 0,
+    }));
+</script>
+
+<div class="legend">
+  {#each legendItems as { citedBy }}
+    <div class="label">{citedBy}</div>
+  {/each}
+  {#each legendItems as { radius, citedBy }}
+    <div class="marker">
+      <Svg {size}>
+        <Defs />
+        <Star r={radius} />
+      </Svg>
+    </div>
+  {/each}
+</div>
+
+<style>
+  .legend {
+    display: grid;
+    grid-template-rows: repeat(2, 1fr);
+    grid-template-columns: repeat(4, 1fr);
+    justify-items: center;
+    align-items: center;
+  }
+</style>

src/components/Star.svelte

@@ -15,11 +15,11 @@
   export let x = 0;
   export let y = 0;
   export let r = 0;
-  export let data;
+  export let data = null;
 
   let bright = true;
 
-  $: bright = data.citedBy < $maxCitations;
+  $: if (data) bright = data.citedBy < $maxCitations;
 
   const tweenedR = tweened(0, {
     delay: 2 * Math.random() * $longDuration,
@@ -37,7 +37,7 @@
   $: color.set(bright ? starColor : darkStarColor);
 
   function selectStar() {
-    if (bright) selectedStar.set(data);
+    if (data && bright) selectedStar.set(data);
   }
 </script>
 

src/components/Svg.svelte

@@ -1,12 +1,14 @@
 <script>
-  import { size } from '../stores/dimensions';
+  import { size as storedSize } from '../stores/dimensions';
+
+  export let size = $storedSize;
 </script>
 
 <svg
   class="svg"
-  width={$size}
-  height={$size}
-  viewBox="{-$size/2} {-$size/2} {$size} {$size}"
+  width={size}
+  height={size}
+  viewBox="{-size/2} {-size/2} {size} {size}"
 >
   <slot />
 </svg>