Public
Edited
Dec 10, 2023
1 fork
embed = require("vega-embed@6")
viewof view = embed({
$schema: "https://vega.github.io/schema/vega-lite/v5.json",
data: { values: data },
width: 100, // 设置图表的宽度
height: 160, // 设置图表的高度，这里的比例是2:1
encoding: { y: { field: "category", type: "ordinal" } },
layer: [
{
mark: { type: "point", filled: true },
encoding: {
x: {
field: "mean",
scale: { domain: [1, 7] },
axis: { values: [2, 4, 6] },
type: "quantitative"
},
color: { value: "black" }
}
},
{
mark: { type: "errorbar", extent: "stdev" },
encoding: {
x: { field: "mean", type: "quantitative"},
xError: { field: "stdev" }
}
}
]
})
viewof system_view = embed({
$schema: "https://vega.github.io/schema/vega-lite/v5.json",
data: { values: system },
width: 220, // 设置图表的宽度
height: 420, // 设置图表的高度，这里的比例是2:1
encoding: {
// y: {
// field: "category",
// type: "ordinal",
// sort: { field: "sort_order", order: "ascending" }
// }
y: { field: "category", type: "ordinal" }
},
layer: [
{
mark: { type: "point", filled: true },
encoding: {
x: {
field: "mean",
scale: { domain: [1, 7] },
axis: { values: [2, 4, 6] },
type: "quantitative"
},
color: { value: "black" }
}
},
{
mark: { type: "errorbar", extent: "stdev" },
encoding: {
x: { field: "mean", type: "quantitative" },
xError: { field: "stdev" }
}
}
]
})
data = signpost
text_window = [
{ mean: 5.75, stdev: 1.22, category: "Q1" },
{ mean: 6.42, stdev: 0.67, category: "Q2" },
{ mean: 6.25, stdev: 1.14, category: "Q3" },
{ mean: 4.92, stdev: 0.9, category: "Q4" },
{ mean: 5, stdev: 1.13, category: "Q5" },
]
highlight = [
{ mean: 6.25, stdev: 1.06, category: "Q1" },
{ mean: 6.25, stdev: 1.06, category: "Q2" },
{ mean: 6.0, stdev: 1.13, category: "Q3" },
{ mean: 5.83, stdev: 1.19, category: "Q4" },
{ mean: 5.5, stdev: 1.00, category: "Q5" },
]
virtual_screen = [
{ mean: 6.42, stdev: 0.67, category: "Q1" },
{ mean: 6.42, stdev: 0.79, category: "Q2" },
{ mean: 6.33, stdev: 0.65, category: "Q3" },
{ mean: 5.92, stdev: 1.08, category: "Q4" },
{ mean: 5.66, stdev: 0.98, category: "Q5" },
]
minimap = [
{ mean: 5.92, stdev: 0.67, category: "Q1" },
{ mean: 6.41, stdev: 0.67, category: "Q2" },
{ mean: 6.17, stdev: 0.72, category: "Q3" },
{ mean: 5.67, stdev: 1.07, category: "Q4" },
{ mean: 5.17, stdev: 1.11, category: "Q5" },
]
signpost = [
{ mean: 5.67, stdev: 1.15, category: "Q1" },
{ mean: 6.5, stdev: 0.67, category: "Q2" },
{ mean: 6.5, stdev: 0.67, category: "Q3" },
{ mean: 5, stdev: 1.13, category: "Q4" },
{ mean: 4.92, stdev: 1.08, category: "Q5" },
]
sorted_system.forEach((item, index) => {
item.sort_order = index;
});
// sorted_system = system.sort((a, b) => b.mean - a.mean);
sorted_system = system.sort((a, b) => {
if (a.mean === b.mean) {
return a.stdev - b.stdev;
}
return b.mean - a.mean;
});
system = [
{ mean: 6.333333333, stdev: 0.4923659639, category: "Q01" },
{ mean: 6.333333333, stdev: 0.6513389473, category: "Q02" },
{ mean: 6.50, stdev: 0.7977240352, category: "Q03" },
{ mean: 5.25, stdev: 0.9653072992, category: "Q04" },
{ mean: 6.333333333, stdev: 0.4923659639, category: "Q05" },
{ mean: 5.5, stdev: 1.087114613, category: "Q06" },
{ mean: 5.75, stdev: 1.356801051, category: "Q07" },
{ mean: 6.5, stdev: 0.5222329679, category: "Q08" },
{ mean: 6, stdev: 0.9534625892, category: "Q09" },
{ mean: 6.166666667, stdev: 1.029857301, category: "Q10" },
{ mean: 5.833333333, stdev: 0.5773502692, category: "Q11" },
{ mean: 6.583333333, stdev: 0.6685579234, category: "Q12" },
{ mean: 6.916666667, stdev: 0.2886751346, category: "Q13" },
]
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
