Template:Graph:Pie chart

Template documentation

Generic pie chart that uses data from an external data url. The url must return 'label' and 'value' columns, or the column names must be specified using 'valueColumn' and 'labelColumn' params.

Example

See it in Wikidata Query Service

Parameters

No description.

Template parameters[Edit template data]

Parameter		Description	Type	Status
Graph data URL	query	no description Example SELECT... Auto value	String	optional
title	title	What to show as a graph description Auto value	String	optional
width	width	no description Default 300	Number	optional
height	height	no description Default 300	Number	optional
valueColumn	valueColumn	Name of the query result's column that contains value for the pie graph Default value	String	optional
labelColumn	labelColumn	Name of the query result's column that contains label for the pie graph Default label	String	optional
sortby	sortby	default sorting is by value. To override, add sortby=labelColumn	String	optional

See also

{
  "version": 2,
  "width": 300,
  "height": 300,
  "data": [
    {
      // Data is retrieved from the Wikidat Query API (SPARQL).
      "name": "table",
      "url": "wikidatasparql:///?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}
       }
     }
  }]
}