Vega Bar Chart

[Alexandre.Bernier]

Hi,

I'm actually working on a new VEGA chart and I can't seem to make it work.

I'm trying to create something like this Bar Grouped 1 or like this Bar Grouped 2.

I wanna display two columns for one X value.

The first thing that I see is that my data isn't formatted like the examples.

Data Sample

  "data": [
    {
      "name": "table",
      "values": [
        {"week":"2021W32", "firstTot":5, "secondTot":2},
        {"week":"2021W33", "firstTot":7, "secondTot":5},
        {"week":"2021W34", "firstTot":3, "secondTot":9},
        {"week":"2021W35", "firstTot":8, "secondTot":8}
      ]
    }
  ]

Is it possible to do something like that?

I tried to do it with a repeat / layer and the only thing that I am able to get is a column hovering another column. Is it possible to display the column side by side?

Regards,
Alexandre

[brianseeders]

Hey @Alexandre.Bernier,

Take a look at the following Vega... does this get you what you were looking for?

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "name": "table",
    "values": [
      {"week":"2021W32", "firstTot":5, "secondTot":2},
      {"week":"2021W33", "firstTot":7, "secondTot":5},
      {"week":"2021W34", "firstTot":3, "secondTot":9},
      {"week":"2021W35", "firstTot":8, "secondTot":8}
    ]
  },
  "transform": [
    {
      "fold": ["firstTot", "secondTot"]
    }
  ],
  "mark": "bar",
  "encoding": {
    "column": {
      "field": "week",
      "header": {"orient": "bottom"},
      "title": "Week",
      "spacing": 10
    },
    "y": {
      "aggregate": "sum",
      "field": "value",
      "title": "Total",
      "axis": {"grid": false}
    },
    "x": {
      "field": "key",
      "axis": null
    },
    "color": {
      "field": "key",
      "scale": {"range": ["#675193", "#ca8861"]}
    }
  },
  "config": {
    "view": {"stroke": "transparent"},
    "axis": {"domainWidth": 1}
  }
}

[Alexandre.Bernier]

Good morning @brianseeders,

Thanks for your reply!

This is exactly what I was looking for.

The only issue that I have now is the "autosize" issue.

Is there any workaround for this? I'm actually the stack in 7.10. If I proceed to update to 7.14, does it correct this issue?

Have a nice day,
Alexandre

[Alexandre.Bernier]

Hey!

I found a solution.

I will post it tomorrow.

Regards,
Alexandre

[Alexandre.Bernier]

Hi!

I was facing an autosize issue with VEGA-LITE. I finally decided to adapt my code to use VEGA.

Here's the result. Take note that I remove the "Data" section by confidentiality.

Code

{
  $schema: https://vega.github.io/schema/vega/v5.json
  data: ...
  scales: [
    {
      name: color
      type: ordinal
      domain: {
        data: your_dataset_name
        field: your_field_split
      }
      range: {
        scheme: tableau20
      }
    }
    {
      name: xScale
      type: band
      domain: {
        data: your_dataset_name
        field: your_x_field
      }
      range: width
      padding: 0.2
    }
    {
      name: yScale
      type: linear
      domain: {
        data: formatData
        field: your_y_field
      }
      range: height
      round: true
      zero: true
      nice: true
    }
  ]
  axes: [
    {
      orient: bottom
      scale: xScale
    }
    {
      orient: left
      scale: yScale
    }
  ]
  marks: [
    {
      type: group
      from: {
        facet: {
          data: your_dataset_name
          name: facet
          groupby: your_x_field
        }
      }
      encode: {
        enter: {
          x: {
            scale: xScale
            field: your_x_field
          }
        }
      }
      signals: [
        {
          name: width
          update: bandwidth('xScale')
        }
      ]
      scales: [
        {
          name: pos
          type: band
          range: width
          domain: {
            data: facet
            field: your_split_field
          }
        }
      ]
      marks: [
        {
          name: bars
          type: rect
          from: {
            data: facet
          }
          encode: {
            enter: {
              x: {
                scale: pos
                field: your_split_field
              }
              width: {
                scale: pos
                band: 1
              }
              y: {
                scale: yScale
                field: your_y_field
              }
              y2: {
                scale: yScale
                value: 0
              }
              fill: {
                scale: color
                field: your_split_field
              }
            }
          }
        }
      ]
    }
  ]
}

Regards,
Alexandre