Public
Edited
May 12
reorderedDrawdownData = [
{ Index: "Nifty Smallcap 100", Drawdown: -33.4 },
{ Index: "Nifty Midcap 100", Drawdown: -23.1},
{ Index: "Nifty 50", Drawdown: -7.7 },
{ Index: "Scripbox Recommended", Drawdown: -4.3 }
];
Max_Drawdown_Comparison = html`
<div style="font-family: sans-serif; width: 800px; padding: 20px;">
<h3 style="margin: 0 0 12px;">Maximum Drawdown Comparison: FY '25</h3>
<!-- Legend -->
<div style="display: flex; justify-content: flex-start; gap: 24px; font-size: 14px; margin-bottom: 12px;">
<div style="display: inline-flex; align-items: center;">
<span style="display:inline-block;width:16px;height:16px;background:#e24630;margin-right:6px;border-radius:3px;"></span>
Nifty Smallcap 100
</div>
<div style="display: inline-flex; align-items: center;">
<span style="display:inline-block;width:16px;height:16px;background:#fcc842;margin-right:6px;border-radius:3px;"></span>
Nifty Midcap 100
</div>
<div style="display: inline-flex; align-items: center;">
<span style="display:inline-block;width:16px;height:16px;background:#007aff;margin-right:6px;border-radius:3px;"></span>
Nifty 50
</div>
<div style="display: inline-flex; align-items: center;">
<span style="display:inline-block;width:16px;height:16px;background:#f58024;margin-right:6px;border-radius:3px;"></span>
Scripbox Recommended
</div>
</div>
<!-- Plot -->
${Plot.plot({
marks: [
// Bars with individual colors
Plot.barY(reorderedDrawdownData, {
x: "Index",
y: "Drawdown",
fill: d => {
if (d.Index === "Nifty Smallcap 100") return "#e24630"; // darker blue
if (d.Index === "Nifty Midcap 100") return "#fcc842"; // mid blue
if (d.Index === "Nifty 50") return "#007aff"; // lighter blue
if (d.Index === "Scripbox Recommended") return "#f58024"; // orange
},
width: 40
}),
// Text labels inside bars
Plot.text(reorderedDrawdownData, {
x: "Index",
y: d => d.Drawdown / 2,
text: d => `${d.Drawdown}%`,
fill: "white",
fontWeight: "bold",
textAnchor: "middle",
dy: 0,
fontSize: 14
})
],
x: {
label: null,
domain: ["Nifty Smallcap 100", "Nifty Midcap 100", "Nifty 50", "Scripbox Recommended"]
},
y: {
domain: [-40, 0],
tickFormat: d => `${d}%`,
label: null
},
width: 760,
height: 420,
marginBottom: 60
})}
</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.
