Template:Graph:Pie from row

Template documentation

[view] [edit] [history] [purge]

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.

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 Example bea.gov/GDP by state.tab	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 Example year==2015	String	required
Radius	radius	Specify the radius of the pie in number of pixels Default 100 Example 100	Number	suggested
Legend Title	legend	The title that will appear above the legend, or '-' to hide it Default "Legend" Example "Fruits"	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" ] Default "category10" Example "category10"	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

The above documentation is transcluded from Template:Graph:Pie from row/doc. (edit | history)
Editors can experiment in this template’s sandbox (create | mirror) and testcases (create) pages.
Please add categories to the /doc subpage. Subpages of this template.

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