Template:Graph:Pie chart

{
  "version": 2,
  "width": 300,
  "height": 300,
  "data": [
    {
      // Data is retrieved from the Wikidat Query API (SPARQL).
      "name": "table",
      "url": "snarc-llgc.wikibase.cloud:///?query=SELECT%20%3Flabel%20%3Fvalue%0A%7B%0A%09%7B%09SELECT%20%20%3Fp%20%28COUNT%28DISTINCT%20%3Fn%29%20as%20%3Fvalue%29%0A%09%09%7B%0A%20%20%09%09%09VALUES%20%3Fp3%20%7B%20psv%3AP570%20psv%3AP569%20%7D%0A%20%20%09%09%09%3Fn%20%3Fp3%20%3Fn1%20.%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Fn1%20wikibase%3AtimePrecision%20%3Fp%20.%0A%09%09%7D%0A%09%09GROUP%20BY%20%20%3Fp%0A%09%09ORDER%20BY%20ASC%28%3Fvalue%29%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0A%09%7D%0A%09%3Fitem%20wdt%3AP2803%20%3Fp1%0A%09FILTER%20%28%3Fp%20%3D%20%3Fp1%29%20%20%20%20%20%20%20%20%20%20%0A%09SERVICE%20wikibase%3Alabel%20%7B%20bd%3AserviceParam%20wikibase%3Alanguage%20%22en%22%20.%20%3Fitem%20rdfs%3Alabel%20%3Flabel%20%20%7D%0A%7D",
      "format": { "type": "json" },
      "transform": [
        // sort in descending order using value as the sort key
        {"type": "sort","by": "-value"},
        // To visualize, use "pie" transformation to add layout_start, layout_end, and layout_mid fields to each {label, value} object
        // 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)
        {"type": "pie","field": "value"}
      ]
    }
  ],
  // 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",
      "domain": {"data": "table","field": "label"},
      "range": "category10",
      "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",
      "properties": {
        "enter": {
          "fill": {"scale": "color","field": "label"},
          // Use "width" signal divided by 2 for the outer radius
          "outerRadius": {"signal": "width", "mult": 0.5},
          "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" },
          // 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 ? 13 : (datum.sliceSize > 10 ? 11 : 10)" },
          // Make font bold for largest pie slices 
          { "type": "formula", "field": "fontWeight", "expr": "datum.sliceSize > 15 ? 'bold' : 'normal'" }
        ]
      },
      "properties": {
        "enter": {
          // Use the fields calculated in the transformation to draw category names
          "align": {"field": "align"},
          "angle": {"field": "angle"},
          "baseline": {"value": "middle"},
          "fill": {"value": "black"},
          "fontSize": {"field": "fontSize"},
          "fontWeight": {"field": "fontWeight"},
          "radius": {"signal": "width", "mult": 0.5, "offset": 10},
          "text": {"template": "\u007b{datum.value|number:',d' }\u007d"},
          "theta": {"field": "layout_mid"}
        }
      }
    }
  ],
  // Show legend, using the scale named "color" as the source.
  "legends": [{
    "title": "Dates of birth/death precision",
    "fill": "color",
     "properties": {
       "title": { "fontSize": {"value": 14} },
       "symbols": { "stroke": {"value": "transparent"} },
       "legend": {
         "strokeWidth": {"value": 1.5},
         // Set new position of the legend relative to the center of the graph, using graph's width & height
         "x": {"signal":"width", "mult":0.5, "offset":60},
         "y": {"signal":"height", "mult":-0.5}
       }
     }
  }]
}