Template:Graph:Pie from row
Pie chart
You can add a pie chart with a call to this template.
Examples
Example usage:
{{Graph:Pie from row | table = Bea.gov/GDP by state.tab | rowtest = year==2015 | series = "TX","CA","NY" | show = label | legend = Relative GDP | radius = 125 }} |
{{Graph:Pie from row | table = Bea.gov/GDP by state.tab | rowtest = year==2015 | series = "AL","AK","AZ","AR","CA","CO","CT","DE","DC","FL","GA","HI","ID","IL","IN","IA","KS","KY","LA","ME","MD","MA","MI","MN","MS","MO","MT","NE","NV","NH","NJ","NM","NY","NC","ND","OH","OK","OR","PA","RI","SC","SD","TN","TX","UT","VT","VA","WA","WV","WI","WY" | legend = - | radius = 125 }} |
<graph>
{ // // ATTENTION: This code is maintained at https://www.mediawiki.org/wiki/Template:Graph:Pie_from_row // 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:Pie_from_row // // Template translation is in https://commons.wikimedia.org/wiki/Data:Original/Template:Graphs.tab // "version": 2, "width": 125, "height": 125, "padding": "auto", "legends": [{"title": "Relative GDP","fill": "color"}], "data": [{ "name": "table", "url": "tabular:///Bea.gov/GDP by state.tab", "format": {"type": "json", "property": "data"}, "transform": [ {"type": "filter", "test": "datum.year==2015"}, {"type": "fold", "fields": ["TX","CA","NY"]}, {"type": "pie", "field": "value"} ] }, { "name": "labels", "url": "tabular:///Bea.gov/GDP by state.tab", "format": {"type": "json", "property": "fields"} }], "scales": [{ "name": "color", "type": "ordinal", "range": "category10", "domain": {"data": "table", "field": "key"}, }], "marks": [ { "type": "arc", "from": { "data": "table" }, "properties": { "enter": { "fill": {"field": "key", "scale": "color"}, "stroke": {"value": "white"}, "startAngle": {"field": "layout_start"}, "endAngle": {"field": "layout_end"}, "outerRadius": {"value": 125 }, } } }, { // 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 > 9" }, // Format percentage as a string { "type": "formula", "field": "prcStr", "expr": "format('.0%',datum.sliceSize/360)" }, { "type": "formula", "field": "title", "expr": "datum.key" }, // 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 ? 15 : (datum.sliceSize > 13 ? 12 : 9)" }, // 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": {"value": "center"}, "angle": {"field": "angle"}, "baseline": {"value": "middle"}, "fill": {"value": "black"}, "fontSize": {"field": "fontSize"}, "fontWeight": {"field": "fontWeight"}, "radius": {"value": 125, "offset": -30}, "text": {"field": "title"}, "theta": {"field": "layout_mid"} } } }
] } </graph> See or edit source data. |
<graph>
{ // // ATTENTION: This code is maintained at https://www.mediawiki.org/wiki/Template:Graph:Pie_from_row // 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:Pie_from_row // // Template translation is in https://commons.wikimedia.org/wiki/Data:Original/Template:Graphs.tab // "version": 2, "width": 125, "height": 125, "padding": "auto", "data": [{ "name": "table", "url": "tabular:///Bea.gov/GDP by state.tab", "format": {"type": "json", "property": "data"}, "transform": [ {"type": "filter", "test": "datum.year==2015"}, {"type": "fold", "fields": ["AL","AK","AZ","AR","CA","CO","CT","DE","DC","FL","GA","HI","ID","IL","IN","IA","KS","KY","LA","ME","MD","MA","MI","MN","MS","MO","MT","NE","NV","NH","NJ","NM","NY","NC","ND","OH","OK","OR","PA","RI","SC","SD","TN","TX","UT","VT","VA","WA","WV","WI","WY"]}, {"type": "pie", "field": "value"} ] }, { "name": "labels", "url": "tabular:///Bea.gov/GDP by state.tab", "format": {"type": "json", "property": "fields"} }], "scales": [{ "name": "color", "type": "ordinal", "range": "category10", "domain": {"data": "table", "field": "key"}, }], "marks": [ { "type": "arc", "from": { "data": "table" }, "properties": { "enter": { "fill": {"field": "key", "scale": "color"}, "stroke": {"value": "white"}, "startAngle": {"field": "layout_start"}, "endAngle": {"field": "layout_end"}, "outerRadius": {"value": 125 }, } } }, { // 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 > 9" }, // Format percentage as a string { "type": "formula", "field": "prcStr", "expr": "format('.0%',datum.sliceSize/360)" }, { "type": "formula", "field": "title", "expr": "datum.key+' '+datum.prcStr" }, // 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 ? 15 : (datum.sliceSize > 13 ? 12 : 9)" }, // 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": {"value": "center"}, "angle": {"field": "angle"}, "baseline": {"value": "middle"}, "fill": {"value": "black"}, "fontSize": {"field": "fontSize"}, "fontWeight": {"field": "fontWeight"}, "radius": {"value": 125, "offset": -30}, "text": {"field": "title"}, "theta": {"field": "layout_mid"} } } }
] } </graph> See or edit source data. |
Template Data
This template adds a pie chart to the page using Graph extension
Parameter | Description | Type | Status | |
---|---|---|---|---|
table | table | Data page name on Commons, without the Data: prefix. The table should contain series columns to plot, and the rowtest to select which row to use
| Unknown | required |
series | series | Data page name on Commons, without the Data: prefix. The table should contain xField column, like year or date, and one or more series columns to plot | String | required |
rowtest | rowtest | a condition to select just one row of the data for the display
| String | required |
Radius | radius | Specify the radius of the pie in number of pixels
| Number | suggested |
Legend Title | legend | The title that will appear above the legend, or '-' to hide it
| String | 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" ]
| String | optional |
show | show | Show "label", "value" or "both" inside the pie chart | String | optional |
title | title | Optional title for the graph | String | optional |
debug | debug | no description | Unknown | optional |
<graph>
{
//
// ATTENTION: This code is maintained at https://www.mediawiki.org/wiki/Template:Graph:Pie_from_row
// 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:Pie_from_row
//
// Template translation is in https://commons.wikimedia.org/wiki/Data:Original/Template:Graphs.tab
//
"version": 2,
"width": 100, "height": 100, "padding": "auto",
"legends": [{"title": "Legend","fill": "color"}],
"data": [{
"name": "table",
"url": "tabular:///Bea.gov/GDP by state.tab",
"format": {"type": "json", "property": "data"},
"transform": [
{"type": "fold", "fields": []},
{"type": "pie", "field": "value"}
]
},
{
"name": "labels",
"url": "tabular:///Bea.gov/GDP by state.tab",
"format": {"type": "json", "property": "fields"}
}],
"scales": [{
"name": "color",
"type": "ordinal",
"range": "category10",
"domain": {"data": "table", "field": "key"},
}],
"marks": [
{
"type": "arc",
"from": { "data": "table" },
"properties": {
"enter": {
"fill": {"field": "key", "scale": "color"},
"stroke": {"value": "white"},
"startAngle": {"field": "layout_start"},
"endAngle": {"field": "layout_end"},
"outerRadius": {"value": 100 },
}
}
},
{
// 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 > 9" },
// Format percentage as a string
{ "type": "formula", "field": "prcStr", "expr": "format('.0%',datum.sliceSize/360)" },
{ "type": "formula", "field": "title", "expr": "datum.key+' '+datum.prcStr" },
// 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 ? 15 : (datum.sliceSize > 13 ? 12 : 9)" },
// 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": {"value": "center"},
"angle": {"field": "angle"},
"baseline": {"value": "middle"},
"fill": {"value": "black"},
"fontSize": {"field": "fontSize"},
"fontWeight": {"field": "fontWeight"},
"radius": {"value": 100, "offset": -30},
"text": {"field": "title"},
"theta": {"field": "layout_mid"}
}
}
}
]
}
</graph>