CODEWITHSUNDEEP
jsonvisualizationvega-lite
hemagso
hemagso

Reputation: 41

Multiple Datasets Within Vega Lite

I'm trying to build a visualization for histograms of numerical data using Vega Lite. Right now I am prototyping the visualization using a very simple mock dataset (Also available here):

{
    "data": {
    "fill": [
        {"count": 30000, "level": "filled"},
        {"count": 50000, "level": "missing"}
    ],
    "histogram": [
        {"bin_end": 20, "bin_start": 0, "count": 1000},
        {"bin_end": 30, "bin_start": 20, "count": 20000}
    ]
    },
    "metadata": {}
}

The data format above is predetermined and unfortunately I am not able to change it as it comes from an API. I'm trying to plot the histogram section of the data to plot, well, an histogram, and the fill section of the data to plot a simple bar chart. Something like this:

Desired Outcome

I understand that I can use the "property" option to access nested data like this, as document in this section of Vega documentation, and this works as long as I am only plotting one of the charts, as shown by the examples below:

Example 1 in Vega Editor: Histogram only

Example 2 in Vega Editor: Barplot only

However, when I try to put both of them together it simply does not work. I get the weird chart below, where it seems that the data for the barplot is completely absent.

Weird chart

Link to vega editor for weird chart

And when inspecting the data using Vega Editor built in Data Viewer it seems that only the histogram data is being read.

Data viewer

Furthermore, this behavior seems to be order dependent, as switching the order of the charts in the HConcat block changes which chart gets messed up:

enter image description here

Inverted Chart

Am I missing something here? Is this some sort of limitation of Vegalite?

Upvotes: 1

Views: 2504

Answers (1)

davidebacci
davidebacci

Reputation: 30174

You're missing the name property so it looks like the data was simply overwritten by whatever was retrieved last. Here you go. enter image description here

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.2.0.json",
  "config": {"view": {"continuousHeight": 300, "continuousWidth": 400}},
  "hconcat": [
    {
      "data": {"name": "a",
        "format": {"type": "json", "property": "data.histogram"},
        "url": "https://gist.githubusercontent.com/hemagso/f7b4381be43b34ece4d8aa78c936c7d5/raw/0bae0177b8a2a5d33e23c0d164d4439d248aa9ff/mock,json"
      },
      "encoding": {
        "x": {
          "bin": {"binned": true},
          "field": "bin_start",
          "scale": {"type": "linear"}
        },
        "x2": {"field": "bin_end"},
        "y": {"field": "count", "type": "quantitative"}
      },
      "mark": "bar"
    },
    {
      "data": {"name": "b",
        "format": {"type": "json", "property": "data.fill"},
        "url": "https://gist.githubusercontent.com/hemagso/f7b4381be43b34ece4d8aa78c936c7d5/raw/0bae0177b8a2a5d33e23c0d164d4439d248aa9ff/mock,json"
      },
      "encoding": {
        "color": {"field": "level", "type": "nominal"},
        "x": {"field": "level", "type": "nominal"},
        "y": {"field": "count", "type": "quantitative"}
      },
      "mark": "bar"
    }
  ]
}

Upvotes: 3

Related Questions