Template:Graph:Pie2/doc

Pie 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 | field1 = browserFamily | field2 = browserMajorVer | value = percent | width = 300 }}

<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> See or edit source data.

Template Data

This template adds a pie chart to the page using Graph extension

Template parameters

This template prefers inline formatting of parameters.

Parameter		Description	Type	Status
table	table	Data page name on Commons, without the Data: prefix. The table should contain at least three columns - major group, minor group, and numeric value Example Wikimedia/all sites by browser family and major percent.tab	Unknown	required
field1	field1	Id of the column shown as the inner circle Example browserFamily	Unknown	required
field2	field2	Id of the column shown as the outer circle Example browserMajorVer	Unknown	required
value	value	Id of the column with the numeric value Example percent	Unknown	required
width	width	Specify the width of the pie in number of pixels Default 300	Number	suggested
The colors of the slices	colors	The colors of the slices, specified as Vega defined rangeliteral. This can also be a list like [ "red", "green" ] Default "category10" Example "category10"	String	optional
innerportion	innerportion	Portion of the radius shown for the inner circle. Must be between 0 and 0.5 Default 0.35 Example 0.25	Number	optional
debug	debug	no description	Unknown	optional