Setting minimum x axis unit to a day

Question

With an area chart that can be zoomed in the x-axis (date) how can I avoid zooming down to hours and keep it date level?

In this example I've got two area charts, the bottom one can be brushed to zoom in on the top one.

(1)

Zooming in using the lower overview chart goes all the way to hours, however I want it to stop at date level and not show hours.

(2)

Setting tickCount to day does this when zoomed in:

(3)

However zooming back out it loses the view by year and month:

(4)

In other words, I want the top chart (1) when zoomed out and the third chart (3) when zoomed in.

This is the code for the charts (3) and (4):

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {"url": "data/sp500.csv"},
  "transform": [
    {
      "filter": {"timeUnit": "year", "field": "date", "lte": "2000"}
    }
  ],
  "vconcat": [{
    "width": 480,
    "mark": "area",
    "encoding": {
      "x": {
        "field": "date",
        "type": "temporal",
        "scale": {"domain": {"param": "brush"}},
        "axis": {"title": "", "tickCount": "day"}
      },
      "y": {"field": "price", "type": "quantitative"}
    }
  }, {
    "width": 480,
    "height": 60,
    "mark": "area",
    "params": [{
      "name": "brush",
      "select": {"type": "interval", "encodings": ["x"]}
    }],
    "encoding": {
      "x": {
        "field": "date",
        "type": "temporal"
      },
      "y": {
        "field": "price",
        "type": "quantitative",
        "axis": {"tickCount": 3, "grid": false}
      }
    }
  }]
}

Answer 1

if you remove your "tickCount":"day" and use "timeUnit":"yearmonthdate" you may have a more automated solution that fits all zooming scenarios.

Try it out.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {"url": "data/sp500.csv"},
  "transform": [
    {"filter": {"timeUnit": "year", "field": "date", "lte": "2000"}}
  ],
  "vconcat": [
    {
      "width": 480,
      "mark": "area",
      "encoding": {
        "x": {
          "field": "date",
          "type": "temporal",
          "timeUnit": "yearmonthdate",
          "scale": {"domain": {"param": "brush"}},
          "axis": {
            "tickCount": 10,
            "labelAlign": "left",
            "labelExpr": "[timeFormat(datum.value, '%d'), timeFormat(datum.value, '%b'),timeFormat(datum.value, '%Y')]",
            "labelOffset": 4,
            "title": "",
            "labelFontSize": 8,
            "labelPadding": -28,
            "tickSize": 32
          }
        },
        "y": {"field": "price", "type": "quantitative"},
        "opacity": {"value": 0.5}
      }
    },
    {
      "width": 480,
      "height": 60,
      "mark": "area",
      "params": [
        {"name": "brush", "select": {"type": "interval", "encodings": ["x"]}}
      ],
      "encoding": {
        "x": {"field": "date", "type": "temporal", "timeUnit": "yearmonth"},
        "y": {
          "field": "price",
          "type": "quantitative",
          "axis": {"tickCount": 3, "grid": false}
        }
      }
    }
  ]
}