Software Developer, Guardium Guy, Dad
Public
Edited
Jan 6, 2023
Carbon Vega Explorations
vega({
width: 600,
height: 300,
title: {
text: "Vertical simple bar (discrete)",
color: "#f4f4f4",
anchor: "start",
dy: -15,
fontSize: 16
},
data: { values: data },
mark: { type: "bar", width: 16 },
config: {
background: "#262626",
group: {
fill: "black"
},
view: { padding: 100, fill: "#161616", stroke: "#161616" }
},
encoding: {
tooltip: [
{ field: "group", title: "x-value" },
{ field: "value", title: "y-value" },
{ field: "group", title: "Group" }
],
x: {
field: "group",
axis: {
labelColor: "#c6c6c6",
labelFontSize: 12,
dir: "horizontal",
grid: true,
gridColor: "#525252",
titleColor: "#c6c6c6",
title: false,
labelAngle: 0
}
},
y: {
field: "value",
type: "quantitative",
axis: {
labelColor: "#c6c6c6",
labelFontSize: 12,
grid: true,
gridColor: "#525252",
titleColor: "#c6c6c6",
title: false
}
},
color: {
field: "group",
legend: { orient: "bottom", title: false, labelColor: "#c6c6c6" },
scale: {
range: [
"#8a3ffc",
"#33b1ff",
"#007d79",
"#ff7eb6",
"#fa4d56",
"#fff1f1",
"#6fdc8c",
"#4589ff",
"#d12771",
"#d2a106",
"#08bdba",
"#bae6ff",
"#ba4e00",
"#d4bbff"
]
}
}
}
})
vega = require("vega-embed@6")
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.
