Карта мира: различия между версиями

Перейти к навигации Перейти к поиску

Карта мира (посмотреть исходный код)

Версия от 15:39, 7 ноября 2022

2295 байт убрано ,  15:39, 7 ноября 2022
нет описания правки
<graph>
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"version": 2,▼
"description": "A basic bar chart example, with value labels shown upon mouse hover.",
"width": 300,▼
"heightwidth": 300400,
▲ "widthheight": 300200,
▲ "versionpadding": 25,
 
"data": [
{
// Data is retrieved from the MediaWiki API. By default it uses current wiki's "Extension by category"
"name": "table",
"fromvalues": {[▼
"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.
"format": {"propertycategory": "query.pagesB", "typeamount": "json"55},
{"category": "C", "transformamount": [43},
// sort in descending order using {"category": size as the"D", sort"amount": key91},
{"typecategory": "sortE", "byamount": "-categoryinfo.size"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)
{"typecategory": "pieH", "fieldamount": "categoryinfo.size"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": [
},{▼
"typename": "arctooltip",▼
"propertiesvalue": {},▼
"transformon": [▼
{ "typeevents": "filterrect:mouseover", "testupdate": "datum.sliceSize > 2" },▼
{"events": "rect:mouseout", "update": "{}"}
]▼
}
],
 
"scales": [
{
"dataname": "tablexscale",▼
// This scale will be used to assign a color to each slice, using a palette of 10 colors
"nametype": "colorband",
"domain": {"data": "table", "field": "titlecategory"},
"range": "category10width",
"typepadding": "ordinal"0.05,
"propertiesround": {true▼
},
{
"name": "yscale",
"fromdomain": {"data": "table", "field": "amount"},▼
"nice": true,
"range": "height"
}
],
 
"axes": [
{ "orient": "bottom", "scale": "xscale" },
{ "orient": "left", "scale": "yscale" }
],
 
"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.
▲ "from": {"data": "table"},
▲ "type": "arc",
▲ "properties": {
"enter": {
"fillx": {"scale": "colorxscale", "field": "titlecategory"},
"outerRadiuswidth": {"valuescale": 200"xscale", "band": 1},
"startAngley": {"scale": "yscale", "field": "layout_startamount"},
"endAngley2": {"fieldscale": "layout_endyscale"}, "value": 0}
"stroke": {"value": "white"},
"strokeWidthupdate": {"value": 1}
"fill": {"value": "steelblue"}
},
"hover": {
"fill": {"value": "red"}
}
}
},
{
// This mark draws labels around the pie chart after the pie chart has been drawn
"type": "text",
"encode": {
// 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": {
"align": {"value": "center"},
// Use the fields calculated in the transformation to draw category names
"alignbaseline": {"fieldvalue": "alignbottom"},
"anglefill": {"fieldvalue": "angle#333"},
"baseline": {"value": "middle"},
"fillupdate": {"value": "black"},
"fontSizex": {"fieldscale": "fontSizexscale", "signal": "tooltip.category", "band": 0.5},
"fontWeighty": {"fieldscale": "fontWeightyscale", "signal": "tooltip.amount", "offset": -2},
"radiustext": {"valuesignal": 270"tooltip.amount"},
"textfillOpacity": {"field": "title"},[
{"thetatest": {"fielddatum === tooltip":, "layout_midvalue": 0},
{"value": 1}
]
}
}
Источник — https://wiki.energogroup.org/mediawiki/index.php/Служебная:Сравнение_версий/2431

Навигация