Changes
Jump to navigation
Jump to search
Template:Graph:Pie from row (view source)
Revision as of 19:03, 8 January 2017
, 19:03, 8 January 2017no edit summary
<includeonly>{{#tag:{{#if:{{{debug|}}}|syntaxhighlight|graph}}|</includeonly><noinclude>{{documentation}}<syntaxhighlight lang=html><graph></syntaxhighlight>{{#tag:syntaxhighlight|</noinclude>
{
//
// 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": {{{radius|100}}}, "height": {{{radius|100}}}, "padding": "auto",
{{#ifeq: {{{legend|}}} | - |
| "legends": [{"title": "{{{legend|Legend}}}","fill": "color"}],
}}
"data": [{
"name": "table",
"url": "tabular:///{{{table|Bea.gov/GDP by state.tab}}}",
"format": {"type": "json", "property": "data"},
"transform": [
{{#if:{{{rowtest|}}}| {"type": "filter", "test": "datum.{{{rowtest}}}"}, }}
{"type": "fold", "fields": [{{{series|}}}]},
{"type": "pie", "field": "value"}
]
},
{
"name": "labels",
"url": "tabular:///{{{table|Bea.gov/GDP by state.tab}}}",
"format": {"type": "json", "property": "fields"}
}],
"scales": [{
"name": "color",
"type": "ordinal",
"range": {{{colors|"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": {{{radius|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": {{#switch: {{{show|both}}}
| label= "datum.key"
| value= "datum.prcStr"
| both="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": {{{radius|100}}}, "offset": -30},
"text": {"field": "title"},
"theta": {"field": "layout_mid"}
}
}
}
{{#if:{{{title|}}}|
// Draw title at the top of the graph
, {
"type": "text",
"properties": {
"enter": {
"x": {"signal": "width", "mult": 0.5},
"y": {"signal": "height", "mult": -1, "offset": -5},
"text": {"value": "{{{title}}}"},
"fontWeight": {"value": "bold"},
"align": {"value": "center"},
"baseline": {"value": "bottom"},
"fill": {"value": "#000"}
}
}
}
}}
]
}
<includeonly>}}
<small>{{#invoke:TNT|msg|Original/Template:Graphs.tab|source-table|{{#invoke:TNT|link|{{{table}}}}}}}.</small>
</includeonly><noinclude>|lang=javascript}}<syntaxhighlight lang=html></graph></syntaxhighlight></noinclude>
{
//
// 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": {{{radius|100}}}, "height": {{{radius|100}}}, "padding": "auto",
{{#ifeq: {{{legend|}}} | - |
| "legends": [{"title": "{{{legend|Legend}}}","fill": "color"}],
}}
"data": [{
"name": "table",
"url": "tabular:///{{{table|Bea.gov/GDP by state.tab}}}",
"format": {"type": "json", "property": "data"},
"transform": [
{{#if:{{{rowtest|}}}| {"type": "filter", "test": "datum.{{{rowtest}}}"}, }}
{"type": "fold", "fields": [{{{series|}}}]},
{"type": "pie", "field": "value"}
]
},
{
"name": "labels",
"url": "tabular:///{{{table|Bea.gov/GDP by state.tab}}}",
"format": {"type": "json", "property": "fields"}
}],
"scales": [{
"name": "color",
"type": "ordinal",
"range": {{{colors|"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": {{{radius|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": {{#switch: {{{show|both}}}
| label= "datum.key"
| value= "datum.prcStr"
| both="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": {{{radius|100}}}, "offset": -30},
"text": {"field": "title"},
"theta": {"field": "layout_mid"}
}
}
}
{{#if:{{{title|}}}|
// Draw title at the top of the graph
, {
"type": "text",
"properties": {
"enter": {
"x": {"signal": "width", "mult": 0.5},
"y": {"signal": "height", "mult": -1, "offset": -5},
"text": {"value": "{{{title}}}"},
"fontWeight": {"value": "bold"},
"align": {"value": "center"},
"baseline": {"value": "bottom"},
"fill": {"value": "#000"}
}
}
}
}}
]
}
<includeonly>}}
<small>{{#invoke:TNT|msg|Original/Template:Graphs.tab|source-table|{{#invoke:TNT|link|{{{table}}}}}}}.</small>
</includeonly><noinclude>|lang=javascript}}<syntaxhighlight lang=html></graph></syntaxhighlight></noinclude>