Карта мира: различия между версиями
Перейти к навигации
Перейти к поиску
Метка: визуальный редактор отключён |
|||
| Строка 1: | Строка 1: | ||
<graph> |
<graph> |
||
{ |
{ |
||
| + | "$schema": "https://vega.github.io/schema/vega/v5.json", |
||
| ⚫ | |||
| + | "description": "A basic bar chart example, with value labels shown upon mouse hover.", |
||
| ⚫ | |||
| − | " |
+ | "width": 400, |
| ⚫ | |||
| ⚫ | |||
| + | |||
"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", |
||
| + | {"category": "A", "amount": 28}, |
||
| − | // We are only interested in the content of query.pages subelement. |
||
| − | + | {"category": "B", "amount": 55}, |
|
| − | " |
+ | {"category": "C", "amount": 43}, |
| − | + | {"category": "D", "amount": 91}, |
|
| − | {" |
+ | {"category": "E", "amount": 81}, |
| + | {"category": "F", "amount": 53}, |
||
| − | // To visualize, use "pie" transformation to add layout_start, layout_end, and layout_mid fields to each page object |
||
| + | {"category": "G", "amount": 19}, |
||
| − | // 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) |
||
| − | {" |
+ | {"category": "H", "amount": 87} |
] |
] |
||
} |
} |
||
], |
], |
||
| + | |||
| − | // 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. |
||
| + | "signals": [ |
||
| ⚫ | |||
| ⚫ | |||
| ⚫ | |||
| ⚫ | |||
| ⚫ | |||
| + | {"events": "rect:mouseout", "update": "{}"} |
||
| ⚫ | |||
| + | } |
||
| + | ], |
||
| + | |||
"scales": [ |
"scales": [ |
||
{ |
{ |
||
| ⚫ | |||
| − | // This scale will be used to assign a color to each slice, using a palette of 10 colors |
||
| − | " |
+ | "type": "band", |
| − | "domain": {"data": "table","field": " |
+ | "domain": {"data": "table", "field": "category"}, |
| − | "range": " |
+ | "range": "width", |
| − | " |
+ | "padding": 0.05, |
| ⚫ | |||
| + | }, |
||
| + | { |
||
| + | "name": "yscale", |
||
| ⚫ | |||
| + | "nice": true, |
||
| + | "range": "height" |
||
} |
} |
||
], |
], |
||
| + | |||
| + | "axes": [ |
||
| + | { "orient": "bottom", "scale": "xscale" }, |
||
| + | { "orient": "left", "scale": "yscale" } |
||
| + | ], |
||
| + | |||
"marks": [ |
"marks": [ |
||
{ |
{ |
||
| + | "type": "rect", |
||
| − | // This mark draws the actual pie chart from the data source |
||
| + | "from": {"data":"table"}, |
||
| − | // Each element is an arc between layout_start and layout_end angles (as calculated by the pie transformation) |
||
| + | "encode": { |
||
| − | // drawn with a given radius, stroke, and fill. |
||
| ⚫ | |||
| ⚫ | |||
| ⚫ | |||
"enter": { |
"enter": { |
||
| − | " |
+ | "x": {"scale": "xscale", "field": "category"}, |
| − | " |
+ | "width": {"scale": "xscale", "band": 1}, |
| − | " |
+ | "y": {"scale": "yscale", "field": "amount"}, |
| − | " |
+ | "y2": {"scale": "yscale", "value": 0} |
| − | + | }, |
|
| − | + | "update": { |
|
| + | "fill": {"value": "steelblue"} |
||
| + | }, |
||
| + | "hover": { |
||
| + | "fill": {"value": "red"} |
||
} |
} |
||
} |
} |
||
}, |
}, |
||
{ |
{ |
||
| − | // This mark draws labels around the pie chart after the pie chart has been drawn |
||
"type": "text", |
"type": "text", |
||
| + | "encode": { |
||
| − | // Before drawing, we need to perform a number of calculations to figure out the exact location and orientation of the text |
||
| ⚫ | |||
| ⚫ | |||
| ⚫ | |||
| − | // 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 |
||
| ⚫ | |||
| − | // 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'" } |
||
| ⚫ | |||
| ⚫ | |||
| ⚫ | |||
"enter": { |
"enter": { |
||
| + | "align": {"value": "center"}, |
||
| − | // Use the fields calculated in the transformation to draw category names |
||
| − | " |
+ | "baseline": {"value": "bottom"}, |
| − | " |
+ | "fill": {"value": "#333"} |
| − | + | }, |
|
| − | + | "update": { |
|
| − | " |
+ | "x": {"scale": "xscale", "signal": "tooltip.category", "band": 0.5}, |
| − | " |
+ | "y": {"scale": "yscale", "signal": "tooltip.amount", "offset": -2}, |
| − | " |
+ | "text": {"signal": "tooltip.amount"}, |
| − | " |
+ | "fillOpacity": [ |
| − | " |
+ | {"test": "datum === tooltip", "value": 0}, |
| + | {"value": 1} |
||
| + | ] |
||
} |
} |
||
} |
} |
||