Published
Edited
May 14, 2021
4 stars
wvs = FileAttachment("gender_wvs_01.csv").csv()
import { vl } from "@vega/vega-lite-api"
vl.markBar({tooltip: true}) //Indico que geometría usar para representar el dato
.data(dataAmerica2020) //la base de datos
.encode(
vl.y().fieldO("Country").title("País").sort(null), //los campos a graficar: eje y
vl.x().fieldQ("pct").title("% De acuerdo").axis({ format: "%" }), //eje x
//vl.tooltip().fieldN("% Agree"),
vl.color().fieldN("color")
)
.render()
vl.markLine()
.data(wvs.filter(d => d.Continent === "America"))
.encode(
vl.x().fieldT("Year"),
vl.y().fieldQ("pct"),
vl.detail().fieldN("Country"),
vl.color().fieldN("color"),
vl.tooltip().fieldN("Country")
)
.width(width)
.render()
chartAmericaSimple =
{
const hover = vl.selectSingle().nearest(true).on("mousemove").fields("Country").empty("none")
const points = vl.markCircle()
.select(hover)
.encode(
vl.opacity().value(0).if(hover, vl.value(1)),
vl.size().value(1).if(hover, vl.value(200))
)
const lines = vl.markLine({ interpolate: "monotone" })
const plotAmerica =
vl
.data(wvs.filter(d => d.Continent === "America"))
.encode(
vl.x().fieldT("Year").title("Año").axis({ grid: false}),
vl.y().fieldQ("pct").title("% De Acuerdo").axis({ format: "%", grid: false }).scale({domain: [0, 0.5]}),
vl.size().fieldQ("size").legend(null).if(hover, vl.value(4)),
vl.color().fieldN("color").legend(null).if(hover, vl.value("#000000")),
vl.detail().fieldN("Country"),
vl.tooltip(["Country", "WVS Wave", "% Agree"]))
.layer(lines, points)
.width(600)
return plotAmerica.render();
}
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.
