Deneb: Multi-layer card

Hi Salle,

If you want to explicitly position a mark you need to use the value encoding rather than field. This will let you specify an x/y position relative to the view (which is the area reserved for your axes rather than the container).

You could change your text mark's encoding channel as follows:

      "encoding": {
        "x": {
          "value": 0
        },
        "y": {
          "value": 10
        }
      }

Which would plot your make at 0, 10 (noting that explicit coordinates in SVG/HTML start from the top-left), e.g.:

The challenge here is that because you are explicitly stating the same coordinates for each occurrence of your data, this will overlay all marks on top of each other (which is why they appear 'thick').

If you want to plot the position relative to your data (which I assume would be the point mark i nyour other layer, you would probably want to mix the encoding with both value (for explicit x positioning) and field (for y-positioning) - and you could probably share the y-encoding between all layers (at the top-level), e.g.:

{
  "data": {
    "values": [
      {"A": "0", "B": 10},
      {"A": "0", "B": 9},
      {"A": "0", "B": 8},
      {"A": "0", "B": 7},
      {"A": "0", "B": 6},
      {"A": "0", "B": 5},
      {"A": "0", "B": 4},
      {"A": "0", "B": 3},
      {"A": "0", "B": 2},
      {"A": "0", "B": 1}
    ]
  },
  "title": "Information",
  "background": "lightblue",
  "encoding": {
    "x": {
      "field": "A",
      "type": "quantitative",
      "scale": {"domain": [0, 1]}
    },
    "y": {
      "field": "B",
      "type": "quantitative"
    }
  },
  "layer": [
    {
      "mark": {"type": "point"}
    },
    {
      "mark": {
        "text": "my text mark",
        "type": "text",
        "align": "left",
        "font": "sans-serif",
        "fontSize": 16,
        "dx": 10
      },
      "encoding": {
        "x": {"value": 0}
      }
    }
  ]
}

Note that I've removed some of the redundant properties from your original spec just to help highlight what is needed, and I've also used a dx property to offset the text mark 10px to the right of the x-encoded value so that it doesn't overlap. If you don't need this, then you could just delete it so it sits right on the x-value.

I'm still not 100% sure of your final intended result, but here's how I might attempt having multiple 'cards' with two text marks inside them - maybe this will be something you can use to evolve your idea:

{
  "data": {
    "values": [
      {"A": "0", "B": 10, "mean": 8},
      {"A": "0", "B": 9, "mean": 8.2},
      {"A": "0", "B": 8, "mean": 8.5},
      {"A": "0", "B": 7, "mean": 9.1},
      {"A": "0", "B": 6, "mean": 9.8},
      {"A": "0", "B": 5, "mean": 3.3},
      {"A": "0", "B": 4, "mean": 7.8},
      {"A": "0", "B": 3, "mean": 8.1},
      {"A": "0", "B": 2, "mean": 4.7},
      {"A": "0", "B": 1, "mean": 6.3}
    ]
  },
  "encoding": {
    "y": {
      "field": "B",
      "type": "nominal",
      "axis": null
    }
  },
  "layer": [
    {
      "description": "Card - using bar that spans width",
      "mark": {
        "type": "bar",
        "fill": "transparent",
        "stroke": "black"
      }
    },
    {
      "description": "Measure label",
      "mark": {
        "type": "text",
        "baseline": "bottom",
        "dy": -2
      },
      "encoding": {
        "text": {"field": "mean"}
      }
    },
    {
      "description": "Static text",
      "mark": {
        "type": "text",
        "baseline": "top",
        "dy": 2,
        "text": "Diameter mean"
      }
    }
  ]
}

I've added a "mean" field with random values just to show variety in the cards.

The two text marks are baselined and dy'd so that one sits 'above' the centre and the other sits 'below' the centre. As I said, this may not be exacly what you are after but may give you some additional thoughts on how to approach.

If you need further assistance, it might be worth posting a mockupu of what you expect a card to =look like and I can see if I can tweak accordingly.

Good luck!

Daniel