Untitled / François Semecurbe Marouchi

import { vl } from "@vega/vega-lite-api"

data = [

{"country": "Great Britain", "animal": "pigs"},

{"country": "Great Britain", "animal": "cattle"},

{"country": "Great Britain", "animal": "sheep"},

{"country": "United States", "animal": "pigs"},

{"country": "United States", "animal": "cattle"},

{"country": "United States", "animal": "sheep"},

{"country": "United States", "animal": "sheep"}

]

chart = vl.markPoint({ "filled": true, size: 200})

.data(data)

.transform(

vl.window(vl.row_number().as("index"))

.groupby(["country", "animal"])

.calculate("{'cattle': '🐄', 'pigs': '🐖', 'sheep': '🐏'}[datum.animal]")// Compute an index that restarts by each group

)

.encode(

vl.row().fieldN("country").header({title: ""}),

vl.x().fieldN("index").axis(null),

vl.y().fieldN("animal").axis(null),

// The key is to use a custom scale for the shapes

vl.shape().fieldN("animal")

.legend(null),

vl.color().fieldN("animal").scale({scheme: "set2"}).legend(null),

)

.width(800)

.height(200)

.config({

view: {stroke: null}

})

.render()

{

"$schema": "https://vega.github.io/schema/vega-lite/v5.json",

"config": {"view": {"stroke": ""}},

"width": 800,

"height": 200,

"data": {

"values": [

},

"transform": [

{

"calculate": "{'cattle': '🐄', 'pigs': '🐖', 'sheep': '🐏'}[datum.animal]",

"as": "emoji"

},

{"window": [{"op": "rank", "as": "rank"}], "groupby": ["country", "animal"]}

],

"mark": {"type": "text", "baseline": "middle"},

"encoding": {

"x": {"field": "rank", "type": "ordinal", "axis": null},

"y": {"field": "animal", "type": "nominal", "axis": null, "sort": null},

"row": {"field": "country", "header": {"title": ""}},

"text": {"field": "emoji", "type": "nominal"},

"size": {"value": 65}

}

Purpose-built for displays of data