Skip to content

Commit

Permalink
feat: make bar & rect marks support bandPosition (allow center-alignm…
Browse files Browse the repository at this point in the history
…ent with ticks) (#9126)

* docs(examples): examples for using bandPosition=0

* chore: update examples [CI]

* fix: calculate offseted rect position for timeUnit if bandPosition != 0.5

* fix: use offsetted rect position in aggregate

* fix: use offsetted rect in mark position

* fix: use offsetted rect in scale domain

* fix: correctly read default bandPosition

* fix: apply bandOffset to grouped bars with timeUnit

* chore: update examples [CI]

* style: auto-formatting [CI]

* docs: update docs

* chore: update TOC [CI]

---------

Co-authored-by: GitHub Actions Bot <[email protected]>
  • Loading branch information
kanitw and GitHub Actions Bot authored Oct 9, 2023
1 parent 9aab68e commit bd014eb
Show file tree
Hide file tree
Showing 49 changed files with 1,947 additions and 80 deletions.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
171 changes: 171 additions & 0 deletions examples/compiled/bar_binned_yearmonth_grouped_center_band.vg.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,171 @@
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"description": "Stock price over time.",
"background": "white",
"padding": 5,
"width": 200,
"height": 200,
"style": "cell",
"data": [
{
"name": "source_0",
"url": "data/stocks.csv",
"format": {"type": "csv", "parse": {"date": "date"}},
"transform": [
{
"type": "filter",
"expr": "inrange(time(datum[\"date\"]), [time(datetime(2005, 0, 1, 0, 0, 0, 0)), time(datetime(2005, 2, 1, 0, 0, 0, 0))])"
},
{
"type": "formula",
"expr": "timeOffset('month', datum['date'], 1)",
"as": "date_end"
},
{
"type": "formula",
"expr": "0.5 * timeOffset('month', datum['date'], -1) + 0.5 * datum['date']",
"as": "date_offsetted_rect_start"
},
{
"type": "formula",
"expr": "0.5 * datum['date'] + 0.5 * datum['date_end']",
"as": "date_offsetted_rect_end"
},
{
"type": "stack",
"groupby": ["date", "symbol"],
"field": "price",
"sort": {"field": [], "order": []},
"as": ["price_start", "price_end"],
"offset": "zero"
},
{
"type": "filter",
"expr": "(isDate(datum[\"date\"]) || (isValid(datum[\"date\"]) && isFinite(+datum[\"date\"]))) && isValid(datum[\"price\"]) && isFinite(+datum[\"price\"])"
}
]
}
],
"marks": [
{
"name": "marks",
"type": "rect",
"style": ["bar"],
"from": {"data": "source_0"},
"encode": {
"update": {
"fill": {"scale": "color", "field": "symbol"},
"ariaRoleDescription": {"value": "bar"},
"description": {
"signal": "\"date: \" + (timeFormat(datum[\"date\"], timeUnitSpecifier([\"year\",\"month\"], {\"year-month\":\"%b %Y \",\"year-month-date\":\"%b %d, %Y \"}))) + \"; price: \" + (format(datum[\"price\"], \"\")) + \"; symbol: \" + (isValid(datum[\"symbol\"]) ? datum[\"symbol\"] : \"\"+datum[\"symbol\"])"
},
"xc": {
"scale": "x",
"field": "date",
"offset": {"scale": "xOffset", "field": "symbol", "band": 0.5}
},
"width": {"signal": "max(0.25, bandwidth('xOffset'))"},
"y": {"scale": "y", "field": "price_end"},
"y2": {"scale": "y", "field": "price_start"}
}
}
}
],
"scales": [
{
"name": "x",
"type": "time",
"domain": {
"data": "source_0",
"fields": ["date_offsetted_rect_start", "date_offsetted_rect_end"]
},
"range": [0, {"signal": "width"}]
},
{
"name": "y",
"type": "linear",
"domain": {"data": "source_0", "fields": ["price_start", "price_end"]},
"range": [{"signal": "height"}, 0],
"nice": true,
"zero": true
},
{
"name": "xOffset",
"type": "band",
"domain": {"data": "source_0", "field": "symbol", "sort": true},
"range": [
{
"signal": "-0.4 * (scale('x', datetime(2001, 1, 1, 0, 0, 0, 0)) - scale('x', datetime(2001, 0, 1, 0, 0, 0, 0)))"
},
{
"signal": "0.4 * (scale('x', datetime(2001, 1, 1, 0, 0, 0, 0)) - scale('x', datetime(2001, 0, 1, 0, 0, 0, 0)))"
}
]
},
{
"name": "color",
"type": "ordinal",
"domain": {"data": "source_0", "field": "symbol", "sort": true},
"range": "category"
}
],
"axes": [
{
"scale": "x",
"orient": "bottom",
"gridScale": "y",
"grid": true,
"tickCount": {"signal": "ceil(width/40)"},
"tickMinStep": {
"signal": "datetime(2001, 1, 1, 0, 0, 0, 0) - datetime(2001, 0, 1, 0, 0, 0, 0)"
},
"domain": false,
"labels": false,
"aria": false,
"maxExtent": 0,
"minExtent": 0,
"ticks": false,
"zindex": 0
},
{
"scale": "y",
"orient": "left",
"gridScale": "x",
"grid": true,
"tickCount": {"signal": "ceil(height/40)"},
"domain": false,
"labels": false,
"aria": false,
"maxExtent": 0,
"minExtent": 0,
"ticks": false,
"zindex": 0
},
{
"scale": "x",
"orient": "bottom",
"grid": false,
"title": "date",
"format": {
"signal": "timeUnitSpecifier([\"year\",\"month\"], {\"year-month\":\"%b %Y \",\"year-month-date\":\"%b %d, %Y \"})"
},
"labelFlush": true,
"labelOverlap": true,
"tickCount": {"signal": "ceil(width/40)"},
"tickMinStep": {
"signal": "datetime(2001, 1, 1, 0, 0, 0, 0) - datetime(2001, 0, 1, 0, 0, 0, 0)"
},
"zindex": 0
},
{
"scale": "y",
"orient": "left",
"grid": false,
"title": "price",
"labelOverlap": true,
"tickCount": {"signal": "ceil(height/40)"},
"zindex": 0
}
],
"legends": [{"fill": "color", "symbolType": "square", "title": "symbol"}]
}
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit bd014eb

Please sign in to comment.