docs: Add density-groups example.

dev/index.html

@@ -19,6 +19,7 @@
         <option value="bias">Bias Parameter</option>
         <option value="contours">Contours</option>
         <option value="crossfilter">Crossfilter</option>
+        <option value="density-groups">Density Groups</option>
         <option value="density1d">Density 1D</option>
         <option value="density2d">Density 2D</option>
         <option value="driving-shifts">Driving Shifts into Reverse</option>

docs/.vitepress/config.js

@@ -145,6 +145,7 @@ export default defineConfig({
           collapsed: true,
           items: [
             { text: 'Contours', link: '/examples/contours' },
+            { text: 'Density Groups', link: '/examples/density-groups' },
             { text: 'Density 1D', link: '/examples/density1d' },
             { text: 'Density 2D', link: '/examples/density2d' },
             { text: 'Flights Density', link: '/examples/flights-density' },

docs/examples/density-groups.md

@@ -0,0 +1,18 @@
+<script setup>
+  import { coordinator } from '@uwdata/vgplot';
+  coordinator().clear();
+</script>
+
+# Density Groups
+
+Density plots of penguin bill depths, grouped by species. The normalize parameter supporting different forms of comparison, controlling if an individual density estimate is scaled by total point mass or normalized by the sum or max of the point mass. The stack and offset parameters control stacking of density areas.
+
+<Example spec="/specs/yaml/density-groups.yaml" />
+
+## Specification
+
+::: code-group
+<<< @/public/specs/esm/density-groups.js [JavaScript]
+<<< @/public/specs/yaml/density-groups.yaml [YAML]
+<<< @/public/specs/json/density-groups.json [JSON]
+:::

docs/public/specs/esm/density-groups.js

@@ -0,0 +1,42 @@
+import * as vg from "@uwdata/vgplot";
+
+await vg.coordinator().exec([
+  vg.loadParquet("penguins", "data/penguins.parquet")
+]);
+
+const $bandwidth = vg.Param.value(20);
+const $normalize = vg.Param.value("none");
+const $stack = vg.Param.value(false);
+const $offset = vg.Param.value(null);
+
+export default vg.vconcat(
+  vg.hconcat(
+    vg.menu({label: "Normalize", as: $normalize, options: ["none", "sum", "max"]}),
+    vg.menu({label: "Stack", as: $stack, options: [false, true]}),
+    vg.menu({
+      label: "Offset",
+      as: $offset,
+      options: [
+      {label: "none", value: null},
+      {label: "normalize", value: "normalize"},
+      {label: "center", value: "center"}
+    ]
+    })
+  ),
+  vg.plot(
+    vg.densityY(
+      vg.from("penguins"),
+      {
+        x: "bill_depth",
+        fill: "species",
+        fillOpacity: 0.4,
+        bandwidth: $bandwidth,
+        normalize: $normalize,
+        stack: $stack,
+        offset: $offset
+      }
+    ),
+    vg.marginLeft(50),
+    vg.height(200)
+  )
+);

docs/public/specs/json/density-groups.json

@@ -0,0 +1,80 @@
+{
+  "meta": {
+    "title": "Density Groups",
+    "description": "Density plots of penguin bill depths, grouped by species. The normalize parameter supporting different forms of comparison, controlling if an individual density estimate is scaled by total point mass or normalized by the sum or max of the point mass. The stack and offset parameters control stacking of density areas.\n"
+  },
+  "data": {
+    "penguins": {
+      "file": "data/penguins.parquet"
+    }
+  },
+  "params": {
+    "bandwidth": 20,
+    "normalize": "none",
+    "stack": false,
+    "offset": null
+  },
+  "vconcat": [
+    {
+      "hconcat": [
+        {
+          "input": "menu",
+          "label": "Normalize",
+          "as": "$normalize",
+          "options": [
+            "none",
+            "sum",
+            "max"
+          ]
+        },
+        {
+          "input": "menu",
+          "label": "Stack",
+          "as": "$stack",
+          "options": [
+            false,
+            true
+          ]
+        },
+        {
+          "input": "menu",
+          "label": "Offset",
+          "as": "$offset",
+          "options": [
+            {
+              "label": "none",
+              "value": null
+            },
+            {
+              "label": "normalize",
+              "value": "normalize"
+            },
+            {
+              "label": "center",
+              "value": "center"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "plot": [
+        {
+          "mark": "densityY",
+          "data": {
+            "from": "penguins"
+          },
+          "x": "bill_depth",
+          "fill": "species",
+          "fillOpacity": 0.4,
+          "bandwidth": "$bandwidth",
+          "normalize": "$normalize",
+          "stack": "$stack",
+          "offset": "$offset"
+        }
+      ],
+      "marginLeft": 50,
+      "height": 200
+    }
+  ]
+}

docs/public/specs/yaml/density-groups.yaml

@@ -0,0 +1,44 @@
+meta:
+  title: Density Groups
+  description: >
+    Density plots of penguin bill depths, grouped by species.
+    The normalize parameter supporting different forms of comparison,
+    controlling if an individual density estimate is scaled by total point
+    mass or normalized by the sum or max of the point mass.
+    The stack and offset parameters control stacking of density areas.
+data:
+  penguins: { file: data/penguins.parquet }
+params:
+  bandwidth: 20
+  normalize: none
+  stack: false
+  offset: null
+vconcat:
+- hconcat:
+  - input: menu
+    label: Normalize
+    as: $normalize
+    options: [none, sum, max]
+  - input: menu
+    label: Stack
+    as: $stack
+    options: [false, true]
+  - input: menu
+    label: Offset
+    as: $offset
+    options:
+      - { label: none, value: null }
+      - { label: normalize, value: normalize }
+      - { label: center, value: center }
+- plot:
+  - mark: densityY
+    data: { from: penguins }
+    x: bill_depth
+    fill: species
+    fillOpacity: 0.4
+    bandwidth: $bandwidth
+    normalize: $normalize
+    stack: $stack
+    offset: $offset
+  marginLeft: 50
+  height: 200

specs/esm/density-groups.js

@@ -0,0 +1,42 @@
+import * as vg from "@uwdata/vgplot";
+
+await vg.coordinator().exec([
+  vg.loadParquet("penguins", "data/penguins.parquet")
+]);
+
+const $bandwidth = vg.Param.value(20);
+const $normalize = vg.Param.value("none");
+const $stack = vg.Param.value(false);
+const $offset = vg.Param.value(null);
+
+export default vg.vconcat(
+  vg.hconcat(
+    vg.menu({label: "Normalize", as: $normalize, options: ["none", "sum", "max"]}),
+    vg.menu({label: "Stack", as: $stack, options: [false, true]}),
+    vg.menu({
+      label: "Offset",
+      as: $offset,
+      options: [
+      {label: "none", value: null},
+      {label: "normalize", value: "normalize"},
+      {label: "center", value: "center"}
+    ]
+    })
+  ),
+  vg.plot(
+    vg.densityY(
+      vg.from("penguins"),
+      {
+        x: "bill_depth",
+        fill: "species",
+        fillOpacity: 0.4,
+        bandwidth: $bandwidth,
+        normalize: $normalize,
+        stack: $stack,
+        offset: $offset
+      }
+    ),
+    vg.marginLeft(50),
+    vg.height(200)
+  )
+);

specs/json/density-groups.json

@@ -0,0 +1,81 @@
+{
+  "meta": {
+    "title": "Density Groups",
+    "description": "Density plots of penguin bill depths, grouped by species. The normalize parameter supporting different forms of comparison, controlling if an individual density estimate is scaled by total point mass or normalized by the sum or max of the point mass. The stack and offset parameters control stacking of density areas.\n"
+  },
+  "data": {
+    "penguins": {
+      "type": "parquet",
+      "file": "data/penguins.parquet"
+    }
+  },
+  "params": {
+    "bandwidth": 20,
+    "normalize": "none",
+    "stack": false,
+    "offset": null
+  },
+  "vconcat": [
+    {
+      "hconcat": [
+        {
+          "input": "menu",
+          "label": "Normalize",
+          "as": "$normalize",
+          "options": [
+            "none",
+            "sum",
+            "max"
+          ]
+        },
+        {
+          "input": "menu",
+          "label": "Stack",
+          "as": "$stack",
+          "options": [
+            false,
+            true
+          ]
+        },
+        {
+          "input": "menu",
+          "label": "Offset",
+          "as": "$offset",
+          "options": [
+            {
+              "label": "none",
+              "value": null
+            },
+            {
+              "label": "normalize",
+              "value": "normalize"
+            },
+            {
+              "label": "center",
+              "value": "center"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "plot": [
+        {
+          "mark": "densityY",
+          "data": {
+            "from": "penguins"
+          },
+          "x": "bill_depth",
+          "fill": "species",
+          "fillOpacity": 0.4,
+          "bandwidth": "$bandwidth",
+          "normalize": "$normalize",
+          "stack": "$stack",
+          "offset": "$offset"
+        }
+      ],
+      "marginLeft": 50,
+      "height": 200
+    }
+  ]
+}