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(150)
.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": [
"M5,1 C4,0 2,0 1,1 C0,2 0,4 1,5 C1,6 2,7 3,6 C4,7 5,6 5,5 C6,4 7,3 7,2 C6,1 5,1 5,1 Z",
"M5,1 C4,0 1,0 0,2 C-1,4 0,6 1,5 C2,4 3,6 4,5 C5,4 6,6 7,5 C8,4 7,2 6,1 C5,0 5,1 5,1 Z",
"M5,1 C4,0 2,0 1,1 C0,2 0,4 2,5 C4,6 6,6 8,5 C10,4 10,2 9,1 C8,0 6,0 5,1 Z",
"M 12.079050490242007,9.044014307681284 C 12.053174310106316,9.017945227374186 12.01798380740847,9.00325725718002 11.981250103339379,9.00325725718002 M 11.981250103339377,9.00325725718002 C 10.979161270054728,9.00325725718002 10.263418962637992,8.247419271278266 9.8538643415766,6.7567418609906245 M 9.853864341576601,6.756741860990625 C 9.5392441620141,5.6116864435270974 9.536267987940985,4.447671694931135 9.536267987940985,4.435932341642737 L 9.536267987940985,3.4270368880242064 M 9.536267987940985,3.427036888024206 C 9.53624043077364,1.537359251767792 7.998908736173192,-4.440892098500626e-16 6.109231099916778,-8.881784197001252e-16 M 6.109231099916777,0.0 C 4.219553463660363,0.0 2.682221769059914,1.537359251767792 2.682221769059914,3.4270368880242064 M 2.6822217690599146,3.4270368880242064 L 2.6822217690599146,4.436042570312113 C 2.6822217690599146,4.447644137763791 2.6792455949867997,5.6116864435270974 2.3646254154242974,6.7567418609906245 M 2.3646254154242974,6.756741860990625 C 1.9550707943629058,8.247419271278266 1.2393284869461696,9.003257257180021 0.23723965366152067,9.003257257180021 M 0.23723965366152067,9.00325725718002 C 0.20050594959242934,9.00325725718002 0.16528788972723896,9.017917670206844 0.13943926675889118,9.044014307681284 C 0.11356308662319968,9.070083387988381 0.09917824526981209,9.105411676522946 0.09945381694324862,9.142145380592037 M 0.09945381694324863,9.142145380592037 C 0.09967427428199786,9.16818690373179 0.11020111220727385,9.78464073720934 0.6027854784750964,10.206981883918187 C 0.9873457487557937,10.536703391185013 1.5476105180196316,10.650376706477585 2.267982429550101,10.544970541388109 C 3.5779123792307135,10.353255328178305 3.8845134230962124,10.618382835191603 4.271746738609244,11.269090227677315 C 4.807513186104574,12.16949311346388 5.818530541608566,12.21843464266621 6.10925865708412,12.21843464266621 M 6.109258657084121,12.218434642666208 C 6.431980643845658,12.218434642666208 7.411031685231012,12.16943799912919 7.946770575558999,11.269090227677314 M 7.946770575558998,11.269090227677315 C 8.33400389107203,10.618382835191603 8.640604934937528,10.353255328178305 9.95053488461814,10.544942984220764 C 10.67090679614861,10.650349149310243 11.231171565412447,10.536675834017668 11.615731835693145,10.206954326750843 C 12.108316201960967,9.784613180041994 12.118843039886244,9.168159346564446 12.119063497224992,9.142117823424693 C 12.119311511731086,9.10543923369029 12.104926670377699,9.070110945155726 12.079050490242006,9.044014307681284 M 11.433716745388308,10.0 C 11.112289945491924,10.273835571893894 10.626677542562044,10.365408038976858 9.990410105764408,10.27229237052265 M 9.990410105764408,10.272292370522651 C 8.587502273466306,10.066991473812426 8.169184473189631,10.35645195959017 7.709916722240287,11.128190431049214 M 7.709916722240287,11.128190431049212 C 7.206281931867658,11.974581268842213 6.10925865708412,11.943276326739822 6.10925865708412,11.943276326739822 M 6.109258657084121,11.943276326739822 C 6.109258657084121,11.943276326739822 5.014274612684013,11.978081029094858 4.508545477593267,11.128190431049212 M 4.508545477593266,11.128190431049212 C 4.049277726643922,10.356479516757513 3.6308496976978732,10.066963916645081 2.2280520940691453,10.272319927689994 M 2.2280520940691457,10.272319927689995 C 1.591784657271509,10.365435596144204 1.106172254341631,10.273835571893896 0.7847178972779023,10.000027557167346 M 0.7847178972779024,10.000027557167344 C 0.511405911563538,9.767169493113466 0.42024680199072917,9.450454968832846 0.38998903224739667,9.273565511653926 M 0.3899890322473966,9.273565511653926 C 1.4387321498448526,9.199602074503558 2.2119311511731077,8.356821225632574 2.6316819241516516,6.82494585016617 C 2.955175511598811,5.644314129661984 2.957820999663802,4.484625856338976 2.957793442496458,4.4359874559774255 M 2.9577934424964583,4.4359874559774255 L 2.9577934424964583,3.4270920023588944 C 2.957793442496459,1.689309472500703 4.371503684393273,0.2755716734365441 6.109231099916777,0.27557167343654454 M 6.109231099916777,0.2755716734365441 C 7.846958515440282,0.2755716734365441 9.260668757337093,1.689309472500703 9.260668757337093,3.427036888024207 M 9.260668757337095,3.4270368880242064 L 9.260668757337095,4.435822112973364 C 9.260641200169752,4.484598299171632 9.263286688234743,5.644286572494641 9.586752718514559,6.824918292998827 M 9.586752718514559,6.824918292998826 C 10.006503491493103,8.356793668465233 10.779674935654015,9.199574517336213 11.82841805325147,9.273510397319237 M 11.82841805325147,9.273510397319239 C 11.798132726340793,9.450592754669561 11.706973616767984,9.767224607448151 11.433716745388306,10.0"
]
},
"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.
