Rework examples section, add uploadable vega support

mcnuttandrew · Jan 16, 2024 · 96dfc4e · 96dfc4e
1 parent a7477c3
commit 96dfc4e
Show file tree

Hide file tree

Showing 18 changed files with 744 additions and 297 deletions.
diff --git a/README.md b/README.md
@@ -54,15 +54,15 @@ To raise the sliders, you need to click on one of the examples that are displaye
 - [ ] Make keyboard short cut (option+up/down) for the z-direction
 - [ ] Polar stuff
 - [ ] Chore: Extract some common types into a top level location (like types.ts type thing)
-- [x] Examples: A (default) example showing annotated math stuff
-- [ ] Examples: SVG Upload
-- [ ] Examples: Vega/Vega-Lite Specification
-- [ ] Examples: Examples held as assets somewhere that are downloaded rather than components (for consistency)
-- [ ] Examples: higher card. vis examples
 - [?] Rearrange some of the colors in the color area eg make rg on xy and b on z etc
 - [ ] 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
+- [x] Examples: A (default) example showing annotated math stuff
+- [x] Examples: SVG Upload
+- [x] Examples: Vega/Vega-Lite Specification
+- [x] Examples: Examples held as assets somewhere that are downloaded rather than components (for consistency)
+- [x] Examples: higher card. vis examples
 - [x] Black and white simulation
 - [x] Chore: clean up the color store, many unnecessary methods.
 - [x] Bug: changing the color frame fucks everything up???? (particularly for HSV/HSL)

diff --git a/public/HolyGrail.svg → public/examples/HolyGrail.svg b/public/HolyGrail.svg → public/examples/HolyGrail.svg
diff --git a/public/examples/area-chart.json b/public/examples/area-chart.json
@@ -0,0 +1,40 @@
+{
+    "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
+    "width": 250,
+    "height": 200,
+    "data": {
+        "url": "data/penguins.json"
+    },
+    "mark": {
+        "type": "area",
+        "opacity": 0.5
+    },
+    "transform": [
+        {
+            "density": "Body Mass (g)",
+            "groupby": [
+                "Species"
+            ],
+            "extent": [
+                2500,
+                6500
+            ]
+        }
+    ],
+    "encoding": {
+        "x": {
+            "field": "value",
+            "type": "quantitative",
+            "title": "Body Mass (g)"
+        },
+        "y": {
+            "field": "density",
+            "type": "quantitative",
+            "stack": null
+        },
+        "color": {
+            "field": "Species",
+            "type": "nominal"
+        }
+    }
+}
diff --git a/public/fourier.svg → public/examples/fourier.svg b/public/fourier.svg → public/examples/fourier.svg
diff --git a/public/examples/grouped-bar-chart.json b/public/examples/grouped-bar-chart.json
@@ -0,0 +1,70 @@
+{
+    "height": 150,
+    "width": 150,
+    "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
+    "data": {
+        "values": [
+            {
+                "category": "A",
+                "group": "x",
+                "value": 0.1
+            },
+            {
+                "category": "A",
+                "group": "y",
+                "value": 0.6
+            },
+            {
+                "category": "A",
+                "group": "z",
+                "value": 0.9
+            },
+            {
+                "category": "B",
+                "group": "x",
+                "value": 0.7
+            },
+            {
+                "category": "B",
+                "group": "y",
+                "value": 0.2
+            },
+            {
+                "category": "B",
+                "group": "z",
+                "value": 1.1
+            },
+            {
+                "category": "C",
+                "group": "x",
+                "value": 0.6
+            },
+            {
+                "category": "C",
+                "group": "y",
+                "value": 0.1
+            },
+            {
+                "category": "C",
+                "group": "z",
+                "value": 0.2
+            }
+        ]
+    },
+    "mark": "bar",
+    "encoding": {
+        "x": {
+            "field": "category"
+        },
+        "y": {
+            "field": "value",
+            "type": "quantitative"
+        },
+        "xOffset": {
+            "field": "group"
+        },
+        "color": {
+            "field": "group"
+        }
+    }
+}
diff --git a/public/examples/heatmap.json b/public/examples/heatmap.json
@@ -0,0 +1,83 @@
+{
+    "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
+    "data": {
+        "values": [
+            {
+                "x": 0,
+                "y": 0,
+                "value": -10
+            },
+            {
+                "x": 1,
+                "y": 0,
+                "value": -5
+            },
+            {
+                "x": 2,
+                "y": 0,
+                "value": 0
+            },
+            {
+                "x": 3,
+                "y": 0,
+                "value": 5
+            },
+            {
+                "x": 0,
+                "y": 1,
+                "value": -5
+            },
+            {
+                "x": 1,
+                "y": 1,
+                "value": 0
+            },
+            {
+                "x": 2,
+                "y": 1,
+                "value": 5
+            },
+            {
+                "x": 3,
+                "y": 1,
+                "value": 10
+            },
+            {
+                "x": 0,
+                "y": 2,
+                "value": 0
+            },
+            {
+                "x": 1,
+                "y": 2,
+                "value": 5
+            },
+            {
+                "x": 2,
+                "y": 2,
+                "value": 10
+            },
+            {
+                "x": 3,
+                "y": 2,
+                "value": 15
+            }
+        ]
+    },
+    "mark": "rect",
+    "encoding": {
+        "x": {
+            "field": "x",
+            "type": "ordinal"
+        },
+        "y": {
+            "field": "y",
+            "type": "ordinal"
+        },
+        "color": {
+            "field": "value",
+            "type": "ordinal",
+            "bin": true
+        }
+    }
+}
diff --git a/public/examples/illinois-map.json b/public/examples/illinois-map.json
@@ -0,0 +1,71 @@
+{
+    "$schema": "https://vega.github.io/schema/vega/v5.json",
+    "width": 250,
+    "height": 250,
+    "autosize": "none",
+    "data": [
+        {
+            "name": "counties",
+            "url": "data/us-10m.json",
+            "format": {
+                "type": "topojson",
+                "feature": "counties"
+            },
+            "transform": [
+                {
+                    "type": "formula",
+                    "expr": "toNumber(datum.id)",
+                    "as": "id2"
+                },
+                {
+                    "type": "filter",
+                    "expr": "datum.id2 > 17000 && datum.id2 < 18000"
+                }
+            ]
+        }
+    ],
+    "projections": [
+        {
+            "name": "projection",
+            "type": "albersUsa",
+            "translate": [
+                -100,
+                180
+            ],
+            "scale": 2500
+        }
+    ],
+    "scales": [
+        {
+            "name": "color",
+            "type": "ordinal",
+            "domain": {
+                "data": "counties",
+                "field": "id2"
+            },
+            "range": "category"
+        }
+    ],
+    "marks": [
+        {
+            "type": "shape",
+            "from": {
+                "data": "counties"
+            },
+            "encode": {
+                "update": {
+                    "fill": {
+                        "scale": "color",
+                        "field": "id2"
+                    }
+                }
+            },
+            "transform": [
+                {
+                    "type": "geoshape",
+                    "projection": "projection"
+                }
+            ]
+        }
+    ]
+}
diff --git a/public/examples/mondrian.svg b/public/examples/mondrian.svg
diff --git a/public/r2.svg → public/examples/r2.svg b/public/r2.svg → public/examples/r2.svg
diff --git a/public/examples/scatterplot-ordinal.json b/public/examples/scatterplot-ordinal.json
@@ -0,0 +1,32 @@
+{
+    "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
+    "data": {
+        "url": "data/penguins.json"
+    },
+    "mark": "point",
+    "encoding": {
+        "x": {
+            "field": "Flipper Length (mm)",
+            "type": "quantitative",
+            "scale": {
+                "zero": false
+            }
+        },
+        "y": {
+            "field": "Body Mass (g)",
+            "type": "quantitative",
+            "scale": {
+                "zero": false
+            }
+        },
+        "color": {
+            "field": "Flipper Length (mm)",
+            "type": "ordinal",
+            "legend": null
+        },
+        "shape": {
+            "field": "Species",
+            "type": "nominal"
+        }
+    }
+}
diff --git a/public/examples/scatterplot.json b/public/examples/scatterplot.json
@@ -0,0 +1,34 @@
+{
+    "height": 150,
+    "width": 150,
+    "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
+    "description": "A scatterplot showing body mass and flipper lengths of penguins.",
+    "data": {
+        "url": "data/penguins.json"
+    },
+    "mark": "point",
+    "encoding": {
+        "x": {
+            "field": "Flipper Length (mm)",
+            "type": "quantitative",
+            "scale": {
+                "zero": false
+            }
+        },
+        "y": {
+            "field": "Body Mass (g)",
+            "type": "quantitative",
+            "scale": {
+                "zero": false
+            }
+        },
+        "color": {
+            "field": "Species",
+            "type": "nominal"
+        },
+        "shape": {
+            "field": "Species",
+            "type": "nominal"
+        }
+    }
+}