Open main menu
Documentation icon Template documentation[view] [edit] [history] [purge]

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.

ExampleEdit

See it in Wikidata Query Service

ParametersEdit

No description.

Template parameters

ParameterDescriptionTypeStatus
Graph data URLquery

no description

Example
SELECT...
Auto value
Stringoptional
Titletitle

What to show as a graph description

Auto value
Stringoptional
Widthwidth

no description

Default
300
Numberoptional
Heightheight

no description

Default
300
Numberoptional
ValueColumnvalueColumn

Name of the query result's column that contains value for the pie graph

Default
value
Stringoptional
LabelColumnlabelColumn

Name of the query result's column that contains label for the pie graph

Default
label
Stringoptional
Sortbysortby

default sorting is by value. To override, add sortby=labelColumn

Stringoptional

See alsoEdit

{
  "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}
       }
     }
  }]
}