Published
Edited
Mar 16, 2019
4 forks
8 stars
// Read data
data = d3.csv("https://vda-lab.github.io/assets/flights.csv")
.then(
data => {
data.forEach( d => {
d.from_long = +d.from_long;
d.from_lat = +d.from_lat;
d.to_long = +d.to_long;
d.to_lat = +d.to_lat;
d.distance = +d.distance
})
return data;
}
)
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"
/* for orthographic projection (change other projection to0)
type: "orthographic", rotate: [{"signal": "rotation"},0,0]
*/
},
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},
}
}
]
})
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},
}
}
]
})
// update the view when the rotation changes
map2.signal('rotation', rotation).run()
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.
