[英]Are sparklines possible in Vega-lite and/or Vega?
昨天遇到了以下使用 D3 的示例......
https://observablehq.com/@mbostock/covid-cases-by-state
這有可能在 Vega-lite 和/或 Vega 中復制嗎?
您可以查看我能夠重新創建的以下示例: Vega-editor
希望你能夠使用它。 任何關於我們如何改進這一點的反饋都將不勝感激。
{
"$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"
}
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.