add color pack example

public/examples/colorpack.json

@@ -0,0 +1,64 @@
+{
+  "$schema": "https://vega.github.io/schema/vega/v5.json",
+  "description": "An example of a circle packing layout for hierarchical data.",
+  "width": 600,
+  "height": 600,
+  "padding": 5,
+  "autosize": "none",
+
+  "data": [
+    {
+      "name": "tree",
+      "url": "data/flare.json",
+      "transform": [
+        {
+          "type": "stratify",
+          "key": "id",
+          "parentKey": "parent"
+        },
+        {
+          "type": "pack",
+          "field": "size",
+          "sort": { "field": "value" },
+          "size": [{ "signal": "width" }, { "signal": "height" }]
+        }
+      ]
+    }
+  ],
+
+  "scales": [
+    {
+      "name": "color",
+      "type": "ordinal",
+      "domain": { "data": "tree", "field": "depth" },
+      "range": { "scheme": "category20" }
+    }
+  ],
+
+  "marks": [
+    {
+      "type": "symbol",
+      "from": { "data": "tree" },
+      "encode": {
+        "enter": {
+          "shape": { "value": "circle" },
+          "fill": { "scale": "color", "field": "depth" },
+          "tooltip": {
+            "signal": "datum.name + (datum.size ? ', ' + datum.size + ' bytes' : '')"
+          }
+        },
+        "update": {
+          "x": { "field": "x" },
+          "y": { "field": "y" },
+          "size": { "signal": "4 * datum.r * datum.r" },
+          "stroke": { "value": "white" },
+          "strokeWidth": { "value": 0.5 }
+        },
+        "hover": {
+          "stroke": { "value": "red" },
+          "strokeWidth": { "value": 2 }
+        }
+      }
+    }
+  ]
+}

src/stores/example-store.ts

@@ -56,6 +56,11 @@ export const DEMOS = [
     title: "Grid",
     filename: "./examples/grid-heatmap.json",
   },
+  {
+    type: "vega",
+    title: "Circle Pack",
+    filename: "./examples/colorpack.json",
+  },
 ];
 
 export function modifySVGForExampleStore(