Difference between revisions of "Template:Graph:CategoryPie"

From Public Play Space Community
 
(26 intermediate revisions by the same user not shown)
Line 1: Line 1:
<graph>
<graph>{
{
   "width": 100,
  "version": 2,
   "height": 100,
   "width": 300,
   "height": 300,
   "data": [
   "data": [
     {
     {
      // Data is retrieved from the MediaWiki API.  By default it uses current wiki's "Extension by category"
       "name": "table",
       "name": "table",
       "url": "wikiapi:///?generator=categorymembers&gcmtitle=Category:Extensions+by+category&gcmtype=subcat&action=query&gcmlimit=max&prop=categoryinfo&formatversion=2&format=json",
       "values": [
      // We are only interested in the content of query.pages subelement.
          {"name":"GAME","color":"#2bddff","data":1},
      "format": {"property": "query.pages","type": "json"},
          {"name":"PLAY","color":"#00d67f","data":1},
      "transform": [
          {"name":"SPACE","color":"#0000ff","data":1}
        // sort in descending order using category size as the sort key
      ],
        {"type": "sort","by": "-categoryinfo.size"},
      "transform": [{"type": "pie", "field": "data"}]
        // To visualize, use "pie" transformation to add layout_start, layout_end, and layout_mid fields to each page object
        // These fields contain angles at which to start and stop drawing arcs. First element's start will be 0, and last element's end will be 360 degrees (in radians)
        {"type": "pie","field": "categoryinfo.size"}
      ]
     }
     }
   ],
   ],
  // Scales are like functions -- marks use them to convert a data value into a visual value, like x or y coordinate on the graph, or a color value.
   "scales": [
   "scales": [
     {
     {
       // This scale will be used to assign a color to each slice, using a palette of 10 colors
       "name": "r",
       "name": "color",
       "type": "sqrt",
       "domain": {"data": "table","field": "title"},
       "domain": {"data": "table", "field": "data"},
       "range": "category10",
       "range": [0, 50]
      "type": "ordinal"
     }
     }
   ],
   ],
   "marks": [
   "marks": [
     {
     {
       // This mark draws the actual pie chart from the data source
       "type": "arc",
      // Each element is an arc between layout_start and layout_end angles (as calculated by the pie transformation)
      // drawn with a given radius, stroke, and fill.
       "from": {"data": "table"},
       "from": {"data": "table"},
      "type": "arc",
       "properties": {
       "properties": {
         "enter": {
         "enter": {
           "fill": {"scale": "color","field": "title"},
           "x": {"field": {"group": "width"}, "mult": 0.5},
           "outerRadius": {"value": 200},
           "y": {"field": {"group": "height"}, "mult": 0.5},
           "startAngle": {"field": "layout_start"},
           "startAngle": {"field": "layout_start"},
           "endAngle": {"field": "layout_end"},
           "endAngle": {"field": "layout_end"},
           "stroke": {"value": "white"},
           "innerRadius": {"value": 0},
           "strokeWidth": {"value": 1}
          "outerRadius": {"value": 100}
        },
        "update": {
           "fill": {"field": "color"}
         }
         }
       }
       }
     },
     },
     {
     {
      // This mark draws labels around the pie chart after the pie chart has been drawn
       "type": "text",
       "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"},
       "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 > 2" },
          // Remove namespace from the text - keeps only text after the first ':' symbol, limits to 40 chars.
          { "type": "formula", "field": "title", "expr": "substring(datum.title, 1+indexof(datum.title,':'), 40)" },
          // 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 > 10 ? 14 : 10)" },
          // Make font bold for largest pie slices
          { "type": "formula", "field": "fontWeight", "expr": "datum.sliceSize > 15 ? 'bold' : 'normal'" }
        ]
      },
       "properties": {
       "properties": {
         "enter": {
         "enter": {
           // Use the fields calculated in the transformation to draw category names
           "x": {"field": {"group": "width"}, "mult": 0.5},
           "align": {"field": "align"},
           "y": {"field": {"group": "height"}, "mult": 0.5},
           "angle": {"field": "angle"},
          "radius": {"scale": "r", "field": "data", "offset": 8},
           "angle": {"value": 25},
          "theta": {"field": "layout_mid"},
          "fill": {"value": "white"},
          "align": {"value": "center"},
           "baseline": {"value": "middle"},
           "baseline": {"value": "middle"},
           "fill": {"value": "black"},
           "text": {"field": "name"},
          "fontSize": {"field": "fontSize"},
           "font": {"value": "Bebas Neue Bold"},
           "fontWeight": {"field": "fontWeight"},
           "fontSize": {"value": 25},
           "radius": {"value": 270},
           "fontWeight": {"value": "bold"}
           "text": {"field": "title"},
          "theta": {"field": "layout_mid"}
         }
         }
       }
       }
Line 93: Line 62:
}
}
</graph>
</graph>
<noinclude>
<templatedata>
{
"params": {
"GAME":{
"type": "boolean",
"default": "1",
"required": true,
"suggested": true,
"description": "State whether this type of parameter is used by the project."},
"PLAY":{
"type": "boolean",
"default": "1",
"required": true,
"suggested": true,
"description": "State whether this type of parameter is used by the project."},
"SPACE":{
"type": "boolean",
"default": "1",
"required": true,
"suggested": true,
"description": "State whether this type of parameter is used by the project."}
},
"paramOrder": [
"GAME",
"PLAY",
"SPACE"
],
"description": "Template for selecting a parameter to the pie",
"format": "block"
}
</templatedata>
</noinclude>

Latest revision as of 07:38, 20 May 2020


Template for selecting a parameter to the pie

Template parameters

This template prefers block formatting of parameters.

ParameterDescriptionTypeStatus
GAMEGAME

State whether this type of parameter is used by the project.

Default
1
Booleanrequired
PLAYPLAY

State whether this type of parameter is used by the project.

Default
1
Booleanrequired
SPACESPACE

State whether this type of parameter is used by the project.

Default
1
Booleanrequired
Retrieved from "https://wiki.publicplayspace.eu/index.php?title=Template:Graph:CategoryPie&oldid=648"