Infographics & interactive media designer.
Published
Edited
Nov 23, 2020
md`# Highlight`
highlight = {
const selection =
vl.selectSingle()
.on("mouseover")
///
.empty('none')
.nearest(false)
;
///
let barchart = vl.markBar()
.title("Города")
.data(city_humidity)
.select(selection)
///
.transform(
{filter: "datum.osadki_mm>800"}
)
///
.encode(
vl.x().fieldQ("osadki_mm"),
vl.y().fieldN("city").sort("-x"),
////
vl.tooltip().fieldQ("osadki_mm"),
////
vl.color().value("#3d7dff").if(selection , {value: "#1c51bc" } )
///
)
let temps = vl.markBar()
.height(100)
.data(city_humidity)
.select(selection)
.transform(
[
{fold: ["abs_max" , "average" , "abs_min"] , as: ["temp" , "value"]},
{filter: selection}
]
)
.encode(
vl.x().fieldQ("value").title(false),
vl.y().fieldN("temp").title(false),
vl.detail().fieldN("city"),
vl.color().fieldQ("value")
///
.scale({range: ["blue" , "gray" , "orange"]}).legend(true)
////
)
return vl.vconcat(barchart , temps).render()
}
sleep = {
return await FileAttachment("SleepInMammals.csv").csv()
}
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.
