Reputation: 3100
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.
{
"$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