vega-lite: Where to put hconcat when you you want a faceted chart next to a table? - Stack Overflow

admin管理员组

文章数量:1352865

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:

1. Question section & question text (already incorporated via facet)
2. 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.

本文标签： vegalite Where to put hconcat when you you want a faceted chart next to a tableStack Overflow