Forum Discussion
how to implement Deneb chart with many column labels?
- 1 year ago
Apologies for the delay. I have been sick for the last couple of weeks and am trying to catch up on things before the holidays. I've added columns to mimic the original mockup, so you should be able to adapt accordingly. Note that x-positioning is hard-coded, but this could be done via transforms - either way, I'm hoping this is enough for you to have a think about your version. A workbook containing the spec is also attached to this post.
Spec
{ "data": { "name": "dataset" }, "transform": [ { "calculate": "datum['Sector'] + '-' + datum['Channel']", "as": "grain" }, { "window": [ { "op": "row_number", "as": "group_row_number" } ], "groupby": [ "Sector" ] } ], "spacing": 0, "hconcat": [ /* Labels */ { "width": 150, "layer": [ /* "Group" (sector) */ { "transform": [ { "filter": "datum['group_row_number'] == 1" } ], "mark": { "type": "text", "style": [ "category_label" ] }, "encoding": { "text": { "field": "Sector" }, "x": { "value": 0 } } }, /* Channel column */ { "mark": { "type": "text", "style": [ "category_label" ] }, "encoding": { "text": { "field": "Channel" }, "x": { "value": 75 } } }, /* Sales Value */ { "mark": { "type": "text", "style": [ "value_label" ] }, "encoding": { "text": { "field": "Sales" }, "x": { "value": 175 } } }, /* Net Sales Value */ { "mark": { "type": "text", "style": [ "value_label" ] }, "encoding": { "text": { "field": "Net Sales" }, "x": { "value": 225 } } }, /* Profit Value */ { "mark": { "type": "text", "style": [ "value_label" ] }, "encoding": { "text": { "field": "Profit", "format": ".1%" }, "x": { "value": 275 } } } ], "encoding": { "y": { "field": "grain" } } }, /* Negative-facing stack */ { "width": 150, "transform": [ { "fold": [ "Sales", "Net Sales" ], "as": [ "metric", "value" ] } ], "layer": [ { "mark": { "type": "bar" } } ], "encoding": { "y": { "field": "grain" }, "x": { "field": "value", "type": "quantitative", "scale": { "reverse": true } }, "color": { "field": "metric", "legend": null, "scale": { "range": ["#cee9fb", "#99cef7"] } } } }, /* Positive-facing stack */ { "width": 150, "layer": [ { "mark": { "type": "bar", "color": "#d5a0c7" } } ], "encoding": { "x": { "field": "Profit", "type": "quantitative" }, "y": { "field": "grain" } } } ] }Config
{ "view": { "stroke": "transparent" }, "axis": { "title": false, "ticks": false, "grid": false, "domain": false, "labels": false }, "style": { "category_label": { "align": "left" }, "value_label": { "align": "right" } } }Cheers,
Daniel
exactly!
if you have similar template it would be great.
only thing I'd like 2 more numeric columns in a matrix on the right to "fragmented" one
Apologies for the delay. I have been sick for the last couple of weeks and am trying to catch up on things before the holidays. I've added columns to mimic the original mockup, so you should be able to adapt accordingly. Note that x-positioning is hard-coded, but this could be done via transforms - either way, I'm hoping this is enough for you to have a think about your version. A workbook containing the spec is also attached to this post.
Spec
{
"data": {
"name": "dataset"
},
"transform": [
{
"calculate": "datum['Sector'] + '-' + datum['Channel']",
"as": "grain"
},
{
"window": [
{
"op": "row_number",
"as": "group_row_number"
}
],
"groupby": [
"Sector"
]
}
],
"spacing": 0,
"hconcat": [
/* Labels */
{
"width": 150,
"layer": [
/* "Group" (sector) */
{
"transform": [
{
"filter": "datum['group_row_number'] == 1"
}
],
"mark": {
"type": "text",
"style": [
"category_label"
]
},
"encoding": {
"text": {
"field": "Sector"
},
"x": {
"value": 0
}
}
},
/* Channel column */
{
"mark": {
"type": "text",
"style": [
"category_label"
]
},
"encoding": {
"text": {
"field": "Channel"
},
"x": {
"value": 75
}
}
},
/* Sales Value */
{
"mark": {
"type": "text",
"style": [
"value_label"
]
},
"encoding": {
"text": {
"field": "Sales"
},
"x": {
"value": 175
}
}
},
/* Net Sales Value */
{
"mark": {
"type": "text",
"style": [
"value_label"
]
},
"encoding": {
"text": {
"field": "Net Sales"
},
"x": {
"value": 225
}
}
},
/* Profit Value */
{
"mark": {
"type": "text",
"style": [
"value_label"
]
},
"encoding": {
"text": {
"field": "Profit",
"format": ".1%"
},
"x": {
"value": 275
}
}
}
],
"encoding": {
"y": {
"field": "grain"
}
}
},
/* Negative-facing stack */
{
"width": 150,
"transform": [
{
"fold": [
"Sales",
"Net Sales"
],
"as": [
"metric",
"value"
]
}
],
"layer": [
{
"mark": {
"type": "bar"
}
}
],
"encoding": {
"y": {
"field": "grain"
},
"x": {
"field": "value",
"type": "quantitative",
"scale": {
"reverse": true
}
},
"color": {
"field": "metric",
"legend": null,
"scale": {
"range": ["#cee9fb", "#99cef7"]
}
}
}
},
/* Positive-facing stack */
{
"width": 150,
"layer": [
{
"mark": {
"type": "bar",
"color": "#d5a0c7"
}
}
],
"encoding": {
"x": {
"field": "Profit",
"type": "quantitative"
},
"y": {
"field": "grain"
}
}
}
]
}
Config
{
"view": {
"stroke": "transparent"
},
"axis": {
"title": false,
"ticks": false,
"grid": false,
"domain": false,
"labels": false
},
"style": {
"category_label": {
"align": "left"
},
"value_label": {
"align": "right"
}
}
}
Cheers,
Daniel