Public
Edited
May 12
barData = [
{ label: "1Y Nifty", value: 6.7, color: "#6699dd" },
{ label: "1Y Scripbox", value: 13.9, color: "#F68927" },
{ label: "3Y Nifty", value: 11.8, color: "#6699dd" },
{ label: "3Y Scripbox", value: 20.3, color: "#F68927" }
];
Three_CAGR = html`
<div style="font-family: sans-serif; width: 700px; padding: 20px;">
<div style="margin-bottom: 12px;">
<h3 style="margin: 0 0 8px; font-weight: 600;">
Scripbox Equity Portfolio vs Nifty 50 TRI: Over Last 3 Years
</h3>
<div style="display: flex; gap: 20px; font-size: 14px; align-items: center;">
<div style="display: flex; align-items: center;">
<span style="display:inline-block;width:14px;height:14px;background:#F68927;margin-right:6px;border-radius:3px;"></span>
Scripbox Equity
</div>
<div style="display: flex; align-items: center;">
<span style="display:inline-block;width:14px;height:14px;background:#6699dd;margin-right:6px;border-radius:3px;"></span>
Nifty 50 TRI
</div>
</div>
</div>
${Plot.plot({
marks: [
Plot.barY(barData, {
x: "label",
y: "value",
fill: d => d.color ?? "transparent",
fillOpacity: d => d.value === null ? 0 : 1,
width: 0.7
}),
Plot.text(barData.filter(d => d.value !== null), {
x: "label",
y: d => d.value + 0.5,
text: d => `${d.value.toFixed(1)}%`,
fontWeight: "bold",
textAnchor: "middle",
dy: -4
})
],
x: {
label: null
},
y: {
label: null,
tickFormat: d => `${d}%`,
domain: [0, 25]
},
width: 640,
height: 360,
marginBottom: 50
})}
</div>
`
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.
