Public
Edited
Jun 16, 2021
2 stars
Insert cell
Insert cell
Insert cell
Insert cell
data = [
{
value: 0.21,
fill: "#9c26b0",
label: "BEGINNER",
icon: (await FileAttachment("icons8-frog-face-50.png").image()).src
},
{
value: 0.43,
fill: "#3f51b5",
label: "IMPLEMENTER",
icon: (await FileAttachment("icons8-fox-50.png").image()).src
},
{
value: 0.3,
fill: "#2196f3",
label: "ADVANCER",
icon: (await FileAttachment("icons8-black-jaguar-50.png").image()).src
},
{
value: 0.06,
fill: "#1e9688",
label: "LEADER",
icon: (await FileAttachment("icons8-alligator-50.png").image()).src
}
]
Insert cell
oConfig = ({
width: width * 0.7,
height: 550,
transitionDuration: 750,
minBarValue: 0,
maxBarValue: 0.5,
valueFormatter: d3.format(".0%"),
markerWidthRatio: 0.45,
markerHeight: 130,
scores: [
{ value: 3.5, labels: ["SECTOR", "AVG."], fill: "#999" },
{ value: 5.5, labels: ["YOUR", "SCORE"], fill: "red" }
]
})
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more