0

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:

enter image description here

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.

MsA
  • 2,599
  • 3
  • 22
  • 47

1 Answers1

1

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
        }
      ]
    }
  ]
}
Davide Bacci
  • 16,647
  • 3
  • 10
  • 36
  • I had gone through the doc, but am quite sure I had skipped this prop reading its name. Its really nothing related to scale. Also scaling it full looks more nicer. So, setting the value to `false` is counter intuitive ... . Neverthless it fixes the thing. Is there any intuition behind this prop name which I am missing? – MsA Oct 13 '22 at 13:52
  • I believe it comes from d3.js which is the granddaddy of Vega in a way. Glad it solves it for you - don't forget to mark as solved. – Davide Bacci Oct 13 '22 at 15:01