Vega-lite: comparing box-plot and strip-plot

box-plot.vg.json

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "height": {"step": 30},
  "width": 300,
  "description": "Shows the relationship between horsepower and the numbver of cylinders using tick marks.",
  "data": {"url": "data/cars.json"},
  "mark": {
    "type": "boxplot",
    "extent": "min-max"
  },
  "encoding": {
    "x": {"field": "Horsepower", "type": "quantitative", 
          "axis": {"grid": true}},
    "y": {"field": "Cylinders", "type": "ordinal"},
    "color": {"aggregate": "count",
              "type": "quantitative"} 
            
  }
}

box-strip-combined-with-rule.vg.json

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "data": {
    "url": "data/cars.json"
  },
  "vconcat": [
    {
      "mark": {
        "type": "boxplot",
        "extent": "min-max"
      },
      "encoding": {
        "x": {
          "field": "Horsepower",
          "type": "quantitative",
          "axis": {
            "grid": true
          }
        },
        "y": {
          "field": "Cylinders",
          "type": "ordinal"
        },
        "color": {
          "aggregate": "count",
          "type": "quantitative"
        }
      }
    },
    {
      "layer": [
        {
          "mark": {
            "type": "tick",
            "tooltip": true
          },
          "encoding": {
            "x": {
              "field": "Horsepower",
              "type": "quantitative",
              "axis": {
                "grid": false
              }
            },
            "y": {
              "field": "Cylinders",
              "type": "ordinal"
            }
          }
        },
        {
          "mark": {
            "type": "rule"
          },
          "encoding": {
            "x": {
              "field": "Horsepower",
              "aggregate": "min",
              "type": "quantitative",
              "axis": {
                "grid": false
              }
            },
            "x2": {
              "field": "Horsepower",
              "aggregate": "max"
            },
            "y": {
              "field": "Cylinders",
              "type": "ordinal"
            },
            "strokeWidth": {
              "value": 0.3
            }
          }
        }
      ]
    }
  ]
}

box-strip-combined.vg.json

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "data": {"url": "data/cars.json"},
  "vconcat": [
    {
      "mark": {
        "type": "boxplot",
        "extent": "min-max"
      },
      "encoding": {
        "x": {"field": "Horsepower", "type": "quantitative", 
              "axis": {"grid": true}},
        "y": {"field": "Cylinders", "type": "ordinal"},
        "color": {"aggregate": "count",
                  "type": "quantitative"} 
                
      }
  },
  {
    "mark": {
      "type": "tick",
      "tooltip": true
    },
    "encoding": {
      "x": {"field": "Horsepower", "type": "quantitative", 
            "axis": {"grid": false}},
      "y": {"field": "Cylinders", "type": "ordinal"}
    }
  }]
}

strip-plot-with-histogram.vg.json

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "description": "Shows the relationship between horsepower and the numbver of cylinders using tick marks.",
  "data": {"url": "data/cars.json"},
  "spacing": 30,
  "bounds": "flush",
  "hconcat": [
    {
      "mark": {
        "type": "tick",
        "tooltip": true
      },
      "encoding": {
        "x": {"field": "Horsepower", "type": "quantitative", 
              "axis": {"grid": false}},
        "y": {"field": "Cylinders", "type": "ordinal"}
      }
    },
    {
      "mark": { 
        "type": "bar",
        "tooltip": true
      },
      "width": 50,
      "encoding": {
        "y": {
          "field": "Cylinders",
          "type": "ordinal",
          "axis": null
        },
        "x": {
          "aggregate": "count",
          "type": "quantitative",
          "title": "count"
        }
      }
    }
  ]
}

strip-plot.vg.json

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "height": {"step": 30},
  "width": 300,
  "description": "Shows the relationship between horsepower and the numbver of cylinders using tick marks.",
  "data": {"url": "data/cars.json"},
  "mark": {
    "type": "tick",
    "tooltip": true
  },

  "encoding": {
    "x": {"field": "Horsepower", "type": "quantitative", 
          "axis": {"grid": false}},
    "y": {"field": "Cylinders", "type": "ordinal"}
  }
}