Vega-lite 和/或 Vega 中是否可能出现迷你图？

Question

Came across the following example using D3 yesterday...

https://observablehq.com/@mbostock/covid-cases-by-state

Is this possible to be replicated in Vega-lite and/or Vega?

Answer 1

You can have a look at the following example I was able to re-create: Vega-editor

Hope you are able to use it. Any feedback on how we can improve on this would be appreciated.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "url": "https://api.covidtracking.com/v1/states/daily.csv",
    "name": "dataset",
    "format": {"type": "csv"}
  },
  "facet": { 
    "row": {
      "field": "state",
      "sort": {
        "field": "positiveIncrease",
        "op": "average",
        "order": "descending"
      }
    }
  },
  "spec": {
    "transform": [
    {
      "calculate": "datetime(slice(datum.date,0,4), slice(datum.date,4,6),[slice(datum.date,6,8)])",
      "as": "__date"
    }
  ],
    "height": 20,
    "layer": [
      {
        "mark": {
          "type": "area"
        },
        "encoding": {
          "x": {
            "field": "__date",
            "type": "temporal",
            "timeUnit": "yearmonthdate",
            "axis": {
              "title": null,
              "orient": "top",
              "domain": false,
              "ticks": false,
              "labels": false,
              "grid": false
            }
          },
          "y": {
            "field": "positiveIncrease",
            "aggregate": "sum",
            "type": "quantitative",
            "axis": {
              "title": null,
              "domain": false,
              "labels": false,
              "ticks": false,
              "grid": false
            }
          }
        }
      },
      {
        "mark": {
          "type": "text",
          "align": "right",
          "dx": -120
        },
        "encoding": {
          "text": {
            "aggregate": {
              "argmax": "__date"
            },
            "field": "positiveIncrease",
            "format": ",.0f",
            "type": "quantitative"
          }
        }
      },
      {
        "mark": {
          "type": "text",
          "align": "right",
          "dx": -180
        },
        "encoding": {
          "text": {
            "aggregate": {
              "argmax": "__date"
            },
            "field": "positive",
            "format": ",.0f",
            "type": "quantitative"
          }
        }
      }
    ]
  },
  "resolve": {
    "scale": {"y": "independent"}
  },
  "config": {
  "view": {"stroke": "transparent"},
  "header": {
    "title": null,
    "labelAngle": 0,
    "labelAlign": "left",
    "labelFontSize": 12,
    "labelFont": "Arial"
  },
  "text": {
    "font": "Arial",
    "fontSize": 12
  },
  "facet": {"spacing": 1},
  "area":{
      "interpolate": "monotone",
          "line": {
            "color": "red",
            "strokeWidth": 1,
            "interpolate": "monotone"
          },
          "fill": "#faa"
  }
}

}