Public
Edited
May 12
drawdownData = FileAttachment("Cleaned_Drawdown_Comparison.csv").csv()
parsedDrawdown = drawdownData.map(d => ({
Date: new Date(d.Dates),
Index: d.Index,
Drawdown: +d.Drawdown
}))
Drawdown_Comparison = html`
<div style="font-family: sans-serif; width: 800px; padding: 20px;">
<h3 style="margin: 0 12px 12px;">Drawdown Trend: FY ’25</h3>
<div style="display: flex; justify-content: flex-start; gap: 24px; font-size: 14px; margin-bottom: 12px; margin-left: 12px;">
<div style="display: inline-flex; align-items: center;">
<span style="display:inline-block;width:16px;height:16px;background:#a2c0f7;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:#F68927;margin-right:6px;border-radius:3px;"></span>
Scripbox Portfolio
</div>
</div>
${Plot.plot({
marks: [
// Areas (no tip)
Plot.areaY(parsedDrawdown.filter(d => d.Index === "Nifty 50"), {
x: "Date",
y: "Drawdown",
fill: "#a2c0f7",
curve: "monotone-x",
opacity: 0.6
}),
Plot.areaY(parsedDrawdown.filter(d => d.Index === "Scripbox Portfolio"), {
x: "Date",
y: "Drawdown",
fill: "#F68927",
curve: "monotone-x",
opacity: 0.5
}),
// Lines with tips
Plot.line(parsedDrawdown.filter(d => d.Index === "Nifty 50"), {
x: "Date",
y: "Drawdown",
stroke: "#4f67c8",
curve: "monotone-x",
strokeWidth: 1.5,
title: d => `Nifty 50\n${d.Date.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' })}: ${d.Drawdown.toFixed(2)}%`,
tip: { dy: 10 }
}),
Plot.line(parsedDrawdown.filter(d => d.Index === "Scripbox Portfolio"), {
x: "Date",
y: "Drawdown",
stroke: "#F68927",
curve: "monotone-x",
strokeWidth: 1.5,
title: d => `Scripbox Portfolio\n${d.Date.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' })}: ${d.Drawdown.toFixed(2)}%`,
tip: { dy: -10 }
}),
// Baseline
Plot.ruleY([0], { stroke: "black", strokeOpacity: 0.2 })
],
x: {
type: "time",
label: "Dates",
tickFormat: d3.utcFormat("%-d-%b-%Y"),
ticks: d3.utcMonth.every(2)
},
y: {
label: "Drawdown (%)",
tickFormat: d => `${d.toFixed(2)}%`,
domain: [-20, 0]
},
width: 760,
height: 400,
marginLeft: 50,
marginRight: 30
})}
</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.
