Difference between revisions of "Template:Graph:CategoryPie"

Revision as of 07:27, 19 May 2020

@@ Line 2: / Line 2: @@
 {
    "$schema": "https://vega.github.io/schema/vega/v5.json",
-   "description": "A basic pie chart example.",
+   "description": "A basic bar chart example, with value labels shown upon mouse hover.",
-   "width": 200,
+   "width": 400,
    "height": 200,
-   "autosize": "none",
+   "padding": 5,
-   "signals": [
+   "data": [
      {
-       "name": "startAngle", "value": 0,
+       "name": "table",
-       "bind": {"input": "range", "min": 0, "max": 6.29, "step": 0.01}
+       "values": [
-    },
+        {"category": "A", "amount": 28},
-    {
+        {"category": "B", "amount": 55},
-      "name": "endAngle", "value": 6.29,
+        {"category": "C", "amount": 43},
-      "bind": {"input": "range", "min": 0, "max": 6.29, "step": 0.01}
+        {"category": "D", "amount": 91},
-    },
+        {"category": "E", "amount": 81},
-    {
+        {"category": "F", "amount": 53},
-      "name": "padAngle", "value": 0,
+        {"category": "G", "amount": 19},
-      "bind": {"input": "range", "min": 0, "max": 0.1}
+        {"category": "H", "amount": 87}
-    },
+       ]
-    {
-      "name": "innerRadius", "value": 0,
-      "bind": {"input": "range", "min": 0, "max": 90, "step": 1}
-    },
-    {
-      "name": "cornerRadius", "value": 0,
-      "bind": {"input": "range", "min": 0, "max": 10, "step": 0.5}
-    },
-    {
-      "name": "sort", "value": false,
-       "bind": {"input": "checkbox"}
      }
    ],
-   "data": [
+   "signals": [
      {
-       "name": "table",
+       "name": "tooltip",
-       "values": [
+       "value": {},
-        {"id": 1, "field": 4},
+      "on": [
-        {"id": 2, "field": 6},
+         {"events": "rect:mouseover", "update": "datum"},
-        {"id": 3, "field": 10},
+         {"events": "rect:mouseout",  "update": "{}"}
-         {"id": 4, "field": 3},
-        {"id": 5, "field": 7},
-        {"id": 6, "field": 8}
-      ],
-      "transform": [
-         {
-          "type": "pie",
-          "field": "field",
-          "startAngle": {"signal": "startAngle"},
-          "endAngle": {"signal": "endAngle"},
-          "sort": {"signal": "sort"}
-        }
        ]
      }
@@ Line 59: / Line 36: @@
    "scales": [
      {
-       "name": "color",
+       "name": "xscale",
-       "type": "ordinal",
+       "type": "band",
-       "domain": {"data": "table", "field": "id"},
+       "domain": {"data": "table", "field": "category"},
-       "range": {"scheme": "category20"}
+       "range": "width",
+      "padding": 0.05,
+      "round": true
+    },
+    {
+      "name": "yscale",
+      "domain": {"data": "table", "field": "amount"},
+      "nice": true,
+      "range": "height"
      }
+  ],
+  "axes": [
+    { "orient": "bottom", "scale": "xscale" },
+    { "orient": "left", "scale": "yscale" }
    ],
    "marks": [
      {
-       "type": "arc",
+       "type": "rect",
-       "from": {"data": "table"},
+       "from": {"data":"table"},
        "encode": {
          "enter": {
-           "fill": {"scale": "color", "field": "id"},
+           "x": {"scale": "xscale", "field": "category"},
-           "x": {"signal": "width / 2"},
+           "width": {"scale": "xscale", "band": 1},
-           "y": {"signal": "height / 2"}
+           "y": {"scale": "yscale", "field": "amount"},
+          "y2": {"scale": "yscale", "value": 0}
          },
          "update": {
-           "startAngle": {"field": "startAngle"},
+           "fill": {"value": "steelblue"}
-           "endAngle": {"field": "endAngle"},
+        },
-           "padAngle": {"signal": "padAngle"},
+        "hover": {
-           "innerRadius": {"signal": "innerRadius"},
+          "fill": {"value": "red"}
-           "outerRadius": {"signal": "width / 2"},
+        }
-           "cornerRadius": {"signal": "cornerRadius"}
+      }
+    },
+    {
+      "type": "text",
+      "encode": {
+        "enter": {
+          "align": {"value": "center"},
+           "baseline": {"value": "bottom"},
+           "fill": {"value": "#333"}
+        },
+        "update": {
+          "x": {"scale": "xscale", "signal": "tooltip.category", "band": 0.5},
+           "y": {"scale": "yscale", "signal": "tooltip.amount", "offset": -2},
+           "text": {"signal": "tooltip.amount"},
+           "fillOpacity": [
+            {"test": "datum === tooltip", "value": 0},
+            {"value": 1}
+          ]
          }
        }
@@ Line 88: / Line 96: @@
    ]
 }
 </graph>