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 managed to do some svg which horizontally works and we see different widht but not in vertical:

 

 

Can you help me to create such custom visual?

 

https://drive.google.com/file/d/1CtnSe47cWBdqrqjdZs4_q01mKUfRfsBP/view?usp=sharing 

1 Reply

  • 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"}
  }
}