I am struggling to understand where to incorporate an hconcat
to go along with a faceted chart I have already made.
I am trying to build a vega-lite visual that looks like this:
I was starting with the likert example from the vega-lite documentation. My use case has some differences I want to incorporate:
- Question section & question text (already incorporated via
facet
) - I want to display a few summarized stats in text (mean, median at least), so want to add those like a table to the right
I cannot figure out how to incorporate #2 so both the circle marks and the tabular items are on the same "row".
Current code:
{
"data": {
"values": [{
"section": "sectionA",
"question": "question1",
"option": "Disagree",
"value": 1,
"responses": 3,
"low": "Disagree",
"high": "Agree",
"mean": 2
},{
"section": "sectionA",
"question": "question1",
"option": "Neutral",
"value": 2,
"responses": 4,
"low": "Disagree",
"high": "Agree",
"mean": 2
},{
"section": "sectionA",
"question": "question1",
"option": "Agree",
"value": 3,
"responses": 3,
"low": "Disagree",
"high": "Agree",
"mean": 2
},{
"section": "sectionB",
"question": "question2",
"option": "Disagree",
"value": 1,
"responses": 5,
"low": "Disagree",
"high": "Agree",
"mean": 1.7
},{
"section": "sectionB",
"question": "question2",
"option": "Neutral",
"value": 2,
"responses": 3,
"low": "Disagree",
"high": "Agree",
"mean": 1.7
},{
"section": "sectionB",
"question": "question2",
"option": "Agree",
"value": 3,
"responses": 2,
"low": "Disagree",
"high": "Agree",
"mean": 1.7
}]
},
"facet": {
"row": {
"field": "section",
"type": "nominal",
"header": {
"title": null,
"labelAlign": "left",
"labelAngle": 0,
"labelAnchor": "middle",
"labelBaseline": "middle",
"labelLineHeight": 20,
"labelFontSize": 14
}
}
},
"spec": {
"encoding": {
"y": {
"field": "question",
"type": "nominal",
"axis": {
"title": null,
"tickBand": "extent",
"labelAlign": "left",
"labelAngle": 0,
"labelFontSize": 11,
"labelLimit": 0,
"offset": 150,
"grid": true
}
},
"x": {
"type": "quantitative",
"scale": {"nice": true},
"title": null,
"axis": {"grid": false, "values": [1, 2, 3], "title": null}
},
"tooltip": [
{"field": "option","title": "Response Option"},
{"field": "responses"}]
},
"layer": [{
"mark": {"type": "circle", "color": "#00694e"},
"encoding": {
"x": {"field": "value"},
"size": {"field": "responses"}
}
},{
"mark": {"type": "text", "x": -5, "align": "right"},
"encoding": {"text": {"field": "low"}}
},{
"mark": {"type": "text", "x": 315, "align": "left"},
"encoding": {"text": {"field": "high"}}
}]
},
"resolve": {"scale": {"x": "shared", "y": "independent"}}
}
Note: I know the repeated mean is probably odd and I could calculate that on the fly. However, I am unsure median would be as easy to calculate given the data structure, and we're working with a data model with rows in the tens of millions, so we're aggregating where we can.