Forum Discussion

Pk8524's avatar
Pk8524
Helper I
1 year ago

Column chart with different height and width - svg

I would like to achieve a column chart using svg with different height, widht and project name. I have a very simple data:     The goal is to have something like this:     i have ma...
lbendlin's avatar
lbendlin
Super User
1 year ago

Have you considered using Deneb for this?

 

{
  "data": {
    "name": "dataset"
  },
  "transform": [
    {
      "window": [
        {
          "op": "sum",
          "field": "Width",
          "as": "cum_total"
        }
      ],
      "sort": [
        {
          "field": "Project",
          "order": "ascending"
        }
      ],
      "frame": [null, 0]
    },
    {
      "calculate": "0", "as": "bottomedge"
    },
    {
      "calculate": "datum.cum_total - datum['Width'] + 2", "as": "leftedge"
    }
  ],"mark": {
    "type": "bar"
  },
  "encoding": {
    "x": {
      "field": "cum_total",
      "type": "quantitative"
    },
    "x2": {"field":"leftedge"},
    "y2": {"field":"bottomedge"},
    "y": {
      "field": "Height",
      "type": "quantitative"
    },
    "color":{"field":"Project"}
  }
}