Infographics & interactive media designer.
Published
Edited
Nov 23, 2020
1 fork
2 stars
md`# Map`
rmap = {
///selection
const selection =
vl.selectSingle()
.on("mouseover")
.empty("all")
.nearest(true)
//
const ru_map = vl.markGeoshape()
.width(600)
.height(400)
.data(russia.features)
.encode(
vl.color().value("#dbdcdd")
)
const cities = vl.markCircle()
.data(city_humidity)
.select(selection)
.encode(
vl.size().fieldQ("osadki_mm").title("Осадки, мм"),
vl.tooltip().fieldN("city"),
vl.longitude().fieldQ("Longitude"),
vl.latitude().fieldQ("Latitude"),
vl.color().value("gray").if(selection , {value: "#1c51bc"})
)
return vl.layer(ru_map , cities)
.view({stroke: "transparent"})
.project(
vl.projection("Albers") // Mercator ,
.parallels([52,64])
.rotate([-105 , 0 ])
.center([-10,65])
).render()
}
russia
import {russia} from "@glebtr/lesson-9"
import {city_humidity} from "@glebtr/lesson-9"
import {vl} from '@vega/vega-lite-api'
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.
