Initial-styling

src/ColorBar.vue

@@ -0,0 +1,216 @@
+
+<template>
+<div :id="id" class="colorbar-container">
+  <div 
+    :style="{'--background-color': backgroundColor}"
+    class="colorbar">
+  </div>
+  <div class="colorbar-labels"> 
+    <div><slot name="start">0%</slot></div>
+    <div>
+      <slot name="label">{{ label }}</slot>
+    </div>
+    <div><slot name="end">100%</slot></div>
+  </div>
+</div>
+</template>
+
+
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue';
+
+// type for a function that maps to either a  (color, opacity) pair or just a color
+type ColorFunction = (x: number) => string;
+
+export default defineComponent({
+  name: 'ColorBar',
+  props: {
+    
+    name: {
+      type: String,
+      default: null
+    },
+    
+    nsteps: {
+      type: Number,
+      default: 20
+    },
+    label: {
+      type: String,
+      default: 'Colorbar'
+    },
+    
+    cmap: {
+      type: Function as PropType<ColorFunction>,
+      default: (x: number) => `rgb(255,0,${x * 255})`
+    },
+    
+    backgroundColor: {
+      type: String,
+      default: '#5c5229'
+    },
+    
+    triangles: {
+      type: Boolean,
+      default: true
+    }
+    
+  },
+  
+  
+  mounted() {
+    this.colorbarGradient();
+  },
+  
+  computed: {
+    id() {
+      return this.name ? `colorbar-${this.name}` : `colorbar-${Math.random().toString(36).slice(2)}`;
+    }
+  },
+  
+  
+  
+  methods: {
+    
+    cssLinearGradientFromCmap() {
+      const n = this.nsteps;
+      const colors = Array.from({length: n+1}, (_, i) => {
+        const co = this.cmap(i/n);
+        const [color, _opacity] = Array.isArray(co) ? co : [co,1];
+        return `${color} ${i*100/n}%`;
+      });
+      return `linear-gradient(to top, ${colors.join(', ')})`;
+    },
+    
+    colorbarGradient() {
+      const colorbar = document.querySelector('#' + this.id + '> .colorbar');
+      if (!colorbar) {
+        return;
+      }
+      // remove all the children of the colorbar
+      while (colorbar.firstChild) {
+        colorbar.removeChild(colorbar.firstChild);
+      }
+      const div = document.createElement('div');
+      div.className = 'colorbar-chunk';
+      div.style.background = this.cssLinearGradientFromCmap();
+      div.style.height = '100%';
+      
+      
+      // add the start and end triangles
+      if (this.triangles) {
+        const start = document.createElement('div');
+        start.className = 'colorbar-start';
+        const end = document.createElement('div');
+        end.className = 'colorbar-end';
+        colorbar.appendChild(end);
+        colorbar.appendChild(div);
+        colorbar.appendChild(start);
+      
+        if (start) {
+          start.style.backgroundColor = this.cmap(0);
+          this.styleDownTriangle(start as HTMLDivElement);
+        }
+        if (end) {
+          end.style.backgroundColor = this.cmap(1);
+          this.styleUpTriangle(end as HTMLDivElement);
+        }
+      } else {
+        colorbar.appendChild(div);
+      }
+    },
+    
+    styleUpTriangle(div: HTMLDivElement) {
+      const width = div.offsetWidth;
+      let height = div.offsetHeight;
+      const color = div.style.backgroundColor;
+      height = Math.min(Math.max(height, 15), 0.86 * width);
+      div.style.backgroundColor = 'transparent';
+      div.style.borderLeft = `${width/2}px solid transparent`;
+      div.style.borderRight = `${width/2}px solid transparent`;
+      div.style.borderBottom = `${height}px solid ${color}`;
+    },
+    
+    styleDownTriangle(div: HTMLDivElement) {
+      const width = div.offsetWidth;
+      let height = div.offsetHeight;
+      const color = div.style.backgroundColor;
+      height = Math.min(Math.max(height, 15), 0.86 * width);
+      div.style.backgroundColor = 'transparent';
+      div.style.borderLeft = `${width/2}px solid transparent`;
+      div.style.borderRight = `${width/2}px solid transparent`;
+      div.style.borderTop = `${height}px solid ${color}`;
+    }
+  },
+  
+  watch: {
+    nsteps() {
+      this.colorbarGradient();
+    },
+    cmap() {
+      this.colorbarGradient();
+    }
+  }
+  
+});
+</script>
+
+<style scoped>
+.colorbar-container {
+  position: relative;
+  display: inline-block;
+  --width: 1.25em;
+  width: fit-content;
+  margin-left: 5px;
+  margin-right: 1em;
+  background: var(--background-color);
+  user-select: none;
+}
+
+.colorbar {
+  height: 100%;
+  width: var(--width);
+  margin-left: 5px;
+  margin-right: 1em;
+  background: var(--background-color);
+  display:flex;
+  flex-direction: column;
+  filter: drop-shadow(0 0 0.1rem white);
+}
+
+/* make .colorbar-start and .colorbar-end triangles */
+.colorbar-chunk {
+  
+  flex-shrink: 1;
+  flex-grow:1;
+}
+
+.colorbar-start {
+  flex-basis: min-content;
+  flex-shrink: 0;
+  flex-grow:1;
+}
+
+.colorbar-end {
+  flex-basis: min-content;
+  flex-shrink: 0;
+  flex-grow: 1;
+}
+
+
+
+.colorbar-labels {
+  position: absolute;
+  width: max-content;
+  height: 100%;
+  top: 50%;
+  /* right: -1.5ch; */
+  transform-origin: top center;
+  transform: rotate(180deg) translate(-150%,-50%);
+  writing-mode: vertical-rl;
+  
+  display: flex;
+  justify-content: space-between;
+  }
+</style>

src/TempoLite.vue

@@ -6,15 +6,28 @@
   <div
     id="main-content"
   >
-
+    
     <div class="content-with-sidebars">
-      <div>
+      <!-- tempo logo -->
+      <img 
+        src="./assets/TEMPO-Logo-Small.png"
+        alt="TEMPO Logo"
+        style="width: 100px; height: 100px;"
+      >
+      <h1 id="title">How much NO<sub>2</sub>&hellip;</h1>
+      <div id="where" class="big-label">where</div>
+      <div id="map-container">
         <div id="map"></div>
-        <div>
-          <img src="./assets/colorbar.png" width="487" height="102">
-        </div>
+        <colorbar 
+          label="Amount of NO2"
+          backgroundColor="transparent"
+          :nsteps="10"
+          :cmap="cividis"/>
+      </div>
+        <div id="when" class="big-label">when</div>
         <div id="slider-row">
         <icon-button
+          v-if="false"
           :fa-icon="playing ? 'pause' : 'play'"
           @activate="playOrPause"
         ></icon-button>
@@ -25,6 +38,8 @@
             :step="1"
             color="#068ede95"
             thumb-label="always"
+            :track-size="10"
+
           >
             <template v-slot:thumb-label="{ modelValue }">
               <div class="thumb-label">
@@ -33,15 +48,27 @@
             </template>
           </v-slider>
         </div>
-      </div>
-
-      <div>
-      <article>
-        <h2>TEMPO Data</h2>
-        <p>Some descriptive text about TEMPO and the data we are showing here.</p>
-      </article>
-      </div>
-      <div>
+
+      <div id="select-option">
+        <!-- make a v-radio-group with 3 options -->
+        <v-radio-group
+          v-model="tab"
+          row
+        >
+          <v-radio
+            label="Option 1"
+            value="0"
+          ></v-radio>
+          <v-radio
+            label="Option 2"
+            value="1"
+          ></v-radio>
+          <v-radio
+            label="August 2023 - This is a really long option"
+            value="2"
+          ></v-radio>
+        </v-radio-group>
+        <div>
         <v-btn
           id="home"
           @click="() => {
@@ -72,6 +99,14 @@
           Northeast
         </v-btn>
       </div>
+      </div>
+
+      <div id="information">
+      <article>
+        <h2>TEMPO Data</h2>
+        <p>Some descriptive text about TEMPO and the data we are showing here.</p>
+      </article>
+      </div>
     </div>
     <!-- This contains the splash screen content -->
 
@@ -112,7 +147,7 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 import L, { Map } from "leaflet";
-
+import  { cividis } from "./cividis";
 type SheetType = "text" | "video" | null;
 type Timeout = ReturnType<typeof setTimeout>;
 
@@ -346,6 +381,7 @@ export default defineComponent({
   },
 
   mounted() {
+    this.showSplashScreen = false;
     this.map = L.map("map").setView([40, -50], 3, {
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
@@ -425,6 +461,11 @@ export default defineComponent({
   },
 
   methods: {
+    
+    cividis(x: number): string {
+      return cividis(x);
+    },
+    
     blurActiveElement() {
       const active = document.activeElement;
       if (active instanceof HTMLElement) {
@@ -489,9 +530,16 @@ export default defineComponent({
   src: url("./assets/HighwayGothicNarrow.ttf");
 }
 
+// import Lexand from google fonts
+@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap');
+
 :root {
   --default-font-size: clamp(0.7rem, min(1.7vh, 1.7vw), 1.1rem);
   --default-line-height: clamp(1rem, min(2.2vh, 2.2vw), 1.6rem);
+  --smithsonian-blue: #009ade;
+  --smithsonian-yellow: #ffcc33;
+  --info-background: #092088;
+  --map-height: 500px;
 }
 
 html {
@@ -522,7 +570,6 @@ body {
   width: 100%;
   height: var(--app-content-height);
   overflow: hidden;
-
   transition: height 0.1s ease-in-out;
 }
 
@@ -536,12 +583,125 @@ body {
 
 #map {
   width: 100%;
-  height: 600px;
+  height: var(--map-height)
+}
+
+// define the layout
+.content-with-sidebars {
+  position: relative;
+  padding: 0;
+  
+  display: grid;
+  grid-template-columns: .08fr .8fr .3fr;
+  grid-template-rows: 50px auto auto auto;
+  gap: 20px 10px;
+  
+  > * {
+    background-color: transparent;
+  }
+  
+  > div {
+    outline: 1px solid transparent;
+  }
+  
+  #select-option {
+    grid-column: 3 / 4;
+    grid-row: 2 / 3;
+  }
+  
+  #title {
+    grid-column: 2 / 3;
+    grid-row: 1 / 2;
+  }
+  
+  #where {
+    grid-column: 1 / 2;
+    grid-row: 2 / 3;
+  }
+  
+  #map-container {
+    grid-column: 2 / 3;
+    grid-row: 2 / 3;
+  }
+  
+  #when {
+    grid-column: 1 / 2;
+    grid-row: 3 / 4;
+  }
+  
+  #slider-row {
+    grid-column: 2 / 3;
+    grid-row: 3 / 4;
+  }
+  
+  #information {
+    grid-column: 2 / 4;
+    grid-row: 4 / 5;
+  }
+  
+  
+}
+
+//  style the content 
+#main-content {
+  padding: 2rem;
+}
+
+.content-with-sidebars {
+  font-family: "Lexend", sans-serif;
+  font-optical-sizing: auto;
+  font-weight: normal;
+  font-style: normal;
+  background-color: transparent;
+}
+
+#title {
+  color: var(--smithsonian-yellow);
+  font-weight: 600;
+  font-size: 40px;
+  text-align: left;
+  text-wrap: nowrap;
+}
+
+#information {
+  background-color: var(--info-background);
+  border-radius: 10px;
+  padding: 1rem;
+  margin-top: 1rem;
+}
+
+
+.big-label {
+  font-size: 40px;
+  text-align: right;
+  align-self: end;
+  color: var(--smithsonian-blue);
+}
+
+#map-container {
+  display: flex;
+  flex-direction: row;
+
+  > #map {
+    flex-basis: 80%;
+    flex-grow: 1;
+    flex-shrink: 1;
+  }
+
+  > .colorbar-container {
+    flex-grow: 0;
+    flex-shrink: 1;
+    
+    .colorbar-label {
+      transform: rotate(180deg) translate(-110%,-50%)
+    }
+  }
 }
 
 #slider-row {
   display: flex;
   flex-direction: row;
+  padding-inline: 2rem;
 }
 
 #splash-overlay {
@@ -721,18 +881,33 @@ video {
 
 .v-slider-thumb__surface::after {
   background-image: url("./assets/smithsonian.png");
-  background-size: 20px 20px;
-  height: 20px;
-  width: 20px;
+  background-size: 30px 30px;
+  height: 30px;
+  width: 30px;
 }
 
 .v-slider-thumb__label {
   background-color: #ffd302;
-  border: 3px solid #068ede;
-  width: 210px;
+  border: 0.25rem solid #068ede;
+  width: max-content;
+  height: 2.5rem;
+  font-size: 1rem;
+
 
   &::before {
     color: #068ede;
   }
 }
+
+.v-slider.v-input--horizontal .v-slider-thumb__label {
+  top: calc(var(--v-slider-thumb-size) * 1.5);
+}
+
+.v-slider.v-input--horizontal .v-slider-thumb__label::before {
+    border-left: 6px solid transparent;
+    border-right: 6px solid transparent;
+    border-top: 6px solid transparent;
+    border-bottom: 6px solid currentColor;
+    top: -15px;
+}
 </style>

src/cividis.ts

@@ -0,0 +1,268 @@
+
+const colors : [number, number, number][] = [
+  [0.0, 0.135112, 0.304751],
+  [0.0, 0.138068, 0.311105],
+  [0.0, 0.141013, 0.317579],
+  [0.0, 0.143951, 0.323982],
+  [0.0, 0.146877, 0.330479],
+  [0.0, 0.149791, 0.337065],
+  [0.0, 0.152673, 0.343704],
+  [0.0, 0.155377, 0.3505],
+  [0.0, 0.157932, 0.357521],
+  [0.0, 0.160495, 0.364534],
+  [0.0, 0.163058, 0.371608],
+  [0.0, 0.165621, 0.378769],
+  [0.0, 0.168204, 0.385902],
+  [0.0, 0.1708, 0.3931],
+  [0.0, 0.17342, 0.400353],
+  [0.0, 0.176082, 0.407577],
+  [0.0, 0.178802, 0.414764],
+  [0.0, 0.18161, 0.421859],
+  [0.0, 0.18455, 0.428802],
+  [0.0, 0.186915, 0.435532],
+  [0.0, 0.188769, 0.439563],
+  [0.0, 0.19095, 0.441085],
+  [0.0, 0.193366, 0.441561],
+  [0.003602, 0.195911, 0.441564],
+  [0.017852, 0.198528, 0.441248],
+  [0.03211, 0.201199, 0.440785],
+  [0.046205, 0.203903, 0.440196],
+  [0.058378, 0.206629, 0.439531],
+  [0.068968, 0.209372, 0.438863],
+  [0.078624, 0.212122, 0.438105],
+  [0.087465, 0.214879, 0.437342],
+  [0.095645, 0.217643, 0.436593],
+  [0.103401, 0.220406, 0.43579],
+  [0.110658, 0.22317, 0.435067],
+  [0.117612, 0.225935, 0.434308],
+  [0.124291, 0.228697, 0.433547],
+  [0.130669, 0.231458, 0.43284],
+  [0.13683, 0.234216, 0.432148],
+  [0.142852, 0.236972, 0.431404],
+  [0.148638, 0.239724, 0.430752],
+  [0.154261, 0.242475, 0.43012],
+  [0.159733, 0.245221, 0.429528],
+  [0.165113, 0.247965, 0.428908],
+  [0.170362, 0.250707, 0.428325],
+  [0.17549, 0.253444, 0.42779],
+  [0.180503, 0.25618, 0.427299],
+  [0.185453, 0.258914, 0.426788],
+  [0.190303, 0.261644, 0.426329],
+  [0.195057, 0.264372, 0.425924],
+  [0.199764, 0.267099, 0.425497],
+  [0.204385, 0.269823, 0.425126],
+  [0.208926, 0.272546, 0.424809],
+  [0.213431, 0.275266, 0.42448],
+  [0.217863, 0.277985, 0.424206],
+  [0.222264, 0.280702, 0.423914],
+  [0.226598, 0.283419, 0.423678],
+  [0.230871, 0.286134, 0.423498],
+  [0.23512, 0.288848, 0.423304],
+  [0.239312, 0.291562, 0.423167],
+  [0.243485, 0.294274, 0.423014],
+  [0.247605, 0.296986, 0.422917],
+  [0.251675, 0.299698, 0.422873],
+  [0.255731, 0.302409, 0.422814],
+  [0.25974, 0.30512, 0.42281],
+  [0.263738, 0.307831, 0.422789],
+  [0.267693, 0.310542, 0.422821],
+  [0.271639, 0.313253, 0.422837],
+  [0.275513, 0.315965, 0.422979],
+  [0.279411, 0.318677, 0.423031],
+  [0.28324, 0.32139, 0.423211],
+  [0.287065, 0.324103, 0.423373],
+  [0.290884, 0.326816, 0.423517],
+  [0.294669, 0.329531, 0.423716],
+  [0.298421, 0.332247, 0.423973],
+  [0.302169, 0.334963, 0.424213],
+  [0.305886, 0.337681, 0.424512],
+  [0.309601, 0.340399, 0.42479],
+  [0.313287, 0.34312, 0.42512],
+  [0.316941, 0.345842, 0.425512],
+  [0.320595, 0.348565, 0.425889],
+  [0.32425, 0.351289, 0.42625],
+  [0.327875, 0.354016, 0.42667],
+  [0.331474, 0.356744, 0.427144],
+  [0.335073, 0.359474, 0.427605],
+  [0.338673, 0.362206, 0.428053],
+  [0.342246, 0.364939, 0.428559],
+  [0.345793, 0.367676, 0.429127],
+  [0.349341, 0.370414, 0.429685],
+  [0.352892, 0.373153, 0.430226],
+  [0.356418, 0.375896, 0.430823],
+  [0.359916, 0.378641, 0.431501],
+  [0.363446, 0.381388, 0.432075],
+  [0.366923, 0.384139, 0.432796],
+  [0.37043, 0.38689, 0.433428],
+  [0.373884, 0.389646, 0.434209],
+  [0.377371, 0.392404, 0.43489],
+  [0.38083, 0.395164, 0.435653],
+  [0.384268, 0.397928, 0.436475],
+  [0.387705, 0.400694, 0.437305],
+  [0.391151, 0.403464, 0.438096],
+  [0.394568, 0.406236, 0.438986],
+  [0.397991, 0.409011, 0.439848],
+  [0.401418, 0.41179, 0.440708],
+  [0.40482, 0.414572, 0.441642],
+  [0.408226, 0.417357, 0.44257],
+  [0.411607, 0.420145, 0.443577],
+  [0.414992, 0.422937, 0.444578],
+  [0.418383, 0.425733, 0.44556],
+  [0.421748, 0.428531, 0.44664],
+  [0.42512, 0.431334, 0.447692],
+  [0.428462, 0.43414, 0.448864],
+  [0.431817, 0.43695, 0.449982],
+  [0.435168, 0.439763, 0.451134],
+  [0.438504, 0.44258, 0.452341],
+  [0.44181, 0.445402, 0.453659],
+  [0.445148, 0.448226, 0.454885],
+  [0.448447, 0.451053, 0.456264],
+  [0.451759, 0.453887, 0.457582],
+  [0.455072, 0.456718, 0.458976],
+  [0.458366, 0.459552, 0.460457],
+  [0.461616, 0.462405, 0.461969],
+  [0.464947, 0.465241, 0.463395],
+  [0.468254, 0.468083, 0.464908],
+  [0.471501, 0.47096, 0.466357],
+  [0.474812, 0.473832, 0.467681],
+  [0.478186, 0.476699, 0.468845],
+  [0.481622, 0.479573, 0.469767],
+  [0.485141, 0.482451, 0.470384],
+  [0.488697, 0.485318, 0.471008],
+  [0.492278, 0.488198, 0.471453],
+  [0.495913, 0.491076, 0.471751],
+  [0.499552, 0.49396, 0.472032],
+  [0.503185, 0.496851, 0.472305],
+  [0.506866, 0.499743, 0.472432],
+  [0.51054, 0.502643, 0.47255],
+  [0.514226, 0.505546, 0.47264],
+  [0.51792, 0.508454, 0.472707],
+  [0.521643, 0.511367, 0.472639],
+  [0.525348, 0.514285, 0.47266],
+  [0.529086, 0.517207, 0.472543],
+  [0.532829, 0.520135, 0.472401],
+  [0.536553, 0.523067, 0.472352],
+  [0.540307, 0.526005, 0.472163],
+  [0.544069, 0.528948, 0.471947],
+  [0.54784, 0.531895, 0.471704],
+  [0.551612, 0.534849, 0.471439],
+  [0.555393, 0.537807, 0.471147],
+  [0.559181, 0.540771, 0.470829],
+  [0.562972, 0.543741, 0.470488],
+  [0.566802, 0.546715, 0.469988],
+  [0.570607, 0.549695, 0.469593],
+  [0.574417, 0.552682, 0.469172],
+  [0.578236, 0.555673, 0.468724],
+  [0.582087, 0.55867, 0.468118],
+  [0.585916, 0.561674, 0.467618],
+  [0.589753, 0.564682, 0.46709],
+  [0.593622, 0.567697, 0.466401],
+  [0.597469, 0.570718, 0.465821],
+  [0.601354, 0.573743, 0.465074],
+  [0.605211, 0.576777, 0.464441],
+  [0.609105, 0.579816, 0.463638],
+  [0.612977, 0.582861, 0.46295],
+  [0.616852, 0.585913, 0.462237],
+  [0.620765, 0.58897, 0.461351],
+  [0.624654, 0.592034, 0.460583],
+  [0.628576, 0.595104, 0.459641],
+  [0.632506, 0.59818, 0.458668],
+  [0.636412, 0.601264, 0.457818],
+  [0.640352, 0.604354, 0.456791],
+  [0.64427, 0.60745, 0.455886],
+  [0.648222, 0.610553, 0.454801],
+  [0.652178, 0.613664, 0.453689],
+  [0.656114, 0.61678, 0.452702],
+  [0.660082, 0.619904, 0.451534],
+  [0.664055, 0.623034, 0.450338],
+  [0.668008, 0.626171, 0.44927],
+  [0.671991, 0.629316, 0.448018],
+  [0.675981, 0.632468, 0.446736],
+  [0.679979, 0.635626, 0.445424],
+  [0.68395, 0.638793, 0.444251],
+  [0.687957, 0.641966, 0.442886],
+  [0.691971, 0.645145, 0.441491],
+  [0.695985, 0.648334, 0.440072],
+  [0.700008, 0.651529, 0.438624],
+  [0.704037, 0.654731, 0.437147],
+  [0.708067, 0.657942, 0.435647],
+  [0.712105, 0.66116, 0.434117],
+  [0.716177, 0.664384, 0.432386],
+  [0.720222, 0.667618, 0.430805],
+  [0.724274, 0.670859, 0.429194],
+  [0.728334, 0.674107, 0.427554],
+  [0.732422, 0.677364, 0.425717],
+  [0.736488, 0.680629, 0.424028],
+  [0.740589, 0.6839, 0.422131],
+  [0.744664, 0.687181, 0.420393],
+  [0.748772, 0.69047, 0.418448],
+  [0.752886, 0.693766, 0.416472],
+  [0.756975, 0.697071, 0.414659],
+  [0.761096, 0.700384, 0.412638],
+  [0.765223, 0.703705, 0.410587],
+  [0.769353, 0.707035, 0.408516],
+  [0.773486, 0.710373, 0.406422],
+  [0.777651, 0.713719, 0.404112],
+  [0.781795, 0.717074, 0.401966],
+  [0.785965, 0.720438, 0.399613],
+  [0.790116, 0.72381, 0.397423],
+  [0.794298, 0.72719, 0.395016],
+  [0.79848, 0.73058, 0.392597],
+  [0.802667, 0.733978, 0.390153],
+  [0.806859, 0.737385, 0.387684],
+  [0.811054, 0.740801, 0.385198],
+  [0.815274, 0.744226, 0.382504],
+  [0.819499, 0.747659, 0.379785],
+  [0.823729, 0.751101, 0.377043],
+  [0.827959, 0.754553, 0.374292],
+  [0.832192, 0.758014, 0.371529],
+  [0.836429, 0.761483, 0.368747],
+  [0.840693, 0.764962, 0.365746],
+  [0.844957, 0.76845, 0.362741],
+  [0.849223, 0.771947, 0.359729],
+  [0.853515, 0.775454, 0.3565],
+  [0.857809, 0.778969, 0.353259],
+  [0.862105, 0.782494, 0.350011],
+  [0.866421, 0.786028, 0.346571],
+  [0.870717, 0.789572, 0.343333],
+  [0.875057, 0.793125, 0.339685],
+  [0.879378, 0.796687, 0.336241],
+  [0.88372, 0.800258, 0.332599],
+  [0.888081, 0.803839, 0.32877],
+  [0.89244, 0.80743, 0.324968],
+  [0.896818, 0.81103, 0.320982],
+  [0.901195, 0.814639, 0.317021],
+  [0.905589, 0.818257, 0.312889],
+  [0.91, 0.821885, 0.308594],
+  [0.914407, 0.825522, 0.304348],
+  [0.918828, 0.829168, 0.29996],
+  [0.923279, 0.832822, 0.295244],
+  [0.927724, 0.836486, 0.290611],
+  [0.93218, 0.840159, 0.28588],
+  [0.93666, 0.843841, 0.280876],
+  [0.941147, 0.84753, 0.275815],
+  [0.945654, 0.851228, 0.270532],
+  [0.950178, 0.854933, 0.265085],
+  [0.954725, 0.858646, 0.259365],
+  [0.959284, 0.862365, 0.253563],
+  [0.963872, 0.866089, 0.247445],
+  [0.968469, 0.869819, 0.24131],
+  [0.973114, 0.87355, 0.234677],
+  [0.97778, 0.877281, 0.227954],
+  [0.982497, 0.881008, 0.220878],
+  [0.987293, 0.884718, 0.213336],
+  [0.992218, 0.888385, 0.205468],
+  [0.994847, 0.892954, 0.203445],
+  [0.995249, 0.898384, 0.207561],
+  [0.995503, 0.903866, 0.21237],
+  [0.995737, 0.909344, 0.217772]
+];
+
+// return appropriate css rgba color
+export function cividis(value: number, alpha: number = 1) {
+  // scale 0 to 1 to 0 to 255
+  const index = Math.round(value * 255);
+  const color = colors[index];
+  return `rgba(${color[0] * 255}, ${color[1] * 255}, ${color[2] * 255}, ${alpha})`;
+
+}

src/main.ts

@@ -2,7 +2,7 @@ import Vue, { createApp } from "vue";
 
 import { FundingAcknowledgment, IconButton, CreditLogos } from "@cosmicds/vue-toolkit";
 import TempoLite from "./TempoLite.vue";
-
+import Colorbar from './ColorBar.vue';
 import vuetify from "../plugins/vuetify";
 
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
@@ -53,6 +53,7 @@ createApp(TempoLite, {})
   .component('icon-button', IconButton)
   .component('funding-acknowledgement', FundingAcknowledgment)
   .component('credit-logos', CreditLogos)
+  .component('colorbar', Colorbar)
 
   // Mount
   .mount("#app");