Skip to content

Instantly share code, notes, and snippets.

@benib
Last active March 14, 2018 13:42
Show Gist options
  • Save benib/6d142b61881211b7e7388d2666b19de1 to your computer and use it in GitHub Desktop.
Save benib/6d142b61881211b7e7388d2666b19de1 to your computer and use it in GitHub Desktop.
Vega Barchart autosize fit-x grid problem
{
"width": 500,
"autosize": {
"type": "fit-x",
"contains": "padding"
},
"signals": [
{
"name": "barWidth",
"value": 24
},
{
"name": "groupHeight",
"update": "(barWidth * 3)"
}
],
"data": [
{
"name": "table",
"values": [
{
"xValue": "A",
"xIndex": 0,
"yValue": 4691,
"cValue": 0
},
{
"xValue": "A",
"xIndex": 0,
"yValue": 4212,
"cValue": 1
},
{
"xValue": "A",
"xIndex": 0,
"yValue": 7097,
"cValue": 2
},
{
"xValue": "B",
"xIndex": 1,
"yValue": 1810,
"cValue": 0
},
{
"xValue": "B",
"xIndex": 1,
"yValue": 7037,
"cValue": 1
},
{
"xValue": "B",
"xIndex": 1,
"yValue": 4239,
"cValue": 2
}
]
}
],
"scales": [
{
"name": "xScale",
"type": "linear",
"range": "width",
"domain": {
"data": "table",
"field": "yValue"
},
"nice": true,
"zero": true
},
{
"name": "yScale",
"type": "band",
"range": {
"step": {
"signal": "groupHeight"
}
},
"domain": {
"data": "table",
"field": "xValue"
},
"paddingInner": 0.1,
"paddingOuter": 0
},
{
"name": "colorScale",
"type": "ordinal",
"range": "category",
"domain": {
"data": "table",
"field": "cValue"
}
}
],
"marks": [
{
"type": "group",
"name": "blocks",
"from": {
"facet": {
"name": "series",
"data": "table",
"groupby": "xValue"
}
},
"encode": {
"enter": {
"y": {
"signal": "scale('yScale', datum.xValue)"
},
"x": {
"value": 0
},
"width": {
"value": 20
},
"height": {
"signal": "bandwidth('yScale')"
}
}
},
"signals": [
{
"name": "height",
"update": "bandwidth('yScale')"
}
],
"marks": [
{
"type": "group",
"encode": {
"enter": {
"y": {
"value": 0
},
"x": {
"value": 0
},
"width": {
"signal": "width"
},
"height": {
"signal": "height"
}
}
},
"scales": [
{
"name": "barPositionBand",
"type": "band",
"range": "height",
"domain": {
"data": "series",
"field": "cValue"
},
"paddingInner": 0.1,
"paddingOuter": 0
}
],
"data": [
{
"name": "xValues",
"source": "series",
"transform": [
{
"type": "aggregate",
"groupby": [
"xValue"
]
}
]
}
],
"marks": [
{
"type": "rect",
"name": "bar",
"from": {
"data": "series"
},
"encode": {
"enter": {
"y": {
"scale": "barPositionBand",
"field": "cValue"
},
"height": {
"signal": "bandwidth('barPositionBand')"
},
"x": {
"scale": "xScale",
"field": "yValue"
},
"x2": {
"value": 0
},
"fill": {
"scale": "colorScale",
"field": "cValue"
}
}
}
}
]
}
]
}
],
"axes": [
{
"orient": "top",
"scale": "xScale",
"domain": false,
"grid": true,
"ticks": true
},
{
"orient": "left",
"scale": "yScale",
"domain": true,
"grid": false,
"labels": true,
"ticks": false
}
]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment