javascriptvega-litevegavega-lite-api
Scaling x-axis to fit the box in vega lite
I tried line chart and bar chart stacked one above other in VegaLite. Initially, I tried in VegaLite API as follows:
const d_pdf_plot = vl.markBar({ color: '#4c78a8' }) //'#007ddc'
.data(data1)
.encode(
vl.y()
.fieldQ('num'),
vl.x()
.fieldQ('d')
//.scale({ "domain": [0, 360] }) // does not change render
//.scale({ "domain": [0, 600] }) // reflects in render
.bin({ 'binned': true, 'step': data1[1]['num']}),
).width(500).height(250);
const d_cdf_plot = vl.markLine({ color: '#FF8223' })
.data(data2)
.encode(
vl.x()
.fieldQ('d'),
vl.y()
.fieldQ('cum_num')
).width(500).height(250);
const plot = vl.layer(
vl.layer(d_pdf_plot),
vl.layer(d_cdf_plot, d_cdf_plot.markCircle({ color: '#FF8223', opacity: 100 }))
)
return plot.render();
It rendered following:
You can view this in action in this observable notebook.
I also converted this visualization to corresponding VegaLite grammar:
{
"layer": [
{
"layer": [
{
"mark": {
"type": "bar",
"color": "#4c78a8"
},
"data": {
"values": []
},
"encoding": {
"y": {
"field": "num",
"type": "quantitative"
},
"x": {
"field": "d",
"type": "quantitative",
"bin": {
"binned": true,
"step": 36
}
}
},
"width": 500,
"height": 250
}
]
},
{
"layer": [
{
"mark": {
"type": "line",
"color": "#FF8223"
},
"data": {
"values": []
},
"encoding": {
"x": {
"field": "d",
"type": "quantitative"
},
"y": {
"field": "cum_num",
"type": "quantitative"
}
},
"width": 500,
"height": 250
},
{
"mark": {
"type": "circle",
"color": "#FF8223",
"opacity": 100
},
"data": {
"values": []
},
"encoding": {
"x": {
"field": "d",
"type": "quantitative"
},
"y": {
"field": "cum_num",
"type": "quantitative"
}
},
"width": 500,
"height": 250
}
]
}
]
}
This also renders the same. You can check this in action in this vega editor snippet)
My doubt is why x axis is not scaled to occupy the whole area. That is why the last value on x axis is not 360 but is 400? I also tried adding .scale({ "domain": [0, 360] }), but it does not help (nor does setting it to 370 helps, as commented in VegaLite API code and also in observable notebook). Note that scaling to larger value works.
Solution
By default, "nice" is configured to true on quantitive scales so it ends on round numbers.
https://vega.github.io/vega-lite/docs/scale.html
Adding false to the nice property gets your desired result.
{
"layer": [
{
"layer": [
{
"mark": {"type": "bar", "color": "#4c78a8"},
"data": {
"values": [
{"d": 0, "num": 46},
{"d": 36, "num": 36},
{"d": 72, "num": 52},
{"d": 108, "num": 35},
{"d": 144, "num": 21},
{"d": 180, "num": 15},
{"d": 216, "num": 1},
{"d": 252, "num": 4},
{"d": 288, "num": 2},
{"d": 324, "num": 2},
{"d": 360, "num": 0}
]
},
"encoding": {
"y": {"field": "num", "type": "quantitative"},
"x": {
"field": "d",
"type": "quantitative",
"bin": {"binned": true, "step": 36}
}
},
"width": 500,
"height": 250
}
]
},
{
"layer": [
{
"mark": {"type": "line", "color": "#FF8223"},
"data": {
"values": [
{"d": 0, "cum_num": 33},
{"d": 0.3, "cum_num": 34},
{"d": 1.33, "cum_num": 35},
{"d": 3.7, "cum_num": 36},
{"d": 6.21, "cum_num": 37},
{"d": 6.36, "cum_num": 38},
{"d": 11.83, "cum_num": 39},
{"d": 13.17, "cum_num": 40},
{"d": 17.75, "cum_num": 41},
{"d": 19.08, "cum_num": 42},
{"d": 21.89, "cum_num": 43},
{"d": 26.18, "cum_num": 44},
{"d": 28.25, "cum_num": 45},
{"d": 35.95, "cum_num": 46},
{"d": 37.28, "cum_num": 47},
{"d": 40.83, "cum_num": 48},
{"d": 41.72, "cum_num": 50},
{"d": 45.12, "cum_num": 51},
{"d": 45.27, "cum_num": 52},
{"d": 46.15, "cum_num": 53},
{"d": 46.6, "cum_num": 54},
{"d": 47.63, "cum_num": 55},
{"d": 48.37, "cum_num": 56},
{"d": 48.67, "cum_num": 57},
{"d": 50.3, "cum_num": 59},
{"d": 50.44, "cum_num": 60},
{"d": 51.18, "cum_num": 61},
{"d": 52.22, "cum_num": 62},
{"d": 52.96, "cum_num": 63},
{"d": 53.99, "cum_num": 65},
{"d": 55.77, "cum_num": 66},
{"d": 56.8, "cum_num": 67},
{"d": 57.4, "cum_num": 68},
{"d": 57.54, "cum_num": 69},
{"d": 58.28, "cum_num": 70},
{"d": 59.17, "cum_num": 71},
{"d": 60.36, "cum_num": 72},
{"d": 63.46, "cum_num": 73},
{"d": 66.42, "cum_num": 74},
{"d": 67.75, "cum_num": 75},
{"d": 68.05, "cum_num": 76},
{"d": 68.79, "cum_num": 77},
{"d": 68.93, "cum_num": 78},
{"d": 69.08, "cum_num": 79},
{"d": 69.23, "cum_num": 80},
{"d": 69.67, "cum_num": 81},
{"d": 71.3, "cum_num": 82},
{"d": 73.08, "cum_num": 83},
{"d": 73.52, "cum_num": 84},
{"d": 74.85, "cum_num": 85},
{"d": 76.92, "cum_num": 86},
{"d": 77.37, "cum_num": 87},
{"d": 77.81, "cum_num": 88},
{"d": 78.11, "cum_num": 89},
{"d": 78.25, "cum_num": 90},
{"d": 78.85, "cum_num": 91},
{"d": 79.29, "cum_num": 92},
{"d": 80.03, "cum_num": 93},
{"d": 80.47, "cum_num": 94},
{"d": 81.36, "cum_num": 96},
{"d": 81.66, "cum_num": 97},
{"d": 81.95, "cum_num": 98},
{"d": 83.58, "cum_num": 99},
{"d": 84.76, "cum_num": 100},
{"d": 85.36, "cum_num": 101},
{"d": 86.39, "cum_num": 102},
{"d": 86.54, "cum_num": 104},
{"d": 86.69, "cum_num": 105},
{"d": 88.31, "cum_num": 106},
{"d": 88.76, "cum_num": 107},
{"d": 89.94, "cum_num": 108},
{"d": 91.12, "cum_num": 109},
{"d": 92.46, "cum_num": 110},
{"d": 93.34, "cum_num": 111},
{"d": 93.64, "cum_num": 112},
{"d": 94.08, "cum_num": 113},
{"d": 94.53, "cum_num": 114},
{"d": 95.86, "cum_num": 115},
{"d": 97.19, "cum_num": 116},
{"d": 99.41, "cum_num": 119},
{"d": 100.15, "cum_num": 121},
{"d": 100.44, "cum_num": 122},
{"d": 100.59, "cum_num": 123},
{"d": 101.04, "cum_num": 124},
{"d": 101.78, "cum_num": 125},
{"d": 101.92, "cum_num": 126},
{"d": 102.66, "cum_num": 127},
{"d": 103.25, "cum_num": 128},
{"d": 103.85, "cum_num": 129},
{"d": 104.14, "cum_num": 131},
{"d": 104.44, "cum_num": 132},
{"d": 104.88, "cum_num": 133},
{"d": 105.33, "cum_num": 134},
{"d": 110.5, "cum_num": 135},
{"d": 111.69, "cum_num": 136},
{"d": 112.72, "cum_num": 137},
{"d": 113.17, "cum_num": 138},
{"d": 113.76, "cum_num": 139},
{"d": 115.09, "cum_num": 140},
{"d": 115.24, "cum_num": 141},
{"d": 115.38, "cum_num": 142},
{"d": 115.68, "cum_num": 143},
{"d": 118.05, "cum_num": 144},
{"d": 118.2, "cum_num": 145},
{"d": 118.79, "cum_num": 146},
{"d": 119.23, "cum_num": 147},
{"d": 120.86, "cum_num": 148},
{"d": 121.15, "cum_num": 149},
{"d": 121.45, "cum_num": 150},
{"d": 123.08, "cum_num": 151},
{"d": 124.56, "cum_num": 152},
{"d": 126.33, "cum_num": 153},
{"d": 126.78, "cum_num": 154},
{"d": 127.81, "cum_num": 155},
{"d": 128.4, "cum_num": 157},
{"d": 128.99, "cum_num": 158},
{"d": 129.44, "cum_num": 159},
{"d": 130.92, "cum_num": 160},
{"d": 131.07, "cum_num": 161},
{"d": 133.58, "cum_num": 162},
{"d": 135.65, "cum_num": 163},
{"d": 135.95, "cum_num": 164},
{"d": 136.09, "cum_num": 165},
{"d": 136.69, "cum_num": 166},
{"d": 136.83, "cum_num": 167},
{"d": 139.05, "cum_num": 168},
{"d": 141.42, "cum_num": 169},
{"d": 146.3, "cum_num": 170},
{"d": 146.75, "cum_num": 171},
{"d": 150.89, "cum_num": 172},
{"d": 151.18, "cum_num": 173},
{"d": 152.66, "cum_num": 174},
{"d": 154.59, "cum_num": 175},
{"d": 154.88, "cum_num": 176},
{"d": 155.18, "cum_num": 177},
{"d": 155.92, "cum_num": 178},
{"d": 160.06, "cum_num": 179},
{"d": 160.36, "cum_num": 180},
{"d": 160.65, "cum_num": 181},
{"d": 164.05, "cum_num": 182},
{"d": 164.5, "cum_num": 183},
{"d": 165.83, "cum_num": 185},
{"d": 171.3, "cum_num": 186},
{"d": 172.93, "cum_num": 187},
{"d": 178.4, "cum_num": 188},
{"d": 179.73, "cum_num": 189},
{"d": 179.88, "cum_num": 190},
{"d": 182.4, "cum_num": 191},
{"d": 182.99, "cum_num": 192},
{"d": 186.39, "cum_num": 193},
{"d": 189.94, "cum_num": 194},
{"d": 190.53, "cum_num": 195},
{"d": 197.63, "cum_num": 196},
{"d": 198.82, "cum_num": 197},
{"d": 201.48, "cum_num": 198},
{"d": 203.11, "cum_num": 199},
{"d": 203.7, "cum_num": 200},
{"d": 203.99, "cum_num": 201},
{"d": 204.88, "cum_num": 202},
{"d": 205.33, "cum_num": 203},
{"d": 211.09, "cum_num": 204},
{"d": 213.46, "cum_num": 205},
{"d": 226.04, "cum_num": 206},
{"d": 253.85, "cum_num": 207},
{"d": 260.5, "cum_num": 209},
{"d": 285.06, "cum_num": 210},
{"d": 306.51, "cum_num": 211},
{"d": 311.24, "cum_num": 212},
{"d": 340.24, "cum_num": 213},
{"d": 356.51, "cum_num": 214}
]
},
"encoding": {
"x": {"field": "d", "type": "quantitative","scale": { "nice":false}},
"y": {"field": "cum_num", "type": "quantitative"}
},
"width": 500,
"height": 250
},
{
"mark": {"type": "circle", "color": "#FF8223", "opacity": 100},
"data": {
"values": [
{"d": 0, "cum_num": 33},
{"d": 0.3, "cum_num": 34},
{"d": 1.33, "cum_num": 35},
{"d": 3.7, "cum_num": 36},
{"d": 6.21, "cum_num": 37},
{"d": 6.36, "cum_num": 38},
{"d": 11.83, "cum_num": 39},
{"d": 13.17, "cum_num": 40},
{"d": 17.75, "cum_num": 41},
{"d": 19.08, "cum_num": 42},
{"d": 21.89, "cum_num": 43},
{"d": 26.18, "cum_num": 44},
{"d": 28.25, "cum_num": 45},
{"d": 35.95, "cum_num": 46},
{"d": 37.28, "cum_num": 47},
{"d": 40.83, "cum_num": 48},
{"d": 41.72, "cum_num": 50},
{"d": 45.12, "cum_num": 51},
{"d": 45.27, "cum_num": 52},
{"d": 46.15, "cum_num": 53},
{"d": 46.6, "cum_num": 54},
{"d": 47.63, "cum_num": 55},
{"d": 48.37, "cum_num": 56},
{"d": 48.67, "cum_num": 57},
{"d": 50.3, "cum_num": 59},
{"d": 50.44, "cum_num": 60},
{"d": 51.18, "cum_num": 61},
{"d": 52.22, "cum_num": 62},
{"d": 52.96, "cum_num": 63},
{"d": 53.99, "cum_num": 65},
{"d": 55.77, "cum_num": 66},
{"d": 56.8, "cum_num": 67},
{"d": 57.4, "cum_num": 68},
{"d": 57.54, "cum_num": 69},
{"d": 58.28, "cum_num": 70},
{"d": 59.17, "cum_num": 71},
{"d": 60.36, "cum_num": 72},
{"d": 63.46, "cum_num": 73},
{"d": 66.42, "cum_num": 74},
{"d": 67.75, "cum_num": 75},
{"d": 68.05, "cum_num": 76},
{"d": 68.79, "cum_num": 77},
{"d": 68.93, "cum_num": 78},
{"d": 69.08, "cum_num": 79},
{"d": 69.23, "cum_num": 80},
{"d": 69.67, "cum_num": 81},
{"d": 71.3, "cum_num": 82},
{"d": 73.08, "cum_num": 83},
{"d": 73.52, "cum_num": 84},
{"d": 74.85, "cum_num": 85},
{"d": 76.92, "cum_num": 86},
{"d": 77.37, "cum_num": 87},
{"d": 77.81, "cum_num": 88},
{"d": 78.11, "cum_num": 89},
{"d": 78.25, "cum_num": 90},
{"d": 78.85, "cum_num": 91},
{"d": 79.29, "cum_num": 92},
{"d": 80.03, "cum_num": 93},
{"d": 80.47, "cum_num": 94},
{"d": 81.36, "cum_num": 96},
{"d": 81.66, "cum_num": 97},
{"d": 81.95, "cum_num": 98},
{"d": 83.58, "cum_num": 99},
{"d": 84.76, "cum_num": 100},
{"d": 85.36, "cum_num": 101},
{"d": 86.39, "cum_num": 102},
{"d": 86.54, "cum_num": 104},
{"d": 86.69, "cum_num": 105},
{"d": 88.31, "cum_num": 106},
{"d": 88.76, "cum_num": 107},
{"d": 89.94, "cum_num": 108},
{"d": 91.12, "cum_num": 109},
{"d": 92.46, "cum_num": 110},
{"d": 93.34, "cum_num": 111},
{"d": 93.64, "cum_num": 112},
{"d": 94.08, "cum_num": 113},
{"d": 94.53, "cum_num": 114},
{"d": 95.86, "cum_num": 115},
{"d": 97.19, "cum_num": 116},
{"d": 99.41, "cum_num": 119},
{"d": 100.15, "cum_num": 121},
{"d": 100.44, "cum_num": 122},
{"d": 100.59, "cum_num": 123},
{"d": 101.04, "cum_num": 124},
{"d": 101.78, "cum_num": 125},
{"d": 101.92, "cum_num": 126},
{"d": 102.66, "cum_num": 127},
{"d": 103.25, "cum_num": 128},
{"d": 103.85, "cum_num": 129},
{"d": 104.14, "cum_num": 131},
{"d": 104.44, "cum_num": 132},
{"d": 104.88, "cum_num": 133},
{"d": 105.33, "cum_num": 134},
{"d": 110.5, "cum_num": 135},
{"d": 111.69, "cum_num": 136},
{"d": 112.72, "cum_num": 137},
{"d": 113.17, "cum_num": 138},
{"d": 113.76, "cum_num": 139},
{"d": 115.09, "cum_num": 140},
{"d": 115.24, "cum_num": 141},
{"d": 115.38, "cum_num": 142},
{"d": 115.68, "cum_num": 143},
{"d": 118.05, "cum_num": 144},
{"d": 118.2, "cum_num": 145},
{"d": 118.79, "cum_num": 146},
{"d": 119.23, "cum_num": 147},
{"d": 120.86, "cum_num": 148},
{"d": 121.15, "cum_num": 149},
{"d": 121.45, "cum_num": 150},
{"d": 123.08, "cum_num": 151},
{"d": 124.56, "cum_num": 152},
{"d": 126.33, "cum_num": 153},
{"d": 126.78, "cum_num": 154},
{"d": 127.81, "cum_num": 155},
{"d": 128.4, "cum_num": 157},
{"d": 128.99, "cum_num": 158},
{"d": 129.44, "cum_num": 159},
{"d": 130.92, "cum_num": 160},
{"d": 131.07, "cum_num": 161},
{"d": 133.58, "cum_num": 162},
{"d": 135.65, "cum_num": 163},
{"d": 135.95, "cum_num": 164},
{"d": 136.09, "cum_num": 165},
{"d": 136.69, "cum_num": 166},
{"d": 136.83, "cum_num": 167},
{"d": 139.05, "cum_num": 168},
{"d": 141.42, "cum_num": 169},
{"d": 146.3, "cum_num": 170},
{"d": 146.75, "cum_num": 171},
{"d": 150.89, "cum_num": 172},
{"d": 151.18, "cum_num": 173},
{"d": 152.66, "cum_num": 174},
{"d": 154.59, "cum_num": 175},
{"d": 154.88, "cum_num": 176},
{"d": 155.18, "cum_num": 177},
{"d": 155.92, "cum_num": 178},
{"d": 160.06, "cum_num": 179},
{"d": 160.36, "cum_num": 180},
{"d": 160.65, "cum_num": 181},
{"d": 164.05, "cum_num": 182},
{"d": 164.5, "cum_num": 183},
{"d": 165.83, "cum_num": 185},
{"d": 171.3, "cum_num": 186},
{"d": 172.93, "cum_num": 187},
{"d": 178.4, "cum_num": 188},
{"d": 179.73, "cum_num": 189},
{"d": 179.88, "cum_num": 190},
{"d": 182.4, "cum_num": 191},
{"d": 182.99, "cum_num": 192},
{"d": 186.39, "cum_num": 193},
{"d": 189.94, "cum_num": 194},
{"d": 190.53, "cum_num": 195},
{"d": 197.63, "cum_num": 196},
{"d": 198.82, "cum_num": 197},
{"d": 201.48, "cum_num": 198},
{"d": 203.11, "cum_num": 199},
{"d": 203.7, "cum_num": 200},
{"d": 203.99, "cum_num": 201},
{"d": 204.88, "cum_num": 202},
{"d": 205.33, "cum_num": 203},
{"d": 211.09, "cum_num": 204},
{"d": 213.46, "cum_num": 205},
{"d": 226.04, "cum_num": 206},
{"d": 253.85, "cum_num": 207},
{"d": 260.5, "cum_num": 209},
{"d": 285.06, "cum_num": 210},
{"d": 306.51, "cum_num": 211},
{"d": 311.24, "cum_num": 212},
{"d": 340.24, "cum_num": 213},
{"d": 356.51, "cum_num": 214}
]
},
"encoding": {
"x": {"field": "d", "type": "quantitative"},
"y": {"field": "cum_num", "type": "quantitative"}
},
"width": 500,
"height": 250
}
]
}
]
}
- Keep numbers which appear in both columns, in J lang
- Differentiation in J
- How to reshape an array with an arbitrary size in one dimension?
- Why is Insert (fold) right associative
- Write 4 : 'x&{.&.;: y' tacitly
- Alignment issue when printing formatted prime numbers in J language
- How can I define a verb in J that applies a different verb alternately to each atom in a list?
- How to get user input in the J programming language
- How to unbox a list of boxed lists of differing lengths in J?
- How can I fix 'noun result was required' error in J?
- In j, how can I define a verb locally in one scope and pass it to a defined adverb?
- Convert boxed array to normal array?
- Read column of CSV file as array
- Replace atom in array of strings
- What does the dyad `=` do to boxed strings?
- Index of minimum element using J
- How can I take the outer product of string vectors in J?
- Building an array of verbs in J
- Reading in multidigit command line parameter
- Amend with bond to new data shows unexpected behaviour
- How to turn a table or matrix into a (flat) list in J
- How to run dissect in J?
- How to define selection using index function in J
- How to exit the J console?
- Find 4-neighbors using J
- Writing custom verbs in J
- How do I negate a selector in J lang?
- How to use arbitrary selector in interchange in J lang?
- different result once square root is added inside tacit
- Sum of arrays with repeated indices