使用 VEGA-LITE 绘制多个 "columns" 并包含图例
Plot multiple "columns" with VEGA-LITE and include a legend
我有以下最少的数据:
[
{"date": "2019-01-01", "foo": 10000, "bar": 10, "goo": 30},
{"date": "2019-01-02", "foo": 30000, "bar": 20, "goo": 20},
{"date": "2019-01-03", "foo": 40000, "bar": 20, "goo": 10},
{"date": "2019-01-04", "foo": 1000, "bar": 60, "goo": 20}
]
我使用 VEGA-LITE 绘制的:
<!DOCTYPE html>
<html>
<head>
<title>Embedding Vega-Lite</title>
<script src="https://cdn.jsdelivr.net/npm/vega@5.4.0"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite@3.3.0"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed@4.2.0"></script>
</head>
<body>
<div id="vis"></div>
<script type="text/javascript">
var yourVlSpec = {
"$schema": "https://vega.github.io/schema/vega-lite/v3.json",
"Title": "Insights stats",
"description": "Overview of insights stats",
"width": 1000,
"height": 450,
"data": {
"url": "./data.json"
},
"layer": [
{
"mark": "line",
"encoding": {
"x": {
"field": "date",
"type": "temporal",
"title": "Date"
},
"y": {
"field": "foo",
"type": "quantitative",
"title": "Some Foo"
}
}
},
{
"mark": {
"type": "line",
"stroke": "firebrick"
},
"encoding": {
"x": {
"field": "date",
"type": "temporal"
},
"y": {
"field": "bar",
"type": "quantitative",
"title": null,
"scale": { "domain": [0, 100] }
}
}
},
{
"mark": {
"type": "line",
"stroke": "red"
},
"encoding": {
"x": {
"field": "date",
"type": "temporal"
},
"y": {
"field": "goo",
"type": "quantitative",
"title": "Ratio (%)",
"scale": { "domain": [0, 100] }
}
}
}
],
"resolve": { "scale": { "y": "independent" } }
};
vegaEmbed('#vis', yourVlSpec);
</script>
</body>
</html>
我没有为每行添加合适的图例。我错过了什么?
Vega-Lite 将为图表生成图例,前提是存在保证它的编码,例如颜色、形状等。
在绘制多列的情况下,一个有用的模式是使用 Fold Transform in order to specify your colors via an encoding rather than by manual layering. The result looks something like this (vega editor link):
{
"$schema": "https://vega.github.io/schema/vega-lite/v3.json",
"title": "Insights stats",
"description": "Overview of insights stats",
"width": 1000,
"height": 450,
"data": {
"values": [
{"date": "2019-01-01", "foo": 10, "bar": 10, "goo": 30},
{"date": "2019-01-02", "foo": 30, "bar": 20, "goo": 20},
{"date": "2019-01-03", "foo": 40, "bar": 20, "goo": 10},
{"date": "2019-01-04", "foo": 1, "bar": 60, "goo": 20}
]
},
"transform": [
{"fold": ["foo", "bar", "goo"]}
],
"mark": "line",
"encoding": {
"x": {"field": "date", "type": "temporal"},
"y": {"field": "value", "type": "quantitative"},
"color": {"field": "key", "type": "nominal"}
}
}
我有以下最少的数据:
[
{"date": "2019-01-01", "foo": 10000, "bar": 10, "goo": 30},
{"date": "2019-01-02", "foo": 30000, "bar": 20, "goo": 20},
{"date": "2019-01-03", "foo": 40000, "bar": 20, "goo": 10},
{"date": "2019-01-04", "foo": 1000, "bar": 60, "goo": 20}
]
我使用 VEGA-LITE 绘制的:
<!DOCTYPE html>
<html>
<head>
<title>Embedding Vega-Lite</title>
<script src="https://cdn.jsdelivr.net/npm/vega@5.4.0"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite@3.3.0"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed@4.2.0"></script>
</head>
<body>
<div id="vis"></div>
<script type="text/javascript">
var yourVlSpec = {
"$schema": "https://vega.github.io/schema/vega-lite/v3.json",
"Title": "Insights stats",
"description": "Overview of insights stats",
"width": 1000,
"height": 450,
"data": {
"url": "./data.json"
},
"layer": [
{
"mark": "line",
"encoding": {
"x": {
"field": "date",
"type": "temporal",
"title": "Date"
},
"y": {
"field": "foo",
"type": "quantitative",
"title": "Some Foo"
}
}
},
{
"mark": {
"type": "line",
"stroke": "firebrick"
},
"encoding": {
"x": {
"field": "date",
"type": "temporal"
},
"y": {
"field": "bar",
"type": "quantitative",
"title": null,
"scale": { "domain": [0, 100] }
}
}
},
{
"mark": {
"type": "line",
"stroke": "red"
},
"encoding": {
"x": {
"field": "date",
"type": "temporal"
},
"y": {
"field": "goo",
"type": "quantitative",
"title": "Ratio (%)",
"scale": { "domain": [0, 100] }
}
}
}
],
"resolve": { "scale": { "y": "independent" } }
};
vegaEmbed('#vis', yourVlSpec);
</script>
</body>
</html>
我没有为每行添加合适的图例。我错过了什么?
Vega-Lite 将为图表生成图例,前提是存在保证它的编码,例如颜色、形状等。
在绘制多列的情况下,一个有用的模式是使用 Fold Transform in order to specify your colors via an encoding rather than by manual layering. The result looks something like this (vega editor link):
{
"$schema": "https://vega.github.io/schema/vega-lite/v3.json",
"title": "Insights stats",
"description": "Overview of insights stats",
"width": 1000,
"height": 450,
"data": {
"values": [
{"date": "2019-01-01", "foo": 10, "bar": 10, "goo": 30},
{"date": "2019-01-02", "foo": 30, "bar": 20, "goo": 20},
{"date": "2019-01-03", "foo": 40, "bar": 20, "goo": 10},
{"date": "2019-01-04", "foo": 1, "bar": 60, "goo": 20}
]
},
"transform": [
{"fold": ["foo", "bar", "goo"]}
],
"mark": "line",
"encoding": {
"x": {"field": "date", "type": "temporal"},
"y": {"field": "value", "type": "quantitative"},
"color": {"field": "key", "type": "nominal"}
}
}