Difference between revisions of "Template:Graph:CategoryPie"

Revision as of 07:59, 19 May 2020

@@ Line 1: / Line 1: @@
- <graph>
+<graph>
 {
-   "description": "A basic pie chart example.",
+   "version": 2,
-   "width": 200,
+   "width": 300,
-   "height": 200,
+   "height": 300,
-  "autosize": "none",
    "data": [
      {
+      // Data is retrieved from the MediaWiki API.  By default it uses current wiki's "Extension by category"
        "name": "table",
-       "values": [
+       "url": "wikiapi:///?generator=categorymembers&gcmtitle=Category:Extensions+by+category&gcmtype=subcat&action=query&gcmlimit=max&prop=categoryinfo&formatversion=2&format=json",
-        {"id": 1, "field": 4},
+      // We are only interested in the content of query.pages subelement.
-        {"id": 2, "field": 6},
+      "format": {"property": "query.pages","type": "json"},
-        {"id": 3, "field": 10},
-        {"id": 4, "field": 3},
-        {"id": 5, "field": 7},
-        {"id": 6, "field": 8}
-      ],
        "transform": [
-         {
+        // sort in descending order using category size as the sort key
-          "type": "pie",
+         {"type": "sort","by": "-categoryinfo.size"},
-          "field": "field",
+        // To visualize, use "pie" transformation to add layout_start, layout_end, and layout_mid fields to each page object
-          "startAngle": 0,
+        // These fields contain angles at which to start and stop drawing arcs. First element's start will be 0, and last element's end will be 360 degrees (in radians)
-          "endAngle": 6.29,
+        {"type": "pie","field": "categoryinfo.size"}
-          "sort":true
-        }
        ]
      }
    ],
+  // Scales are like functions -- marks use them to convert a data value into a visual value, like x or y coordinate on the graph, or a color value.
    "scales": [
      {
+      // This scale will be used to assign a color to each slice, using a palette of 10 colors
        "name": "color",
-      "type": "ordinal",
+       "domain": {"data": "table","field": "title"},
-       "domain": {"data": "table", "field": "id"},
+       "range": "category10",
-       "range": {"scheme": "category20"}
+      "type": "ordinal"
      }
    ],
    "marks": [
      {
+      // This mark draws the actual pie chart from the data source
+      // Each element is an arc between layout_start and layout_end angles (as calculated by the pie transformation)
+      // drawn with a given radius, stroke, and fill.
+      "from": {"data": "table"},
        "type": "arc",
-       "from": {"data": "table"},
+      "properties": {
-       "encode": {
+        "enter": {
+          "fill": {"scale": "color","field": "title"},
+          "outerRadius": {"value": 200},
+          "startAngle": {"field": "layout_start"},
+          "endAngle": {"field": "layout_end"},
+          "stroke": {"value": "white"},
+          "strokeWidth": {"value": 1}
+        }
+      }
+    },
+    {
+      // This mark draws labels around the pie chart after the pie chart has been drawn
+      "type": "text",
+      // Before drawing, we need to perform a number of calculations to figure out the exact location and orientation of the text
+       "from": {
+        "data": "table",
+        "transform": [
+          // For each data point (datum), each of these transformations will be ran in order.
+          // Formula transformation evaluates the expression and assigns result to the datapoint
+          // Size of the pie slice, in degrees:  sliceSize = (end - start) * 180 / Pi
+          { "type": "formula", "field": "sliceSize", "expr": "(datum.layout_end - datum.layout_start)*180/PI" },
+          // Draw text only if the slice of the arc is more than 2 degrees to avoid overcrowding
+          { "type": "filter", "test": "datum.sliceSize > 2" },
+          // Remove namespace from the text - keeps only text after the first ':' symbol, limits to 40 chars.
+          { "type": "formula", "field": "title", "expr": "substring(datum.title, 1+indexof(datum.title,':'), 40)" },
+          // Determine the side of the pie chart we are on - left or right.
+          { "type": "formula", "field": "invert", "expr": "datum.layout_mid*180/PI < 180 ? 1 : -1" },
+          // If on the left, the text should be right-aligned (go from the rim inward)
+          { "type": "formula", "field": "align", "expr": "datum.invert < 0 ? 'left' : 'right'" },
+          // At what angle should the text be drawn relative to the point on the circle
+          { "type": "formula", "field": "angle", "expr": "(datum.layout_mid*180/PI)-90*datum.invert" },
+          // Make font smaller for smaller pie slices
+          { "type": "formula", "field": "fontSize", "expr": "datum.sliceSize > 20 ? 15 : (datum.sliceSize > 10 ? 14 : 10)" },
+          // Make font bold for largest pie slices
+          { "type": "formula", "field": "fontWeight", "expr": "datum.sliceSize > 15 ? 'bold' : 'normal'" }
+        ]
+      },
+       "properties": {
          "enter": {
-           "fill": {"scale": "color", "field": "id"},
+          // Use the fields calculated in the transformation to draw category names
-           "x": {"signal": "width / 2"},
+           "align": {"field": "align"},
-           "y": {"signal": "height / 2"}
+           "angle": {"field": "angle"},
-        },
+           "baseline": {"value": "middle"},
-        "update": {
+           "fill": {"value": "black"},
-           "startAngle": {"field": "startAngle"},
+           "fontSize": {"field": "fontSize"},
-           "endAngle": {"field": "endAngle"},
+           "fontWeight": {"field": "fontWeight"},
-           "padAngle": {"signal": "padAngle"},
+           "radius": {"value": 270},
-           "innerRadius": {"signal": "innerRadius"},
+           "text": {"field": "title"},
-           "outerRadius": {"signal": "width / 2"},
+           "theta": {"field": "layout_mid"}
-           "cornerRadius": {"signal": "cornerRadius"}
          }
        }
@@ Line 60: / Line 92: @@
    ]
 }
- </graph>
+</graph>
-{{Graph:PieChart|legend=Fruits|radius=125|values= [
-      {"x": "Peaches","y": 100},
-      {"x": "Plums","y": 32},
-      {"x": "Blueberries","y": 80},
-      {"x": "Strawberries","y": 46},
-      {"x": "Bananas","y": 41}
-    ]
-}}