Search code examples
jsonvisualizationvega-lite

Strip plot chart using Vega-Lite

I am trying to get the count of each catagrogy and show as a data label in the right side. I seen an sample in linked and i tried to bring the same but somehow im not able to achieve it.

Sample enter image description here

And the one i used the sample from vega-lite enter image description here

and the code i am trying is below

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "width": 400, "height": 100,
  "data": {
          "url": "data/cars.json"

   },
  "encoding": {
     "x": {"field": "Horsepower", "type": "quantitative"},
     "y": {"field": "Origin","axis": {"titleColor": "#6F4ACB"}},
     "color": {
     "condition": {"test": "datum['Horsepower'] < 60", "value": "#B4AEE8"},
     "value": "#6F4ACB"
 }
 },
"layer": [
    {
      "mark": {"opacity": 0.9, "type": "circle", "color": "#6F4ACB", "size":200}
    },
    {
     "mark": {"type": "text", "x": -2, "align": "right"},
      "transform": [
       {
         "aggregate": [{"op": "count", "field": "Name", "as": "lo"}],
         "groupby": ["Origin"]
       }
     ],
      "encoding": {
      "text": {"field": "lo"}
    }
   }
 ]
 }
Solution

  • enter image description here

    {
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "width": 400,
  "height": 100,
  "data": {"url": "data/cars.json"},
  "encoding": {
    "x": {"field": "Horsepower", "type": "quantitative"},
    "y": {"field": "Origin", "axis": {"titleColor": "#6F4ACB"}},
    "color": {
      "condition": {"test": "datum['Horsepower'] < 60", "value": "#B4AEE8"},
      "value": "#6F4ACB"
    }
  },
  "layer": [
    {
      "mark": {
        "opacity": 0.9,
        "type": "circle",
        "color": "#6F4ACB",
        "size": 200
      }
    },
    {
      "mark": {"type": "text", "x": -2, "align": "right"},
      "transform": [
        {
          "aggregate": [{"op": "count", "field": "Name", "as": "lo"}],
          "groupby": ["Origin"]
        }
      ],
      "encoding": {"text": {"field": "lo"}, "x":{ "value":{"expr": "width+25"}}}
    }
  ]
}