vegaEmbed({
width: 200,
height: 225,
data: { values: gapminder },
params: [{ name: "pts", select: { type: "point", on: "mouseover" } }],
transform: [
{ window: [{ op: "row_number", as: "unitC" }], groupby: ["continent"] },
{ calculate: "ceil(datum.unitC/ 8)", as: "unitX" },
{ calculate: "datum.unitC - (datum.unitX - 1) * 8", as: "unitY" }
],
mark: "square",
encoding: {
x: { field: "unitX", type: "N", axis: null },
y: { field: "unitY", type: "N", axis: null, sort: "descending" },
color: { field: "continent", type: "N", legend: null },
column: { field: "continent", type: "N" },
size: { value: 600 },
opacity: {
condition: { param: "pts", value: 1, empty: false },
value: 0.75
},
tooltip: { field: "country", type: "N" }
},
config: { view: { strokeOpacity: 0 } }
})