formatting text marks in a hconcat composition

I have this gist: my sample table

I have two questions:

• Can I control the spacing between the 2nd "sumofvals" and the 3rd "the individuals" view control separately, I want them closer together
• Can I extend the coloring to the "header" as well

Tom

You can uniformly control spacing but not individually. However, you can add in some fake views to hack it as follows.

As for the background colours, these are axis labels and the way I have done this in the past is to overlay marks at the right axis position. Again this is all very hacky and you're probably best using Vega.

{
"data": {
"values": [
{
"rowh": "Asia",
"rowgroup": "I",
"vals": 2000000,
"val": 3000000,
"valt": 11000000
},
{
"rowh": "Asia",
"rowgroup": "II",
"vals": 2000000,
"val": 8000000,
"valt": 11000000
},
{
"rowh": "Europe",
"rowgroup": "I",
"vals": 2000000,
"val": 3000000,
"valt": 6000000
},
{
"rowh": "Europe",
"rowgroup": "II",
"vals": 2000000,
"valt": 1000000,
"val": 6000000
},
{
"rowh": "US",
"rowgroup": "I",
"vals": 2000000,
"val": 2000000,
"valt": 7000000
},
{
"rowh": "US",
"rowgroup": "II",
"vals": 2000000,
"val": 3000000,
"valt": 7000000
}
]
},
"transform": [
{
"joinaggregate": [{"field": "val", "op": "sum", "as": "rowgroupsum"}],
"groupby": ["rowh"]
},
{"calculate": "'Start'", "as": "labels"},
{"calculate": "'End'", "as": "labele"},
{"calculate": "'sumofvals'", "as": "labelvalsum"},
{"calculate": "datum['vals']+datum['rowgroupsum']", "as": "labelse"}
],
"config": {"concat": {"spacing": 0}},
"hconcat": [
{
"width": 50,
"mark": {"type": "text", "align": "center"},
"encoding": {
"y": {"field": "rowh", "type": "nominal"},
"x": {
"field": "labels",
"type": "nominal",
"axis": {"title": null, "orient": "top", "labelAngle": 0}
},
"text": {"field": "vals", "type": "quantitative", "format": "0.1s"}
}
},
{"width": 30, "mark": {"type": "text"}},
{
"width": 50,
"view": {"fill": "steelblue", "stroke": "black"},
"layer": [
{"mark": {"type": "bar"}, "encoding": {"y": {"value": -20}}},
{
"mark": {"type": "text"},
"encoding": {"y": {"value": -10}, "text": {"value": "sumofvals"}}
},
{
"mark": {"type": "text", "align": "center"},
"encoding": {
"y": {"field": "rowh", "type": "nominal", "axis": null},
"x": {
"field": "labelvalsum",
"type": "nominal",
"axis": {"title": null, "orient": "top", "labelAngle": 0}
},
"text": {
"field": "rowgroupsum",
"type": "quantitative",
"format": "0.1s"
}
}
}
]
},
{
"width": 50,
"view": {"fill": "lightgrey"},
"mark": {"type": "text", "align": "center"},
"encoding": {
"y": {"field": "rowh", "type": "nominal", "axis": null},
"x": {
"field": "rowgroup",
"type": "nominal",
"axis": {"title": null, "orient": "top", "labelAngle": 0}
},
"text": {"field": "val", "type": "quantitative", "format": "0.1s"}
}
},
{"width": 30, "mark": {"type": "text"}},
{
"width": 50,
"view": {"fill": "orange"},
"mark": {"type": "text", "align": "center"},
"encoding": {
"y": {"field": "rowh", "type": "nominal", "axis": null},
"x": {
"field": "labele",
"type": "nominal",
"axis": {"title": null, "orient": "top", "labelAngle": 0}
},
"text": {"field": "labelse", "type": "quantitative", "format": "0.2s"}
}
}
]
}

Its a bit of a hack but try this..

Above your hconcat add a spacing setting:

"spacing": 0,
"hconcat": [

Then add some new dummy layers where you want your actual spaces. For example after concat 1 and 3:

{"width": 20, "mark": {"type": "text", "align": "center"}},

When you say Header do you mean your X axis labels?

For your label colors you can just add in your X axis axis code after the labelAngle.

Do this for each hconcat element and change the color to grey, steelblue etc

"labelAngle": 0, "labelColor": "orange"

Adam