CODEWITHSUNDEEP
chartsdata-visualizationvega-litevega
nifeco
nifeco

Reputation: 211

Vega Lite: How to show more charts below on clicking on a bar on the main bar chart

I am really new to Vega lite and wanted to write json specification that enables clicks on the bar which would show more graphs related to the one clicked. I couldn't find anything that could help me in this. My code for the bar is given below. How could I make it so when a bar is clicked, it opens more graphs below?

This is the main chart code I have made on Vega Lite Editor:

{"width": 400,
"height": 300,
  "data": {
    "values": [
  {
    "Name": "01-ROWENA",
    "Dl": "1",
    "Cnc": "0",
    "I_Rate": "0.33444816", 
    "Month": "01-01-2020",
    "Model": "E75"
  },
  {
    "Name": "01-ROWENA",
    "Dl": "5",
    "Cnc": "3",
    "I_Rate": "0.53444816", 
    "Month": "01-01-2020",
    "Model": "E75"
  },
  {
    "Name": "01-ROWENA",
    "Dl": "3",
    "Cnc": "1",
    "I_Rate": "0.28444816", 
    "Month": "01-01-2020",
    "Model": "E75"
  },
  {
   "Name": "01-ROWENA",
    "Dl": "1",
    "Cnc": "0",
    "I_Rate": "0.33444816", 
    "Month": "01-01-2020",
    "Model": "E75"
  },
  {
   "Name": "01-ROWENA",
    "Dl": "1",
    "Cnc": "0",
    "I_Rate": "0.33444816", 
    "Month": "01-01-2020",
    "Model": "E75"
  },
  {
    "Name": "01-ROWENA",
    "Dl": "1",
    "Cnc": "0",
    "I_Rate": "0.33444816", 
    "Month": "01-01-2020",
    "Model": "E75"
  },
 {
    "Name": "01-ROWENA",
    "Dl": "1",
    "Cnc": "0",
    "I_Rate": "0.33444816", 
    "Month": "01-01-2020",
    "Model": "E75"
  },
  {
   "Name": "03-PERCY",
    "Dl": "3",
    "Cnc": "1",
    "I_Rate": "2.0",    
    "Month": "01-01-2020",
    "Model": "E75"
  },
  {
    "Name": "03-PERCY",
    "Dl": "1",
    "Cnc": "0",
    "I_Rate": "0.33444816", 
    "Month": "01-01-2020",
    "Model": "E75"
  },
  {
   "Name": "02-PENNY",
    "Dl": "1",
    "Cnc": "0",
    "I_Rate": "1.79444816", 
    "Month": "01-03-2020",
    "Model": "E75"
  },
  {
   "Name": "02-PENNY",
    "Dl": "2",
    "Cnc": "1",
    "I_Rate": "5.0",    
    "Month": "01-02-2020",
    "Model": "E75"
  },
  {"Name": "02-PENNY",
    "Dl": "5",
    "Cnc": "0",
    "I_Rate": "0.29444816", 
    "Month": "01-01-2020",
    "Model": "E75"
  }
]
  },
  
  "encoding": {
    "x": {"field": "Name", "type": "nominal", "axis": {"labelAngle": -45, "title": null}}
  },
  "layer": [
    {
      "layer": [{
      "mark": {
        "type": "bar", 
        "xOffset": -20,
        "size": 45, 
        "color": "steelblue",
        "cursor": "pointer"},
      "encoding": {
        "y": {
          "aggregate": "sum",
          "field": "Dl",
          "type": "quantitative",
          "axis":{
            "orient": "left", 
            "grid": true, 
            "title": "No. of Events"}
        },"color": {
          "datum": "Dl"
          },
        "tooltip": [
      {"field": "Name", 
      "type": "nominal", 
      "title": "ATA System ID, Name"},
      {"field": "Dl", 
      "type": "quantitative", 
      "aggregate": "sum", 
      "title": "Dl"}
    ]}
    },
    {
      "mark": {
        "type": "bar", 
        "size": 45, 
        "xOffset": 30, 
        "color": "maroon", 
        "tooltip": true,
        "cursor": "pointer"},
      
      "encoding": {
        "y": {"aggregate": "sum",
          "field": "Cnc",
          "type": "quantitative",
          "axis":{"orient": "left", "grid": true}
        },"color": {"datum": "Cnc"},
        "tooltip": [
      {"field": "Name", "type": "nominal", "title": "ATA System ID, Name"},
      {"field": "Cnc", "type": "quantitative", "aggregate": "sum", "title": "Cnc"}
    ]
      }
    }]},
    {
      "mark": {"type": "point", 
      "shape": "triangle", 
      "filled": true,
      "size": 150,
      "color": {"datum": "I_Rate", "legend":{"color": "lightgreen", "symbolFillColor": "lightgreen"}},
      "tooltip": true
      },
      "encoding": {
       "y": {
         "aggregate": "sum",
          "field": "I_Rate",
          "type": "quantitative",
          "axis": {
            "orient": "right", 
            "title": "I_Rate"},
           "scale": {"zero": false, "y": "independent"}
        },
        "color": {
          "datum": "I_Rate", 
          "legend":{
            "color": "lightgreen", 
            "symbolFillColor": "lightgreen"}},
        "tooltip": [
      {
        "field": "Name", 
        "type": "nominal", 
        "title": "ATA System ID, Name"},
      {
        "field": "I_Rate", 
        "type": "quantitative", 
        "aggregate": "sum", 
        "title": "I Rate"}
    ]
      }
    }
  ],"resolve": {"scale": {"y": "independent"}},
  
  "config": 
  {
  "axis": {"labelFont": "arial", "titleFont": "arial"},
  "header": {"labelFont": "arial", "titleFont": "arial"},
  "mark": {"font": "arial"},
  "title": {"font": "arial", "subtitleFont": "arial"},
  "legend": {"orient": "top", "layout": {"top": {"anchor": "middle"}},  "labelFont": "arial", "titleFont": "arial"}}
}

Upvotes: 1

Views: 816

Answers (1)

davidebacci
davidebacci

Reputation: 30219

Have you looked at the official examples? There are lots of interactive samples that you should be able to use as a guide including the following:

https://vega.github.io/editor/#/examples/vega-lite/interactive_concat_layer

Edit 1

Here is a working example using expressions.

enter image description here

enter image description here

Editor

{
  "config": {"view": {"stroke": "transparent"}},
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "A dashboard with cross-highlighting.",
  "data": {"url": "data/movies.json"},
  "transform": [{"filter": "datum['Major Genre'] != null"}],
  "vconcat": [
    {
      "width": 330,
      "height": 120,
      "mark": "bar",
      "params": [
        {"name": "pts", "select": {"type": "point", "encodings": ["x"]}}
      ],
      "encoding": {
        "x": {"field": "Major Genre", "axis": {"labelAngle": -90}},
        "y": {"aggregate": "count"},
        "color": {
          "condition": {"param": "pts", "value": "steelblue"},
          "value": "grey"
        }
      }
    },
    {
      "layer": [
        {
          "mark": "rect",
          "encoding": {
            "x": {
              "bin": {"maxbins": 10},
              "field": "IMDB Rating",
              "axis": {
                "labelColor": {
                  "expr": "length(data('pts_store'))==0?'white':'black'"
                },
                "domainColor": {
                  "expr": "length(data('pts_store'))==0?'white':'black'"
                },
                "tickColor": {
                  "expr": "length(data('pts_store'))==0?'white':'black'"
                },
                "titleColor": {
                  "expr": "length(data('pts_store'))==0?'white':'black'"
                }
              }
            },
            "y": {
              "bin": {"maxbins": 10},
              "field": "Rotten Tomatoes Rating",
              "axis": {
                "labelColor": {
                  "expr": "length(data('pts_store'))==0?'white':'black'"
                },
                "domainColor": {
                  "expr": "length(data('pts_store'))==0?'white':'black'"
                },
                "tickColor": {
                  "expr": "length(data('pts_store'))==0?'white':'black'"
                },
                "titleColor": {
                  "expr": "length(data('pts_store'))==0?'white':'black'"
                }
              }
            },
            "color": {"aggregate": "count", "legend": null},
            "opacity": {"condition": {"param": "pts", "value": 0}, "value": 1}
          }
        },
        {
          "transform": [{"filter": {"param": "pts"}}],
          "mark": "point",
          "encoding": {
            "x": {"bin": {"maxbins": 10}, "field": "IMDB Rating"},
            "y": {"bin": {"maxbins": 10}, "field": "Rotten Tomatoes Rating"},
            "size": {"aggregate": "count", "legend": null},
            "color": {"value": "#666"},
            "opacity": {"condition": {"param": "pts", "value": 0}, "value": 1}
          }
        }
      ]
    }
  ]
}

Upvotes: 1

Related Questions