Add links to the menu

Author: flekschas

example/index.html

@@ -175,6 +175,10 @@
         background: rgba(32, 32, 32, 1);
       }
 
+      #topbar hr {
+        border-color: rgba(255, 255, 255, 0.1);
+      }
+
       #title {
         padding: 0;
         margin: 0;
@@ -234,6 +238,27 @@
         line-height: 0.9rem;
       }
 
+      #examples {
+        margin: 0;
+        padding: 0 0 0 1.25em;
+      }
+
+      #examples li {
+        margin: 0.125em 0;
+      }
+
+      #examples li:last-child {
+        margin-bottom: 0;
+      }
+
+      #examples li a {
+        color: white;
+      }
+
+      #examples li a.active {
+        font-style: italic;
+      }
+
       #num-points-value {
         min-width: 5rem;
       }
@@ -314,6 +339,18 @@ <h1 id="title">Regl Scatterplot</h1>
           />
         </label>
         <button id="reset">Reset</button>
+        <hr />
+        <label>Examples:</label>
+        <ul id="examples">
+          <li>
+            <a id="example-basic" href="index.html">Basic</a>
+          </li>
+          <li>
+            <a id="example-background" href="texture-background.html"
+              >Background Image</a
+            >
+          </li>
+        </ul>
       </aside>
     </header>
     <div id="canvas-wrapper">

example/index.js

@@ -10,6 +10,10 @@ const pointSizeValEl = document.querySelector('#point-size-value');
 const opacityEl = document.querySelector('#opacity');
 const opacityValEl = document.querySelector('#opacity-value');
 const resetEl = document.querySelector('#reset');
+const exampleEl = document.querySelector('#example-basic');
+
+exampleEl.setAttribute('class', 'active');
+exampleEl.removeAttribute('href');
 
 let { width, height } = canvas.getBoundingClientRect();
 
@@ -24,13 +28,13 @@ const lassoMinDist = 2;
 const showRecticle = true;
 const recticleColor = [1, 1, 0.878431373, 0.33];
 
-const pointoverHandler = pointId => {
+const pointoverHandler = (pointId) => {
   console.log('Over point:', pointId);
   const [x, y, category, value] = points[pointId];
   console.log(`X: ${x}\nY: ${y}\nCategory: ${category}\nValue: ${value}`);
 };
 
-const pointoutHandler = pointId => {
+const pointoutHandler = (pointId) => {
   console.log('Out point:', pointId);
   const [x, y, category, value] = points[pointId];
   console.log(`X: ${x}\nY: ${y}\nCategory: ${category}\nValue: ${value}`);
@@ -60,7 +64,7 @@ const scatterplot = createScatterplot({
   lassoMinDist,
   pointSize,
   showRecticle,
-  recticleColor
+  recticleColor,
 });
 
 console.log(scatterplot.get('pointColorActive'));
@@ -78,52 +82,52 @@ const resizeHandler = () => {
 
 window.addEventListener('resize', resizeHandler);
 
-const generatePoints = num =>
+const generatePoints = (num) =>
   new Array(num).fill().map(() => [
     -1 + Math.random() * 2, // x
     -1 + Math.random() * 2, // y
     Math.round(Math.random()), // category
-    Math.random() // value
+    Math.random(), // value
   ]);
 
-const setNumPoint = newNumPoints => {
+const setNumPoint = (newNumPoints) => {
   numPoints = newNumPoints;
   numPointsEl.value = numPoints;
   numPointsValEl.innerHTML = numPoints;
   points = generatePoints(numPoints);
   scatterplot.draw(points);
 };
 
-const numPointsInputHandler = event => {
+const numPointsInputHandler = (event) => {
   numPointsValEl.innerHTML = `${+event.target
     .value} <em>release to redraw</em>`;
 };
 
 numPointsEl.addEventListener('input', numPointsInputHandler);
 
-const numPointsChangeHandler = event => setNumPoint(+event.target.value);
+const numPointsChangeHandler = (event) => setNumPoint(+event.target.value);
 
 numPointsEl.addEventListener('change', numPointsChangeHandler);
 
-const setPointSize = newPointSize => {
+const setPointSize = (newPointSize) => {
   pointSize = newPointSize;
   pointSizeEl.value = pointSize;
   pointSizeValEl.innerHTML = pointSize;
   scatterplot.set({ pointSize });
 };
 
-const pointSizeInputHandler = event => setPointSize(+event.target.value);
+const pointSizeInputHandler = (event) => setPointSize(+event.target.value);
 
 pointSizeEl.addEventListener('input', pointSizeInputHandler);
 
-const setOpacity = newOpacity => {
+const setOpacity = (newOpacity) => {
   opacity = newOpacity;
   opacityEl.value = opacity;
   opacityValEl.innerHTML = opacity;
   scatterplot.set({ opacity });
 };
 
-const opacityInputHandler = event => setOpacity(+event.target.value);
+const opacityInputHandler = (event) => setOpacity(+event.target.value);
 
 opacityEl.addEventListener('input', opacityInputHandler);
 
@@ -156,7 +160,7 @@ const colorsScale = [
   '#b8e0d7',
   '#c8ecdc',
   '#ddf7df',
-  '#ffffe0' // bright yellow
+  '#ffffe0', // bright yellow
 ];
 scatterplot.set({ colorBy: 'value', pointColor: colorsScale });
 

example/texture-background.js

@@ -10,6 +10,10 @@ const pointSizeValEl = document.querySelector('#point-size-value');
 const opacityEl = document.querySelector('#opacity');
 const opacityValEl = document.querySelector('#opacity-value');
 const resetEl = document.querySelector('#reset');
+const exampleEl = document.querySelector('#example-background');
+
+exampleEl.setAttribute('class', 'active');
+exampleEl.removeAttribute('href');
 
 let { width, height } = canvas.getBoundingClientRect();