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

Материал из wiki.energogroup.org
Перейти к навигации Перейти к поиску
 
(не показано 5 промежуточных версий этого же участника)
Строка 1: Строка 1:
 
<graph>
  
<graph>
  +
⚫
{
  
 
"version": 2,
  
"version": 2,
−
"width": 300,
 +
"width": 1,
−
"height": 300,
 +
"height": 1,
−
"data": [
 +
"data": [
−
{
 +
"values": [
  +
{"a": "C", "b": 2}, {"a": "C", "b": 7}, {"a": "C", "b": 4},
−
// Data is retrieved from the MediaWiki API. By default it uses current wiki's "Extension by category"
  
  +
{"a": "D", "b": 1}, {"a": "D", "b": 2}, {"a": "D", "b": 6},
⚫
"name": "table",
  
  +
{"a": "E", "b": 8}, {"a": "E", "b": 4}, {"a": "E", "b": 7}
−
"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": [
 +
"mark": "point",
  +
"encoding": {
−
// sort in descending order using category size as the sort key
  
−
{"type": "sort","by": "-categoryinfo.size"},
 +
"x": {"field": "a", "type": "nominal"},
  +
"y": {"field": "b", "type": "quantitative"}
−
// 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)
  
  +
</graph>
−
{"type": "pie","field": "categoryinfo.size"}
  
  +
<graph>
−
]
  
  ⚫
{
⚫
}
  
  +
"version": 2,
⚫
],
  
  ⚫
"width": 1,
−
// 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": [
 +
"height": 1,
−
{
 +
"data": [
  ⚫
{
−
// This scale will be used to assign a color to each slice, using a palette of 10 colors
  
−
"name": "color",
 +
"name": "highlights",
  +
"values": [{"id":"US","v":"blue"},{"id":"AU","v":"purple"},{"id":"CN","v":"red"},{"id":"BR","v":"pink"},{"id":"DZ","v":"green"}]
−
"domain": {"data": "table","field": "title"},
  
−
"range": "category10",
 +
},
−
"type": "ordinal"
 +
{
  ⚫
"name": "countries",
−
}
  
  +
"url": "wikiraw:///Extension:Graph/Demo/RawData:WorldMap-iso2-json",
−
],
  
  ⚫
"format": {"type": "topojson", "feature": "countries"},
−
"marks": [
  
  +
"transform": [
−
{
  
−
// This mark draws the actual pie chart from the data source
 +
{
  +
"type": "geopath",
−
// Each element is an arc between layout_start and layout_end angles (as calculated by the pie transformation)
  
  ⚫
"value": "data",
−
// drawn with a given radius, stroke, and fill.
  
−
"from": {"data": "table"},
 +
"scale": 80,
−
"type": "arc",
 +
"translate":[0,0],
  +
"projection": "equirectangular"
−
"properties": {
  
−
"enter": {
 +
},
−
"fill": {"scale": "color","field": "title"},
 +
{
−
"outerRadius": {"value": 200},
 +
"type": "lookup",
−
"startAngle": {"field": "layout_start"},
 +
"keys": [ "id" ],
−
"endAngle": {"field": "layout_end"},
 +
"on": "highlights",
−
"stroke": {"value": "white"},
 +
"onKey": "id",
−
"strokeWidth": {"value": 1}
 +
"as": [ "zipped" ],
  +
"default": {
  +
"v": "#C0C0C0"
  +
}
  +
}
  ⚫
]
 
}
  
}
−
}
 +
],
−
},
 +
"marks": [
−
{
 +
{
  ⚫
"type": "path",
−
// This mark draws labels around the pie chart after the pie chart has been drawn
  
−
"type": "text",
 +
"from": {
  +
"data": "countries"
−
// Before drawing, we need to perform a number of calculations to figure out the exact location and orientation of the text
  
−
"from": {
 +
},
−
"data": "table",
 +
"properties": {
−
"transform": [
 +
"enter": {
−
// For each data point (datum), each of these transformations will be ran in order.
 +
"path": {
  +
"field": "layout_path"
−
// 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" },
  
  +
"update": {
−
// Draw text only if the slice of the arc is more than 2 degrees to avoid overcrowding
  
−
{ "type": "filter", "test": "datum.sliceSize > 2" },
 +
"fill": {
−
// Remove namespace from the text - keeps only text after the first ':' symbol, limits to 40 chars.
 +
"field": "zipped.v"
  +
}
−
{ "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.
 +
},
  +
"hover": {
−
{ "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)
 +
"fill": {
−
{ "type": "formula", "field": "align", "expr": "datum.invert < 0 ? 'left' : 'right'" },
 +
"value": "#989898"
−
// 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"}
  
 
}
  
}
−
}
 +
]
−
}
  
−
]
  
 
}
  
}
   

Текущая версия от 17:24, 7 ноября 2022

Синтаксическая ошибка

Источник — https://wiki.energogroup.org/mediawiki/index.php?title=Карта_мира&oldid=2436