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
Hey Anonymous - based on the mockup and the data, I interpret your desired output as this. Is this correct? If not, please advise what needs fixing, and I will find more time to finish this up.
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
- dm-p1 year agoSuper User
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