Template:Graph:Pie2
Jump to navigation
Jump to search
Template documentationPie chart
You can add a pie chart with a call to this template.
Examples
Example usage:
| {{Graph:Pie2 | table = Wikimedia/all sites by browser family and major percent.tab |
|---|
|
See or edit source data. |
Template Data
Syntax error in JSON.
<graph>
{
//
// ATTENTION: This code is maintained at https://www.mediawiki.org/wiki/Template:Graph:Pie2
// Please do not modify it anywhere else, as it may get copied and override your changes.
// Suggestions can be made at https://www.mediawiki.org/wiki/Template_talk:Graph:Pie2
//
// Template translation is in https://commons.wikimedia.org/wiki/Data:Original/Template:Graphs.tab
//
"version": 2,
"width": 300, "height": 300, "padding": "strict",
"data": [
{
"name": "table",
"url": "tabular:///Wikimedia/all sites by browser family and major percent.tab",
"format": {"property": "data"}
},
{
"name": "ring1",
"source": "table",
"transform": [
{"type": "aggregate", "groupby": ["browserFamily"], "summarize": {"percent": "sum"} },
{"type": "sort", "by": ["-sum_percent"]},
{"type": "pie","field": "sum_percent"}
]
},
{
"name": "ring2",
"source": "table",
"format": {"property": "data"},
"transform": [
{"type": "lookup", "on": "ring1", "onKey": "browserFamily", "keys": ["browserFamily"], "as": "r1"},
{"type": "sort", "by": ["-r1.sum_percent", "-percent"]},
{"type": "pie","field": "percent"},
]
},
],
"scales": [
{
"name": "color",
"type": "ordinal",
"range": "category10",
"domain": {"data": "ring2", "field": "browserFamily"}
}
],
"marks": [
{
"name": "inner_ring",
"type": "arc",
"from": {
"data": "ring1"
},
"properties": {
"enter": {
"fill": {"scale": "color","field": "browserFamily"},
"fillOpacity": {"value": 0.8},
"stroke": {"value": "white"},
"startAngle": {"field": "layout_start"},
"endAngle": {"field": "layout_end"},
"x": {"signal": "width", "mult": 0.5},
"y": {"signal": "width", "mult": 0.5},
"innerRadius": {"value": 0},
"outerRadius": {"signal": "width", "mult": 0.35}
}
}
},
{
"name": "outer_ring",
"type": "arc",
"from": {
"data": "ring2",
"transform": [
{
"type": "formula",
"field": "opacity",
"expr": "min(max(datum.percent / datum.r1.sum_percent, 0.2), 1)"
}
]
},
"properties": {
"enter": {
"fill": {"scale": "color","field": "browserFamily"},
"fillOpacity": {"field": "opacity"},
"stroke": {"value": "white"},
"strokeWidth": {"value": 0.4},
"startAngle": {"field": "layout_start"},
"endAngle": {"field": "layout_end"},
"x": {"signal": "width", "mult": 0.5},
"y": {"signal": "width", "mult": 0.5},
"innerRadius": {"signal": "width", "mult": 0.35},
"outerRadius": {"signal": "width", "mult": 0.5},
}
}
},
{
// 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": "ring1",
"transform": [
// For each data point (datum), each of these transformations will be ran in order.
// 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 big enough to avoid overcrowding
{ "type": "filter", "test": "datum.sliceSize > 7.5" },
// 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" },
]
},
"properties": {
"enter": {
"x": {"signal": "width", "mult": 0.5},
"y": {"signal": "width", "mult": 0.5},
"align": {"field": "align"},
"angle": {"field": "angle"},
"baseline": {"value": "middle"},
"fill": {"value": "black"},
"radius": {"signal": "width", "mult": 0.35, "offset": -7},
"text": {"field": "browserFamily"},
"theta": {"field": "layout_mid"}
}
}
},
{
"type": "text",
"from": {
"data": "ring2",
"transform": [
{ "type": "formula", "field": "sliceSize", "expr": "(datum.layout_end - datum.layout_start)*180/PI" },
{ "type": "filter", "test": "datum.sliceSize > 5" },
{ "type": "formula", "field": "invert", "expr": "datum.layout_mid*180/PI < 180 ? 1 : -1" },
{ "type": "formula", "field": "align", "expr": "datum.invert > 0 ? 'left' : 'right'" },
{ "type": "formula", "field": "angle", "expr": "(datum.layout_mid*180/PI)-90*datum.invert" },
]
},
"properties": {
"enter": {
"x": {"signal": "width", "mult": 0.5},
"y": {"signal": "width", "mult": 0.5},
"align": {"field": "align"},
"angle": {"field": "angle"},
"baseline": {"value": "middle"},
"fill": {"value": "black"},
"radius": {"signal": "width", "mult": 0.35, "offset": 12},
"text": {"field": "browserMajorVer"},
"theta": {"field": "layout_mid"}
}
}
}
]
}
</graph>