|
|
Zeile 17: |
Zeile 17: |
| }} | | }} |
|
| |
|
| <graph>
| | {{Graph:Chart|width=400|height=100|xAxisTitle=X|yAxisTitle=Y |
| | | |type=rect|x=1,2,3,4,5,6,7,8|y=10,12,6,14,2,10,7,9}} |
| { | | {{Graph:Chart|width=100|height=100|type=pie|legend=<translate><!--T:75--> Legend</translate> |
| "version": 2,
| | |x=A,B,C,D,E,F,G,H,I|y1=100,200,150,300,100,100,150,50,200 |
| "width": 300,
| | |y2=7,8,9,8,8,9,10,9,5|showValues=}} |
| "height": 300,
| | {{Graph:Chart|width=400|height=100|xAxisTitle=X|yAxisTitle=Y |
| "data": [
| | |legend=<translate><!--T:76--> Legend</translate>|type=stackedarea|x=1,2,3,4,5,6|y1=10,12,6,14,2,10 |
| {
| | |y2=2,4,6,8,13,11|interpolate=monotone|colors=seagreen,orchid}} |
| // Data is retrieved from the MediaWiki API. By default it uses current wiki's "Extension by category"
| |
| "name": "table",
| |
| "url": "wikiapi:///?generator=categorymembers&gcmtitle=Category:Extensions+by+category&gcmtype=subcat&action=query&gcmlimit=max&prop=categoryinfo&formatversion=2&format=json",
| |
| // We are only interested in the content of query.pages subelement.
| |
| "format": {"property": "query.pages","type": "json"},
| |
| "transform": [
| |
| // sort in descending order using category size as the sort key
| |
| {"type": "sort","by": "-categoryinfo.size"},
| |
| // 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": [
| |
| {
| |
| // This scale will be used to assign a color to each slice, using a palette of 10 colors
| |
| "name": "color",
| |
| "domain": {"data": "table","field": "title"},
| |
| "range": "category10",
| |
| "type": "ordinal"
| |
| }
| |
| ],
| |
| "marks": [
| |
| {
| |
| // This mark draws the actual pie chart from the data source
| |
| // 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"},
| |
| "type": "arc",
| |
| "properties": {
| |
| "enter": {
| |
| "fill": {"scale": "color","field": "title"},
| |
| "outerRadius": {"value": 200},
| |
| "startAngle": {"field": "layout_start"},
| |
| "endAngle": {"field": "layout_end"},
| |
| "stroke": {"value": "white"},
| |
| "strokeWidth": {"value": 1}
| |
| }
| |
| }
| |
| },
| |
| {
| |
| // 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 > 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": {
| |
| "enter": {
| |
| // Use the fields calculated in the transformation to draw category names
| |
| "align": {"field": "align"},
| |
| "angle": {"field": "angle"},
| |
| "baseline": {"value": "middle"},
| |
| "fill": {"value": "black"},
| |
| "fontSize": {"field": "fontSize"},
| |
| "fontWeight": {"field": "fontWeight"},
| |
| "radius": {"value": 270},
| |
| "text": {"field": "title"},
| |
| "theta": {"field": "layout_mid"}
| |
| }
| |
| }
| |
| }
| |
| ]
| |
| } | |
| </graph>
| |