Template:Graph:Pie from row: Difference between revisions

From Bonkipedia
[[mw:]]>Yurik
No edit summary
 
m (1 revision imported: Template documentation pages)
 
(No difference)

Latest revision as of 18:05, 12 November 2022

Template documentation


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

Template parameters

This template prefers inline formatting of parameters.

ParameterDescriptionTypeStatus
tabletable

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

Example
bea.gov/GDP by state.tab
Unknownrequired
seriesseries

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

Stringrequired
rowtestrowtest

a condition to select just one row of the data for the display

Example
year==2015
Stringrequired
Radiusradius

Specify the radius of the pie in number of pixels

Default
100
Example
100
Numbersuggested
Legend Titlelegend

The title that will appear above the legend, or '-' to hide it

Default
"Legend"
Example
"Fruits"
Stringsuggested
The colors of the slicescolors

The colors of the slices, specified as Vega defined rangeliteral. This can also be a list like [ "red", "green" ]

Default
"category10"
Example
"category10"
Stringoptional
showshow

Show "label", "value" or "both" inside the pie chart

Stringoptional
titletitle

Optional title for the graph

Stringoptional
debugdebug

no description

Unknownoptional
<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>