Published
Edited
Mar 16, 2019
2 forks
Importers
2 stars
viewof map = embed({
$schema: "https://vega.github.io/schema/vega-lite/v3.json",
width: 1000,
height: 800,
layer: [
{
data: {url: "https://unpkg.com/world-atlas@1.1.4/world/50m.json",
format: {type: "topojson", feature: "countries"}
},
projection: {type :"mercator" },
mark: {
type: "geoshape",
fill: color1,
stroke: "white"
}
},
{
data: {values: data},
projection: {type: "mercator"},
mark: "circle",
encoding: {
"longitude": {
"field": "to_long",
"type": "quantitative"
},
"latitude": {
"field": "to_lat",
"type": "quantitative"
},
"size": {"value": 8},
"color": {"value": color3}
}
},
{
data: {values: data},
projection: {type: "mercator"},
mark: "circle",
encoding: {
"longitude": {
"field": "from_long",
"type": "quantitative"
},
"latitude": {
"field": "from_lat",
"type": "quantitative"
},
"size": {"value": 8},
"color": {"value": color2}
}
},
{
data: {values: data},
projection: {type: "mercator"},
mark: "rule",
encoding: {
"longitude": {
"field": "from_long",
"type": "quantitative"
},
"latitude": {
"field": "from_lat",
"type": "quantitative"
},
"longitude2": {
"field": "to_long",
"type": "quantitative"
},
"latitude2": {
"field": "to_lat",
"type": "quantitative"
},
"color": {value: color4},
"opacity": {value: 0.05},
}
}
]
})
// patch the spec to add the signal for rotation
viewof map2 = embed(vlSpec, {patch: {signals: [{
"name": "rotation",
"value": 0
}]}})
// update the view when the rotation changes
map2.signal('rotation', rotation).run()
vlSpec = ({
$schema: "https://vega.github.io/schema/vega-lite/v3.json",
width: 800,
height: 800,
layer: [
{
data: {url: "https://unpkg.com/world-atlas@1.1.4/world/50m.json",
format: {type: "topojson", feature: "countries"}
},
projection: {
type: "orthographic",
rotate: [{"signal": "rotation"},0,0]
},
mark: {
type: "geoshape",
fill: color1,
stroke: "white"
}
},
{
data: {values: data},
projection: {
type: "orthographic",
rotate: [{"signal": "rotation"},0,0]
},
mark: "circle",
encoding: {
"longitude": {
"field": "to_long",
"type": "quantitative"
},
"latitude": {
"field": "to_lat",
"type": "quantitative"
},
"size": {"value": 8},
"color": {"value": color3}
}
},
{
data: {values: data},
projection: {
type: "orthographic",
rotate: [{"signal": "rotation"},0,0]
},
mark: "circle",
encoding: {
"longitude": {
"field": "from_long",
"type": "quantitative"
},
"latitude": {
"field": "from_lat",
"type": "quantitative"
},
"size": {"value": 8},
"color": {"value": color2}
}
},
{
data: {values: data},
projection: {
type: "orthographic",
rotate: [{"signal": "rotation"},0,0]
},
mark: "rule",
encoding: {
"longitude": {
"field": "from_long",
"type": "quantitative"
},
"latitude": {
"field": "from_lat",
"type": "quantitative"
},
"longitude2": {
"field": "to_long",
"type": "quantitative"
},
"latitude2": {
"field": "to_lat",
"type": "quantitative"
},
"color": {value: color4},
"opacity": {value: 0.05},
}
}
]
})
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
