Public
Edited
May 16
investmentData = [
{ option: "Scripbox Equity", amount: 1095800, color: "#F58024" },
{ option: "Nifty 50 TRI", amount: 1060100, color: "#007AFF" }
];
SB_vs_Nifty_OTI = html`
<div style="font-family: sans-serif; width: 700px; padding: 20px;">
<h3 style="margin: 0 0 12px;">₹10,00,000 invested on 1 April 2024, after one year would have become:</h3>
<!-- Custom Legend -->
<div style="display: flex; justify-content: flex-start; gap: 24px; font-size: 14px; margin-bottom: 16px;">
<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 Equity
</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 TRI
</div>
</div>
${Plot.plot({
marks: [
// Bars
Plot.barX(investmentData, {
y: "option",
x: "amount",
fill: "color",
radius: 4
}),
// Inside bar labels (product name)
Plot.text(investmentData, {
y: "option",
x: 1010000,
text: d => d.option,
fill: "white",
fontSize: 14,
fontWeight: "bold",
textAnchor: "start",
dy: 0
}),
// Outside bar labels (final amount)
Plot.text(investmentData, {
y: "option",
x: d => d.amount + 8000, // smaller offset
text: d => `₹${(d.amount / 100000).toFixed(2)}L`,
fill: "black",
fontSize: 14,
fontWeight: "bold",
textAnchor: "start",
dy: 0
})
],
x: {
label: "Final Amount (₹)",
domain: [1000000, 1110000], // slightly padded for right margin
ticks: d3.ticks(1000000, 1110000, 6),
tickFormat: d => `₹${(d / 100000).toFixed(1)}L`
},
y: {
label: null,
ticks: [],
tickFormat: () => "",
axis: null
},
width: 700,
height: 220,
marginLeft: 20,
marginRight: 100,
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.
