Карта мира: различия между версиями
Перейти к навигации
Перейти к поиску
Строка 1: | Строка 1: | ||
<graph> |
<graph> |
||
{ |
{ |
||
+ | "version": 2, |
||
− | "$schema": "https://vega.github.io/schema/vega/v5.json", |
||
+ | "width": 1, |
||
− | "description": "Interactive map of U.S. airport connections in 2008.", |
||
− | " |
+ | "height": 1, |
− | " |
+ | "data": [ |
− | "padding": {"top": 25, "left": 0, "right": 0, "bottom": 0}, |
||
− | "autosize": "none", |
||
− | |||
− | "signals": [ |
||
− | { |
||
− | "name": "scale", "value": 1200, |
||
− | "bind": {"input": "range", "min": 500, "max": 3000} |
||
− | }, |
||
− | { |
||
− | "name": "translateX", "value": 450, |
||
− | "bind": {"input": "range", "min": -500, "max": 1200} |
||
− | }, |
||
− | { |
||
− | "name": "translateY", "value": 260, |
||
− | "bind": {"input": "range", "min": -300, "max": 700} |
||
− | }, |
||
− | { |
||
− | "name": "shape", "value": "line", |
||
− | "bind": {"input": "radio", "options": ["line", "curve"]} |
||
− | }, |
||
− | { |
||
− | "name": "hover", |
||
− | "value": null, |
||
− | "on": [ |
||
− | {"events": "@cell:mouseover", "update": "datum"}, |
||
− | {"events": "@cell:mouseout", "update": "null"} |
||
− | ] |
||
− | }, |
||
− | { |
||
− | "name": "title", |
||
− | "value": "U.S. Airports, 2008", |
||
− | "update": "hover ? hover.name + ' (' + hover.iata + ')' : 'U.S. Airports, 2008'" |
||
− | }, |
||
− | { |
||
− | "name": "cell_stroke", |
||
− | "value": null, |
||
− | "on": [ |
||
− | {"events": "dblclick", "update": "cell_stroke ? null : 'brown'"}, |
||
− | {"events": "mousedown!", "update": "cell_stroke"} |
||
− | ] |
||
− | } |
||
− | ], |
||
− | |||
− | "data": [ |
||
− | { |
||
− | "name": "states", |
||
− | "url": "data/us-10m.json", |
||
− | "format": {"type": "topojson", "feature": "states"}, |
||
− | "transform": [ |
||
{ |
{ |
||
− | " |
+ | "name": "highlights", |
+ | "values": [{"id":"US","v":"blue"},{"id":"AU","v":"purple"},{"id":"CN","v":"red"},{"id":"BR","v":"pink"},{"id":"DZ","v":"green"}] |
||
− | "projection": "projection" |
||
− | } |
||
− | ] |
||
− | }, |
||
− | { |
||
− | "name": "traffic", |
||
− | "url": "data/flights-airport.csv", |
||
− | "format": {"type": "csv", "parse": "auto"}, |
||
− | "transform": [ |
||
− | { |
||
− | "type": "aggregate", |
||
− | "groupby": ["origin"], |
||
− | "fields": ["count"], "ops": ["sum"], "as": ["flights"] |
||
− | } |
||
− | ] |
||
− | }, |
||
− | { |
||
− | "name": "airports", |
||
− | "url": "data/airports.csv", |
||
− | "format": {"type": "csv","parse": "auto" |
||
− | }, |
||
− | "transform": [ |
||
− | { |
||
− | "type": "lookup", |
||
− | "from": "traffic", "key": "origin", |
||
− | "fields": ["iata"], "as": ["traffic"] |
||
}, |
}, |
||
{ |
{ |
||
− | " |
+ | "name": "countries", |
+ | "url": "https://www.mediawiki.org/wiki/Extension:Graph/Demo/RawData:WorldMap-iso2-json", |
||
− | "expr": "datum.traffic != null" |
||
+ | "format": {"type": "topojson", "feature": "countries"}, |
||
− | }, |
||
− | + | "transform": [ |
|
− | + | { |
|
− | " |
+ | "type": "geopath", |
− | " |
+ | "value": "data", |
− | + | "scale": 80, |
|
− | + | "translate":[0,0], |
|
− | " |
+ | "projection": "equirectangular" |
− | + | }, |
|
− | + | { |
|
− | + | "type": "lookup", |
|
− | + | "keys": [ "id" ], |
|
− | + | "on": "highlights", |
|
− | + | "onKey": "id", |
|
− | " |
+ | "as": [ "zipped" ], |
− | " |
+ | "default": { |
− | " |
+ | "v": "#C0C0C0" |
− | } |
+ | } |
+ | } |
||
+ | ] |
||
} |
} |
||
− | + | ], |
|
− | + | "marks": [ |
|
− | { |
||
− | "name": "routes", |
||
− | "url": "data/flights-airport.csv", |
||
− | "format": {"type": "csv", "parse": "auto"}, |
||
− | "transform": [ |
||
{ |
{ |
||
− | "type": " |
+ | "type": "path", |
− | " |
+ | "from": { |
− | + | "data": "countries" |
|
− | + | }, |
|
− | " |
+ | "properties": { |
− | + | "enter": { |
|
− | + | "path": { |
|
+ | "field": "layout_path" |
||
− | }, |
||
− | + | } |
|
− | + | }, |
|
− | + | "update": { |
|
− | + | "fill": { |
|
+ | "field": "zipped.v" |
||
− | { |
||
− | + | } |
|
− | + | }, |
|
− | + | "hover": { |
|
− | + | "fill": { |
|
+ | "value": "#989898" |
||
− | } |
||
+ | } |
||
− | ], |
||
+ | } |
||
− | |||
+ | } |
||
− | "projections": [ |
||
− | { |
||
− | "name": "projection", |
||
− | "type": "albersUsa", |
||
− | "scale": {"signal": "scale"}, |
||
− | "translate": [{"signal": "translateX"}, {"signal": "translateY"}] |
||
− | } |
||
− | ], |
||
− | |||
− | "scales": [ |
||
− | { |
||
− | "name": "size", |
||
− | "type": "linear", |
||
− | "domain": {"data": "traffic", "field": "flights"}, |
||
− | "range": [16, 1000] |
||
− | } |
||
− | ], |
||
− | |||
− | "marks": [ |
||
− | { |
||
− | "type": "path", |
||
− | "from": {"data": "states"}, |
||
− | "encode": { |
||
− | "enter": { |
||
− | "fill": {"value": "#dedede"}, |
||
− | "stroke": {"value": "white"} |
||
− | }, |
||
− | "update": { |
||
− | "path": {"field": "path"} |
||
− | } |
||
− | } |
||
− | }, |
||
− | { |
||
− | "type": "symbol", |
||
− | "from": {"data": "airports"}, |
||
− | "encode": { |
||
− | "enter": { |
||
− | "size": {"scale": "size", "field": "traffic.flights"}, |
||
− | "fill": {"value": "steelblue"}, |
||
− | "fillOpacity": {"value": 0.8}, |
||
− | "stroke": {"value": "white"}, |
||
− | "strokeWidth": {"value": 1.5} |
||
− | }, |
||
− | "update": { |
||
− | "x": {"field": "x"}, |
||
− | "y": {"field": "y"} |
||
− | } |
||
− | } |
||
− | }, |
||
− | { |
||
− | "type": "path", |
||
− | "name": "cell", |
||
− | "from": {"data": "airports"}, |
||
− | "encode": { |
||
− | "enter": { |
||
− | "fill": {"value": "transparent"}, |
||
− | "strokeWidth": {"value": 0.35} |
||
− | }, |
||
− | "update": { |
||
− | "path": {"field": "path"}, |
||
− | "stroke": {"signal": "cell_stroke"} |
||
− | } |
||
− | } |
||
− | }, |
||
− | { |
||
− | "type": "path", |
||
− | "interactive": false, |
||
− | "from": {"data": "routes"}, |
||
− | "encode": { |
||
− | "enter": { |
||
− | "path": {"field": "path"}, |
||
− | "stroke": {"value": "black"}, |
||
− | "strokeOpacity": {"value": 0.35} |
||
− | } |
||
− | } |
||
− | }, |
||
− | { |
||
− | "type": "text", |
||
− | "interactive": false, |
||
− | "encode": { |
||
− | "enter": { |
||
− | "x": {"value": 895}, |
||
− | "y": {"value": 0}, |
||
− | "fill": {"value": "black"}, |
||
− | "fontSize": {"value": 20}, |
||
− | "align": {"value": "right"} |
||
− | }, |
||
− | "update": { |
||
− | "text": {"signal": "title"} |
||
} |
} |
||
− | + | ] |
|
− | } |
||
− | ] |
||
} |
} |
||
− | |||
</graph> |
</graph> |