woter324
woter324

Reputation: 3100

Adding href to a mark cancels out aggregation

I'm working on a dual y-axis Vega-Lite bar chart that I hope you can see here. (The code is replicated below).

I have a basic CSV dataset.

Model,url,Cost,Score
Lenovo Thinkpad P16s,https://www.lenovo.com/gb/en/p/laptops/thinkpad/thinkpadp/lenovo-thinkpad-p16s-gen-3-16-inch-intel-mobile-workstation/21kscto1wwgb3,2459.99,155
Lenovo Thinkpad P14s,https://www.lenovo.com/gb/en/p/laptops/thinkpad/thinkpadp/thinkpad-p14s-gen-5-14-inch-intel-mobile-workstation/21g2cto1wwgb3,2278.00,187
Lenovo Thinkpad P16v,https://www.lenovo.com/gb/en/configurator/cto/index.html?bundleId=21FECTO1WWGB3,2579.99,224
Lenovo Thinkpad P16v,https://www.lenovo.com/gb/en/p/laptops/thinkpad/thinkpadp/lenovo-thinkpad-p16v-gen-2-16-inch-intel-mobile-workstation/21kxcto1wwgb3,3405.65,230
HP ZBook Power G11,https://www.hp.com/gb-en/shop/product.aspx?id=86B35EA&opt=ABU&sel=NTB,2339.99,244
HP ZBook Fury G11,https://www.hp.com/gb-en/shop/product.aspx?id=62X63EA&opt=ABU&sel=NTB,3443.99,281
Dell Precision 7680,https://www.dell.com/en-uk/shop/cty/pdp/spd/precision-16-7680-laptop,3347.26,283
Lenovo Thinkpad P1,https://www.lenovo.com/gb/en/p/laptops/thinkpad/thinkpadp/thinkpad-p1-gen-7-16-inch-intel/21kvcto1wwgb3,4123.00,289
HP ZBook Power G11,https://www.hp.com/gb-en/shop/product.aspx?id=86B36EA&opt=ABU&sel=NTB,2879.99,293
HP ZBook Fury G11,https://www.hp.com/gb-en/shop/product.aspx?id=62X65EA&opt=ABU&sel=NTB,3827.99,296
HP ZBook Studio G11,https://www.hp.com/gb-en/shop/product.aspx?id=8S9Q2EA&opt=ABU&sel=NTB,3419.99,307
HP ZBook Fury G11,https://www.hp.com/gb-en/shop/product.aspx?id=62X64EA&opt=ABU&sel=NTB,5099.99,328

I feel there may be an underlying issue that is being masked/caused by automatic/default aggregation, but without the line "aggregate": "min" (line 26 & 47), the bar chart suggests the highest cost is >12,000, where the max data value is actually 5,099.99. This happens to the Score values too.

I need a hyperlink on each bar, but when I add the line "href": {"field": "url", "type": "nominal"}, Vega seems to ignore "aggregate": "min". The example has href added to the X-axis, I have tried adding it to both Y-axes with the same result.

Another issue I have, that maybe a question for another day, is that the sort is ignored, or at least, I cannot get it to sort by Score from small to large.

If anyone could point me in the right direction, I'd be most grateful.

Vega-lite code:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "Laptop comparison chart",
  "width": "container",
  "height": 550,
  "data": {
    "url": "https://gist.githubusercontent.com/woter1832/aa1fb67047ce77e1d48a698cd0828c10/raw/f5ce46d186f6c83b6246824f17c08bb5afd49210/laptop-selection-basic.csv"
  },
  "encoding": {
    "x": {
      "field": "Model",
      "type": "nominal",
      "axis": {"labelAngle": 45, "title": "Model"}
    },
    "href":{"field":"url","type": "nominal"}
  },
  "layer": [
    {
      "mark": {"type": "bar", "fill": "steelblue", "width": {"band": 0.75}},
      "encoding": {
        "y": {
          "field": "Score",
          "type": "quantitative",
          "axis": {"title": "Score"},
          "scale": {"rangeMax": -150},
          "aggregate": "min"
        },
        "xOffset": {"value": 0},
        "color": {
          "field": "x",
          "title": "Legend",
          "scale": {
            "domain": ["Score", "Cost"],
            "range": ["steelblue", "orange"]
          }
        }
      }
    },
    {
      "mark": {"type": "bar", "color": "orange", "width": {"band": 0.4}},
      "encoding": {
        "y": {
          "field": "Cost",
          "type": "quantitative",
          "axis": {"title": "Cost(GBP)", "orient": "right", "format": ".0f"},
          "aggregate": "min"
        },
        "xOffset": {"value": 0}
      }
    }
  ],
  "resolve": {"scale": {"y": "independent"}}
}

Upvotes: 1

Views: 25

Answers (0)

Related Questions