spec = ({
width: output_size,
height: output_size,
data: {values: imagePixel},
mark: "rect",
transform: [
{window: [{op: "row_number", as: "index"}]},
{calculate: "ceil(datum.index/4)", as: "pixel" },
{calculate: `ceil(datum.pixel/${input_size})`, as: "Y" },
{calculate: `datum.pixel - (datum.Y - 1) * ${input_size}`, as: "X"},
{window: [
{op: "nth_value", param: 1, field: "data", as: "red"},
{op: "nth_value", param: 2, field: "data", as: "green"},
{op: "nth_value", param: 3, field: "data", as: "blue"},
{op: "nth_value", param: 4, field: "data", as: "alpha"}
], groupby: ["pixel"]},
{filter: "datum.alpha !== null"},
{calculate: "rgb(datum.red, datum.green, datum.blue)", as: "color"}
],
encoding: {
x: {field: "X", type: 'ordinal', axis: {labelAngle: 0}, scale: {padding: 0}},
y: {field: "Y", type: 'ordinal', scale: {padding: 0}},
color: {field: "color", type: "nominal", scale: null},
tooltip: [
{field: "X", type: "ordinal"},
{field: "Y", type: "ordinal"},
{field: "color", type: "nominal"}
]
}
})