From 9de17ee0d6ea3077413951487eba67f3615dfac2 Mon Sep 17 00:00:00 2001 From: Andrew Michael McNutt Date: Thu, 18 Jan 2024 18:29:58 -0800 Subject: [PATCH 1/9] data fetch bug hunting --- README.md | 2 +- src/lib/charts.ts | 4 ++++ 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 23f93b77..7583906a 100644 --- a/README.md +++ b/README.md @@ -55,7 +55,7 @@ To raise the sliders, you need to click on one of the examples that are displaye - [ ] 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 diff --git a/src/lib/charts.ts b/src/lib/charts.ts index 48bd4899..628d1321 100644 --- a/src/lib/charts.ts +++ b/src/lib/charts.ts @@ -204,10 +204,14 @@ export async function getSVG(localSpec: string, pal: Palette) { // ? "https://vega.github.io/editor/data/penguins.json" // : "data/penguins.json", const matchedDataset = vegaDatasets.find((x) => spec.data?.url?.includes(x)); + console.log("asd", matchedDataset); if (matchedDataset) { + console.log("XXXX", matchedDataset); if (location.href.includes("localhost")) { + console.log("a"); spec.data.url = `data/${matchedDataset}`; } else { + console.log("b"); spec.data.url = `https://vega.github.io/editor/data/${matchedDataset}`; } } From 6175d6a980f7a8560f2531cb56589164cdb6a07f Mon Sep 17 00:00:00 2001 From: Andrew Michael McNutt Date: Thu, 18 Jan 2024 18:32:31 -0800 Subject: [PATCH 2/9] . --- src/content-modules/contextual-tools/InterpolatePoints.svelte | 2 +- src/lib/charts.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content-modules/contextual-tools/InterpolatePoints.svelte b/src/content-modules/contextual-tools/InterpolatePoints.svelte index f189f29d..42ed38ca 100644 --- a/src/content-modules/contextual-tools/InterpolatePoints.svelte +++ b/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[] = []; diff --git a/src/lib/charts.ts b/src/lib/charts.ts index 628d1321..5eb899f7 100644 --- a/src/lib/charts.ts +++ b/src/lib/charts.ts @@ -204,7 +204,7 @@ export async function getSVG(localSpec: string, pal: Palette) { // ? "https://vega.github.io/editor/data/penguins.json" // : "data/penguins.json", const matchedDataset = vegaDatasets.find((x) => spec.data?.url?.includes(x)); - console.log("asd", matchedDataset); + console.log("asd", matchedDataset, spec.data?.url, vegaDatasets); if (matchedDataset) { console.log("XXXX", matchedDataset); if (location.href.includes("localhost")) { From d23a01618b398619bb2fe31093938dc52125634a Mon Sep 17 00:00:00 2001 From: Andrew Michael McNutt Date: Thu, 18 Jan 2024 18:38:09 -0800 Subject: [PATCH 3/9] blerp blerp blerp --- src/lib/charts.ts | 26 +++++++++----------------- 1 file changed, 9 insertions(+), 17 deletions(-) diff --git a/src/lib/charts.ts b/src/lib/charts.ts index 5eb899f7..f2706a43 100644 --- a/src/lib/charts.ts +++ b/src/lib/charts.ts @@ -191,30 +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)); - console.log("asd", matchedDataset, spec.data?.url, vegaDatasets); - if (matchedDataset) { - console.log("XXXX", matchedDataset); - if (location.href.includes("localhost")) { - console.log("a"); - spec.data.url = `data/${matchedDataset}`; - } else { - console.log("b"); - 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(); From 46b8f58e2da5c9d52c4ced5d5ddab3eccceae958 Mon Sep 17 00:00:00 2001 From: Andrew Michael McNutt Date: Thu, 18 Jan 2024 18:43:47 -0800 Subject: [PATCH 4/9] . --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 7583906a..4c8682a5 100644 --- a/README.md +++ b/README.md @@ -51,7 +51,7 @@ 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 From fc369df5c6550a724b7f20fa34516667ef463bb8 Mon Sep 17 00:00:00 2001 From: Andrew Michael McNutt Date: Thu, 18 Jan 2024 18:45:52 -0800 Subject: [PATCH 5/9] x --- package.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 6d500dce..981cd58f 100644 --- a/package.json +++ b/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": "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" } -} +} \ No newline at end of file From 389be1d6722576c28a4f16a77c8de702ab2ef5f8 Mon Sep 17 00:00:00 2001 From: Andrew Michael McNutt Date: Thu, 18 Jan 2024 18:47:20 -0800 Subject: [PATCH 6/9] x --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 981cd58f..af9f8e5b 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,7 @@ "check": "svelte-check --tsconfig ./tsconfig.json", "types": "tsc --noEmit --watch", "prep-data": "cp node_modules/vega-datasets/data/* public/data/", - "build-data": "cp node_modules/vega-datasets/data/* ./data/", + "build-data": "mkdir data && cp node_modules/vega-datasets/data/* ./data/", "test": "vitest run", "test:watch": "vitest" }, From 8fd88498f7edce481c1466380a49e524bf4cebc4 Mon Sep 17 00:00:00 2001 From: Andrew Michael McNutt Date: Thu, 18 Jan 2024 18:48:44 -0800 Subject: [PATCH 7/9] ugh --- src/lib/charts.ts | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/lib/charts.ts b/src/lib/charts.ts index f2706a43..1e16455c 100644 --- a/src/lib/charts.ts +++ b/src/lib/charts.ts @@ -192,16 +192,16 @@ export async function getSVG(localSpec: string, pal: Palette) { 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); + // 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(cleanSpec); + spec = JSON.parse(localSpec); } catch (e) { - console.error(e, cleanSpec); + console.error(e, localSpec); return ""; } if (spec.$schema.includes("vega-lite")) { From 55fcbef934a4ea077af885e972df31c69444e307 Mon Sep 17 00:00:00 2001 From: Andrew Michael McNutt Date: Thu, 18 Jan 2024 18:50:39 -0800 Subject: [PATCH 8/9] ugh --- src/lib/charts.ts | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/lib/charts.ts b/src/lib/charts.ts index 1e16455c..f2706a43 100644 --- a/src/lib/charts.ts +++ b/src/lib/charts.ts @@ -192,16 +192,16 @@ export async function getSVG(localSpec: string, pal: Palette) { 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); + 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")) { From 335a6eb8941b90ede75475d114a9180448997513 Mon Sep 17 00:00:00 2001 From: Andrew Michael McNutt Date: Thu, 18 Jan 2024 19:01:57 -0800 Subject: [PATCH 9/9] some example ui improvement --- public/examples/line-chart.json | 26 ++++++++++++ src/content-modules/Examples.svelte | 62 +++++++++++++++++++---------- src/stores/example-store.ts | 5 +++ 3 files changed, 73 insertions(+), 20 deletions(-) create mode 100644 public/examples/line-chart.json diff --git a/public/examples/line-chart.json b/public/examples/line-chart.json new file mode 100644 index 00000000..ec7e7174 --- /dev/null +++ b/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" + } + } +} \ No newline at end of file diff --git a/src/content-modules/Examples.svelte b/src/content-modules/Examples.svelte index 7369d9e3..bf0ca75e 100644 --- a/src/content-modules/Examples.svelte +++ b/src/content-modules/Examples.svelte @@ -111,7 +111,7 @@ modalState = "input-svg"; }} > - Add Example + Use Example + {#if idx} + + {/if} - - - {/each} + {/each} + +
+ {@html value} +
{/if} diff --git a/src/stores/example-store.ts b/src/stores/example-store.ts index 5759bd5b..f00ccd25 100644 --- a/src/stores/example-store.ts +++ b/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(