Example UX improvements

README.md

@@ -51,11 +51,11 @@ To raise the sliders, you need to click on one of the examples that are displaye
 
 ## TODOS
 
-- [x] New "blank" button
+- [x] New "blank" button.
 - [ ] Minor: Make keyboard short cut (option+up/down) for the z-direction
 - [ ] Chore: Extract some common types into a top level location (like types.ts type thing)
 - [x] Chore: Rearrange some of the colors in the color area eg make rg on xy and b on z etc, blocking polar stuff
-- x] Polar stuff
+- [x] Polar stuff
 - [ ] Insert color theory options, eg insert opposing, inserting analogous color, etc, mine from the adobe picker
 - [ ] Labels, tooltips, etc
 - [ ] Nice to have: Rest of basic geometry manipulations: flip (horizontal, vertical), scale, Distribute radially

package.json

@@ -10,6 +10,7 @@
     "check": "svelte-check --tsconfig ./tsconfig.json",
     "types": "tsc --noEmit --watch",
     "prep-data": "cp node_modules/vega-datasets/data/* public/data/",
+    "build-data": "mkdir data && cp node_modules/vega-datasets/data/* ./data/",
     "test": "vitest run",
     "test:watch": "vitest"
   },
@@ -51,4 +52,4 @@
     "vega-embed": "^6.23.0",
     "vega-lite": "^5.16.3"
   }
-}
+}

public/examples/line-chart.json

@@ -0,0 +1,26 @@
+{
+    "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
+    "description": "Stock prices of 5 Tech Companies over Time.",
+    "data": {
+        "url": "data/stocks.csv"
+    },
+    "mark": {
+        "type": "line",
+        "point": true
+    },
+    "encoding": {
+        "x": {
+            "timeUnit": "year",
+            "field": "date"
+        },
+        "y": {
+            "aggregate": "mean",
+            "field": "price",
+            "type": "quantitative"
+        },
+        "color": {
+            "field": "symbol",
+            "type": "nominal"
+        }
+    }
+}

src/content-modules/Examples.svelte

@@ -111,7 +111,7 @@
       modalState = "input-svg";
     }}
   >
-    Add Example
+    Use Example
   </button>
   <button
     class={buttonStyle}
@@ -268,26 +268,48 @@
             We detect the following colors, remove any that you do NOT want to
             be replaced in the editor
           </h3>
-          <div class="flex flex-col">
-            {#each detectedColors as color}
-              <div class="flex">
-                <div
-                  class="w-24 h-8"
-                  class:text-white={chroma(color).luminance() < 0.5}
-                  style="background-color: {color};"
-                >
-                  {color}
+          <div class="flex">
+            <div class="flex flex-col">
+              {#each detectedColors as color, idx}
+                <div class="flex">
+                  <div
+                    class="w-24 h-8"
+                    class:text-white={chroma(color).luminance() < 0.5}
+                    style="background-color: {color};"
+                  >
+                    {color}
+                  </div>
+                  <button
+                    class={buttonStyle}
+                    on:click={() => {
+                      detectedColors = detectedColors.filter(
+                        (x) => x !== color
+                      );
+                    }}
+                  >
+                    Remove
+                  </button>
+                  {#if idx}
+                    <button
+                      class={buttonStyle}
+                      on:click={() => {
+                        detectedColors = [
+                          ...detectedColors.slice(0, idx - 1),
+                          detectedColors[idx],
+                          detectedColors[idx - 1],
+                          ...detectedColors.slice(idx + 1),
+                        ];
+                      }}
+                    >
+                      Move up
+                    </button>
+                  {/if}
                 </div>
-                <button
-                  class={buttonStyle}
-                  on:click={() => {
-                    detectedColors = detectedColors.filter((x) => x !== color);
-                  }}
-                >
-                  Remove
-                </button>
-              </div>
-            {/each}
+              {/each}
+            </div>
+            <div>
+              {@html value}
+            </div>
           </div>
         </div>
       {/if}

src/content-modules/contextual-tools/InterpolatePoints.svelte

@@ -19,7 +19,7 @@
     focusedColors.length >= 2 &&
     open && {
       ...$colorStore.currentPal,
-      colors: createInterpolation(true),
+      colors: createInterpolation(),
     }) as Palette;
   function createInterpolatedPoints(pointA: Color, pointB: Color) {
     const points: Color[] = [];

src/lib/charts.ts

@@ -191,26 +191,22 @@ export async function getSVG(localSpec: string, pal: Palette) {
   if (results[newKey]) return results[newKey];
   const theme = buildTheme(pal);
   let spec: any;
+
+  const cleanSpec = vegaDatasets.reduce((acc, x) => {
+    const breakKey = `url": "data/${x}`;
+    const joinKey = `url": "https://vega.github.io/editor/data/${x}`;
+    return acc.split(breakKey).join(joinKey);
+  }, localSpec);
+
   try {
-    spec = JSON.parse(localSpec);
+    spec = JSON.parse(cleanSpec);
   } catch (e) {
-    console.error(e, localSpec);
+    console.error(e, cleanSpec);
     return "";
   }
   if (spec.$schema.includes("vega-lite")) {
     spec = vegaLite.compile(spec, { config: theme }).spec;
   }
-  // // url: !location.href.includes("localhost")
-  //   ? "https://vega.github.io/editor/data/penguins.json"
-  //   : "data/penguins.json",
-  const matchedDataset = vegaDatasets.find((x) => spec.data?.url?.includes(x));
-  if (matchedDataset) {
-    if (location.href.includes("localhost")) {
-      spec.data.url = `data/${matchedDataset}`;
-    } else {
-      spec.data.url = `https://vega.github.io/editor/data/${matchedDataset}`;
-    }
-  }
 
   const runtime = vega.parse(spec, theme);
   const view = await new vega.View(runtime, { renderer: "svg" }).runAsync();

src/stores/example-store.ts

@@ -52,6 +52,11 @@ export const DEMOS = [
     title: "Stacked Area Chart",
     filename: "./examples/stacked-area-chart.json",
   },
+  {
+    type: "vega",
+    title: "Line Chart",
+    filename: "./examples/line-chart.json",
+  },
 ];
 
 export function modifySVGForExampleStore(