Vega条形图中的多个组带有单个条
我正在尝试制作多轴/多分组的vega图表。
这是我要实现的目标：
我希望能够首先按年份对数据进行排序：2018、2019等。然后我希望将其分为“ 0、1、2、3”类别，然后再查看每种尺寸的数据“ s，m，l”等 基本上，我想拥有的是：我在2019年的“第三批”中有多少件T恤衫。
我希望我说得很清楚。
我不希望堆叠条形，而要单个条形。 另外，我希望顶轴根据年份具有不同的颜色。
我将不胜感激。
这是我到目前为止所拥有的：
{
$schema: https://vega.github.io/schema/vega/v4.json
padding: {left: 5, top: 25, right: 5, bottom: 50}
data: [
{
name: source_0
values: [
{speedName: "A", connectionType: "s", speedCount: 0.1, speedValue: "2018"}
{speedName: "A", connectionType: "m", speedCount: 0.3, speedValue: "2018"}
{speedName: "A", connectionType: "l", speedCount: 0.5, speedValue: "2018"}
{speedName: "A", connectionType: "s", speedCount: 0.6, speedValue: "2019"}
{speedName: "A", connectionType: "m", speedCount: 0.3, speedValue: "2019"}
{speedName: "A", connectionType: "l", speedCount: 0.5, speedValue: "2019"}
{speedName: "A", connectionType: "l", speedCount: 0.9, speedValue: "2020"}
{speedName: "B", connectionType: "s", speedCount: 0.7, speedValue: "2019"}
{speedName: "B", connectionType: "m", speedCount: 0.2, speedValue: "2020"}
{speedName: "B", connectionType: "l", speedCount: 1.1, speedValue: "2018"}
{speedName: "C", connectionType: "s", speedCount: 0.6, speedValue: "2020"}
{speedName: "C", connectionType: "m", speedCount: 0.1, speedValue: "2018"}
{speedName: "C", connectionType: "l", speedCount: 0.2, speedValue: "2021"}
]
transform: [
{
type: collect
sort: {
field: ["connectionType", "speedName", "speedValue"]
order: ["ascending", "ascending", "ascending"]
}
}
{
type: collect
sort: {
field: ["connectionType", "speedValue", "speedNameSort"]
order: ["ascending", "ascending", "ascending"]
}
}
{type: "filter", expr: "datum.speedCount < 100"}
{
type: aggregate
groupby: ["speedValue", "speedName", "connectionType"]
ops: ["sum", "count"]
fields: ["speedCount", "speedValue"]
as: ["speedCount", "count"]
}
]
}
{
name: data_0
source: source_0
transform: [
{
type: aggregate
groupby: ["speedName", "connectionType", "speedValue"]
ops: ["sum"]
fields: ["speedCount"]
as: ["speedCount"]
}
{
type: filter
expr: (datum["speedCount"]) && isFinite(+datum["speedCount"])
}
]
}
{
name: column_domain
source: data_0
transform: [
{
type: aggregate
groupby: ["speedValue"]
}
]
}
]
signals: [
{name: "x_step", value: 30}
{
name: child_width
update: bandspace(domain('x').length, 0.1, 0.05) * x_step
}
{name: "child_height", value: 200}
]
layout: {
padding: 25
columns: {signal: "length(data('column_domain'))"}
bounds: full
align: all
}
marks: [
{
name: row_header
type: group
role: row-header
encode: {
update: {
height: {signal: "child_height"}
}
}
axes: [
{
orient: left
scale: y
domain: false
grid: false
labelOverlap: true
ticks: false
domain: false
labelPadding: 10
tickCount: {signal: "ceil(child_height/40)"}
offset: 2
tickCount: {signal: "ceil(child_height/40)"}
zindex: 0
labelColor: "#6c6c6c"
}
]
}
{
name: column_header
type: group
role: column-header
from: {data: "column_domain"}
sort: {field: "datum[\"speedValue\"]", order: "ascending"}
encode: {
update: {
width: {signal: "child_width"}
}
}
marks: [
{
name: rule
from: {data: "column_domain"}
type: rect
encode: {
enter: {
stroke: {scale: "colors", field: "speedValue"}
}
update: {
x: {signal: 0}
y: {signal: "-25"}
x2: {signal: "child_width"}
fill: {scale: "colors", field: "speedValue"}
strokeWidth: {signal: "2"}
}
}
}
{
type: text
from: {data: "column_domain"}
encode: {
update: {
x: {signal: "child_width/2", field: "speedValue"}
y: {signal: "-35"}
x2: {signal: "child_width"}
fill: {scale: "colors", field: "speedValue"}
fontSize: {signal: "child_width/10 + 5"}
align: {value: "center"}
text: {
signal: (parent["speedValue"]) ? parent["speedValue"] : ""+parent["speedValue"]
}
}
}
}
]
}
{
name: column_footer
type: group
role: column-footer
from: {
facet: {
name: facet
data: data_0
groupby: ["speedValue"]
}
}
sort: {field: "datum[\"speedValue\"]", order: "ascending"}
encode: {
update: {
width: {signal: "child_width"}
}
enter: {
x: {scale: "x", field: "speedName"}
}
}
axes: [
{
orient: bottom
scale: x
labelPadding: 25
labelAngle: 0
labelAlign: right
labelBaseline: middle
labelOverlap: true
ticks: false
speedValue: x
labelColor: "#6c6c6c"
grid: false
domainColor: "#6c6c6c"
domainWidth: 2.5
zindex: 0
}
]
marks: [
{
type: group
from: {
facet: {data: "facet", name: "facet", groupby: "speedName"}
}
encode: {
enter: {
x: {scale: "x", field: "speedName"}
}
}
scales: [
{
name: pos
type: band
range: width
domain: {data: "facet", field: "connectionType"}
}
]
axes: [
{
orient: bottom
scale: pos
labelAngle: 0
labelAlign: middle
labelBaseline: middle
labelOverlap: true
ticks: false
labelColor: "#6c6c6c"
grid: false
domainColor: "#6c6c6c"
domainWidth: 2.5
zindex: 0
offset: 10
}
]
}
]
}
{
name: cell
type: group
style: cell
from: {
facet: {
name: facet
data: data_0
groupby: ["speedValue"]
}
}
sort: {
field: ["datum[\"speedValue\"]"]
order: ["ascending"]
}
encode: {
update: {
width: {signal: "child_width"}
height: {signal: "child_height"}
}
}
marks: [
{
type: group
from: {
facet: {data: "facet", name: "facet", groupby: "speedName"}
}
encode: {
enter: {
x: {scale: "x", field: "speedName"}
}
}
scales: [
{
name: pos
type: band
range: width
domain: {data: "facet", field: "connectionType"}
}
]
axes: [
{
orient: bottom
scale: pos
tickSize: 3
labelPadding: 2
offset: 5
ticks: false
labels: false
}
]
marks: [
{
name: child_marks
type: rect
style: ["bar"]
from: {data: "facet"}
encode: {
update: {
fill: {scale: "color", field: "connectionType"}
ariaRoleDescription: {value: "bar"}
tooltip: {
signal: '''{"Speed Type": ''+datum["speedName"], "Speed": ''+datum["speedValue"], "Speed Count": datum['speedCount'], "Connection Type": ''+datum["connectionType"]}'''
}
x: {scale: "x", field: "connectionType"}
width: {scale: "x", band: 1}
y: {scale: "y", field: "speedCount"}
y2: {scale: "y", value: "0"}
}
}
}
]
}
]
}
]
scales: [
{
name: x
type: band
domain: {data: "data_0", field: "speedName"}
range: {
step: {signal: "x_step"}
}
paddingInner: 0.1
paddingOuter: 0.05
}
{
name: y
type: linear
domain: {data: "data_0", field: "speedCount"}
range: [
{signal: "child_height"}
0
]
nice: true
zero: true
}
{
name: color
type: ordinal
domain: {data: "source_0", field: "connectionType", sort: true}
range: [
"#e20074"
"#000000"
"#6c6c6c"
"#b3b3b3"
"#1063ad"
"#1bada2"
"#ea75b6"
]
}
{
name: colors
type: ordinal
domain: [2018, 2019, 2020, 2021, 2022]
range: ["#ff9a1e", "#bfcb44", "#1bada2", "#53baf2", "#1063ad"]
}
]
legends: [
{
fill: color
direction: vertical
padding: 10
encode: {
symbols: {
update: {
shape: {value: "square"}
}
}
}
}
]
}
这是到目前为止的样子：
0 个答案:
没有答案
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？