Skip to content

Instantly share code, notes, and snippets.

@ocramz
Created March 1, 2019 15:54
Show Gist options
  • Select an option

  • Save ocramz/21e5cc956f397e934b12939c2af08f71 to your computer and use it in GitHub Desktop.

Select an option

Save ocramz/21e5cc956f397e934b12939c2af08f71 to your computer and use it in GitHub Desktop.
Multiple histograms in `vega`, colour-coded by a feature
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"width": 200,
"height": 200,
"padding": 5,
"data": [
{
"name": "d1",
"values": [
{"a": 0, "c": "2.5", "z": 0},
{"a": 1, "c": "6.5", "z": 0},
{"a": 2, "c": "15.2", "z": 0},
{"a": 3, "c": "12", "z": 0},
{"a": 4, "c": "6", "z": 0},
{"a": 2, "c": "8.5", "z": 1},
{"a": 3, "c": "17.2", "z": 1},
{"a": 4, "c": "13", "z": 1},
{"a": 5, "c": "4", "z": 1}
]
}
],
"scales": [
{
"name": "dom",
"type": "band",
"domain": {"data": "d1", "field": "a"},
"range": "width",
"padding": 0.0
},
{
"name": "scy",
"type": "linear",
"domain": {"data": "d1", "field": "c"},
"range": "height",
"zero": true
},
{
"name": "colours",
"type": "ordinal",
"domain": {"data": "d1", "field": "z"},
"range": ["#ff0000", "#0000ff"]
}
],
"axes": [
{
"orient": "bottom",
"scale": "dom",
"title": "a",
"offset": 0,
"tickMinStep": 5
},
{
"orient": "left",
"scale": "scy",
"title": "c",
"offset": 10,
"tickMinStep": 5
}
],
"marks": [
{
"type": "group",
"marks": [
{
"type": "rect",
"from": {"data": "d1"},
"encode": {
"enter": {
"fill": {"scale" : "colours", "field" : "z"},
"x": {"scale": "dom", "field": "a"},
"width": {"scale": "dom", "band": 1},
"y": {"scale": "scy", "value": 0},
"y2": {"scale": "scy", "field": "c"},
"fillOpacity": {"value": 0.3}
}
}
}
]
}
]
}
@ocramz
Copy link
Copy Markdown
Author

ocramz commented Mar 1, 2019

image

rendered

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment