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

Syntax error in JSON.