0

I have a timeline bubble chart (shown with dummy data) with a reference line for the current date. bubble chart

I want to add a label for the reference line that just says "today's date". When I try to add one it adds a label with today's date to every bubble. I would like a label for the reference line on top where it would be readable.

Here is my code:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {"name": "dataset"},
  "width": 950,
  "height": 400,
  "transform": [
    {
      "calculate": "now()",
      "as": "today"
    }
  ],
  "encoding": {
    "x": {
      "field": "Date",
      "type": "temporal",
      "axis": {
        "grid": false,
        "format": "Q%q %Y"
      }
    },
    "y": {
      "field": "Prob",
      "type": "quantitative"
    }
  },
  "layer": [
    {
      "mark": {
        "type": "circle",
        "opacity": 0.8,
        "stroke": "black",
        "strokeWidth": 1
      },
      "encoding": {
        "size": {
          "field": "Amount",
          "type": "quantitative"
        },
        "color": {
          "field": "Group",
          "type": "nominal"
        }
      }
    },
    {
      "mark": {
        "type": "circle",
        "opacity": 0.8,
        "stroke": "black",
        "strokeWidth": 1
      },
      "encoding": {
        "size": {
          "field": "Amount",
          "type": "quantitative",
          "scale": {"rangeMax": 1000}
        },
        "color": {
          "field": "Group",
          "type": "nominal"
        }
      }
    },
    {
      "mark": {
        "type": "rule",
        "opacity": 0.6
      },
      "encoding": {
        "x": {
          "field": "today",
          "type": "temporal"
        },
        "size": {"value": 1},
        "color": {"value": "grey"}
      }
    }
  ]
}

I tried adding this to the layer and of course it added todays date to each bubble instead of the reference line:

{
          "mark": "text",
          "encoding": {
            "text": {
              "field": "today",
              "type": "temporal"
            }
          }
        }

Thanks!!

Davide Bacci
  • 16,647
  • 3
  • 10
  • 36
Alyssa
  • 21
  • 1

1 Answers1

0

I was able to figure it out. I had to put this in a layer within a layer that contained just the rule for todays date and the text for todays date.

   {
          "mark": {
            "type": "text",
            "align": "left",
            "baseline": "bottom",
            "dx":-15
          },
          "encoding": {
            "text": {"value": "Today"},
            "x": {
              "field": "today",
              "type": "temporal"
            },
            "y": {"value": 0}
          }
        }
Mike Pennington
  • 41,899
  • 19
  • 136
  • 174
Alyssa
  • 21
  • 1