chart = vl.markPoint({ "filled": true, size: 200})
.data(data)
.transform(
vl.window(vl.row_number().as("index"))
.groupby(["country", "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")
.scale({ domain: ["cattle", "pigs", "sheep"], range: [ cattlePath, pigPath, sheepPath]})
.legend(null),
vl.color().fieldN("animal").scale({scheme: "set2"}).legend(null),
)
.width(800)
.height(200)
.config({
view: {stroke: null}
})
.render()
data = FileAttachment("animals.csv").csv()
embed({
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"config": {"view": {"stroke": ""}},
"width": 800,
"height": 200,
"data": {
"values": [
{"country": "Great Britain", "animal": "cattle", "col": 3},
{"country": "Great Britain", "animal": "cattle", "col": 2},
{"country": "Great Britain", "animal": "cattle", "col": 1},
{"country": "Great Britain", "animal": "pigs", "col": 2},
{"country": "Great Britain", "animal": "pigs", "col": 1},
{"country": "Great Britain", "animal": "sheep", "col": 10},
{"country": "Great Britain", "animal": "sheep", "col": 9},
{"country": "Great Britain", "animal": "sheep", "col": 8},
{"country": "Great Britain", "animal": "sheep", "col": 7},
{"country": "Great Britain", "animal": "sheep", "col": 6},
{"country": "Great Britain", "animal": "sheep", "col": 5},
{"country": "Great Britain", "animal": "sheep", "col": 4},
{"country": "Great Britain", "animal": "sheep", "col": 3},
{"country": "Great Britain", "animal": "sheep", "col": 2},
{"country": "Great Britain", "animal": "sheep", "col": 1},
{"country": "United States", "animal": "cattle", "col": 9},
{"country": "United States", "animal": "cattle", "col": 8},
{"country": "United States", "animal": "cattle", "col": 7},
{"country": "United States", "animal": "cattle", "col": 6},
{"country": "United States", "animal": "cattle", "col": 5},
{"country": "United States", "animal": "cattle", "col": 4},
{"country": "United States", "animal": "cattle", "col": 3},
{"country": "United States", "animal": "cattle", "col": 2},
{"country": "United States", "animal": "cattle", "col": 1},
{"country": "United States", "animal": "pigs", "col": 6},
{"country": "United States", "animal": "pigs", "col": 5},
{"country": "United States", "animal": "pigs", "col": 4},
{"country": "United States", "animal": "pigs", "col": 3},
{"country": "United States", "animal": "pigs", "col": 2},
{"country": "United States", "animal": "pigs", "col": 1},
{"country": "United States", "animal": "sheep", "col": 7},
{"country": "United States", "animal": "sheep", "col": 6},
{"country": "United States", "animal": "sheep", "col": 5},
{"country": "United States", "animal": "sheep", "col": 4},
{"country": "United States", "animal": "sheep", "col": 3},
{"country": "United States", "animal": "sheep", "col": 2},
{"country": "United States", "animal": "sheep", "col": 1}
]
},
"mark": {"type": "point", "filled": true},
"encoding": {
"x": {"field": "col", "type": "ordinal", "axis": null},
"y": {"field": "animal", "type": "ordinal", "axis": null},
"row": {"field": "country", "header": {"title": ""}},
"shape": {
"field": "animal",
"type": "nominal",
"scale": {
"domain": ["person", "cattle", "pigs", "sheep"],
"range": [
"M1.7 -1.7h-0.8c0.3 -0.2 0.6 -0.5 0.6 -0.9c0 -0.6 -0.4 -1 -1 -1c-0.6 0 -1 0.4 -1 1c0 0.4 0.2 0.7 0.6 0.9h-0.8c-0.4 0 -0.7 0.3 -0.7 0.6v1.9c0 0.3 0.3 0.6 0.6 0.6h0.2c0 0 0 0.1 0 0.1v1.9c0 0.3 0.2 0.6 0.3 0.6h1.3c0.2 0 0.3 -0.3 0.3 -0.6v-1.8c0 0 0 -0.1 0 -0.1h0.2c0.3 0 0.6 -0.3 0.6 -0.6v-2c0.2 -0.3 -0.1 -0.6 -0.4 -0.6z",
"M4 -2c0 0 0.9 -0.7 1.1 -0.8c0.1 -0.1 -0.1 0.5 -0.3 0.7c-0.2 0.2 1.1 1.1 1.1 1.2c0 0.2 -0.2 0.8 -0.4 0.7c-0.1 0 -0.8 -0.3 -1.3 -0.2c-0.5 0.1 -1.3 1.6 -1.5 2c-0.3 0.4 -0.6 0.4 -0.6 0.4c0 0.1 0.3 1.7 0.4 1.8c0.1 0.1 -0.4 0.1 -0.5 0c0 0 -0.6 -1.9 -0.6 -1.9c-0.1 0 -0.3 -0.1 -0.3 -0.1c0 0.1 -0.5 1.4 -0.4 1.6c0.1 0.2 0.1 0.3 0.1 0.3c0 0 -0.4 0 -0.4 0c0 0 -0.2 -0.1 -0.1 -0.3c0 -0.2 0.3 -1.7 0.3 -1.7c0 0 -2.8 -0.9 -2.9 -0.8c-0.2 0.1 -0.4 0.6 -0.4 1c0 0.4 0.5 1.9 0.5 1.9l-0.5 0l-0.6 -2l0 -0.6c0 0 -1 0.8 -1 1c0 0.2 -0.2 1.3 -0.2 1.3c0 0 0.3 0.3 0.2 0.3c0 0 -0.5 0 -0.5 0c0 0 -0.2 -0.2 -0.1 -0.4c0 -0.1 0.2 -1.6 0.2 -1.6c0 0 0.5 -0.4 0.5 -0.5c0 -0.1 0 -2.7 -0.2 -2.7c-0.1 0 -0.4 2 -0.4 2c0 0 0 0.2 -0.2 0.5c-0.1 0.4 -0.2 1.1 -0.2 1.1c0 0 -0.2 -0.1 -0.2 -0.2c0 -0.1 -0.1 -0.7 0 -0.7c0.1 -0.1 0.3 -0.8 0.4 -1.4c0 -0.6 0.2 -1.3 0.4 -1.5c0.1 -0.2 0.6 -0.4 0.6 -0.4z",
"M1.2 -2c0 0 0.7 0 1.2 0.5c0.5 0.5 0.4 0.6 0.5 0.6c0.1 0 0.7 0 0.8 0.1c0.1 0 0.2 0.2 0.2 0.2c0 0 -0.6 0.2 -0.6 0.3c0 0.1 0.4 0.9 0.6 0.9c0.1 0 0.6 0 0.6 0.1c0 0.1 0 0.7 -0.1 0.7c-0.1 0 -1.2 0.4 -1.5 0.5c-0.3 0.1 -1.1 0.5 -1.1 0.7c-0.1 0.2 0.4 1.2 0.4 1.2l-0.4 0c0 0 -0.4 -0.8 -0.4 -0.9c0 -0.1 -0.1 -0.3 -0.1 -0.3l-0.2 0l-0.5 1.3l-0.4 0c0 0 -0.1 -0.4 0 -0.6c0.1 -0.1 0.3 -0.6 0.3 -0.7c0 0 -0.8 0 -1.5 -0.1c-0.7 -0.1 -1.2 -0.3 -1.2 -0.2c0 0.1 -0.4 0.6 -0.5 0.6c0 0 0.3 0.9 0.3 0.9l-0.4 0c0 0 -0.4 -0.5 -0.4 -0.6c0 -0.1 -0.2 -0.6 -0.2 -0.5c0 0 -0.4 0.4 -0.6 0.4c-0.2 0.1 -0.4 0.1 -0.4 0.1c0 0 -0.1 0.6 -0.1 0.6l-0.5 0l0 -1c0 0 0.5 -0.4 0.5 -0.5c0 -0.1 -0.7 -1.2 -0.6 -1.4c0.1 -0.1 0.1 -1.1 0.1 -1.1c0 0 -0.2 0.1 -0.2 0.1c0 0 0 0.9 0 1c0 0.1 -0.2 0.3 -0.3 0.3c-0.1 0 0 -0.5 0 -0.9c0 -0.4 0 -0.4 0.2 -0.6c0.2 -0.2 0.6 -0.3 0.8 -0.8c0.3 -0.5 1 -0.6 1 -0.6z",
"M-4.1 -0.5c0.2 0 0.2 0.2 0.5 0.2c0.3 0 0.3 -0.2 0.5 -0.2c0.2 0 0.2 0.2 0.4 0.2c0.2 0 0.2 -0.2 0.5 -0.2c0.2 0 0.2 0.2 0.4 0.2c0.2 0 0.2 -0.2 0.4 -0.2c0.1 0 0.2 0.2 0.4 0.1c0.2 0 0.2 -0.2 0.4 -0.3c0.1 0 0.1 -0.1 0.4 0c0.3 0 0.3 -0.4 0.6 -0.4c0.3 0 0.6 -0.3 0.7 -0.2c0.1 0.1 1.4 1 1.3 1.4c-0.1 0.4 -0.3 0.3 -0.4 0.3c-0.1 0 -0.5 -0.4 -0.7 -0.2c-0.3 0.2 -0.1 0.4 -0.2 0.6c-0.1 0.1 -0.2 0.2 -0.3 0.4c0 0.2 0.1 0.3 0 0.5c-0.1 0.2 -0.3 0.2 -0.3 0.5c0 0.3 -0.2 0.3 -0.3 0.6c-0.1 0.2 0 0.3 -0.1 0.5c-0.1 0.2 -0.1 0.2 -0.2 0.3c-0.1 0.1 0.3 1.1 0.3 1.1l-0.3 0c0 0 -0.3 -0.9 -0.3 -1c0 -0.1 -0.1 -0.2 -0.3 -0.2c-0.2 0 -0.3 0.1 -0.4 0.4c0 0.3 -0.2 0.8 -0.2 0.8l-0.3 0l0.3 -1c0 0 0.1 -0.6 -0.2 -0.5c-0.3 0.1 -0.2 -0.1 -0.4 -0.1c-0.2 -0.1 -0.3 0.1 -0.4 0c-0.2 -0.1 -0.3 0.1 -0.5 0c-0.2 -0.1 -0.1 0 -0.3 0.3c-0.2 0.3 -0.4 0.3 -0.4 0.3l0.2 1.1l-0.3 0l-0.2 -1.1c0 0 -0.4 -0.6 -0.5 -0.4c-0.1 0.3 -0.1 0.4 -0.3 0.4c-0.1 -0.1 -0.2 1.1 -0.2 1.1l-0.3 0l0.2 -1.1c0 0 -0.3 -0.1 -0.3 -0.5c0 -0.3 0.1 -0.5 0.1 -0.7c0.1 -0.2 -0.1 -1 -0.2 -1.1c-0.1 -0.2 -0.2 -0.8 -0.2 -0.8c0 0 -0.1 -0.5 0.4 -0.8z"
]
},
"legend": null
},
"color": {
"field": "animal",
"type": "nominal",
"legend": null,
"scale": {
"domain": ["person", "cattle", "pigs", "sheep"],
"range": [
"rgb(162,160,152)",
"rgb(194,81,64)",
"rgb(93,93,93)",
"rgb(91,131,149)"
]
}
},
"opacity": {"value": 1},
"size": {"value": 200}
}
})
embed = require("vega-embed@6.17")
import {vl} from "@vega/vega-lite-api-v5"
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.
