Public
Edited
May 12
allocationData = [
{ asset: "Equity", weight: 70, color: "#5ca65c" },
{ asset: "Debt", weight: 20, color: "#a8601c" },
{ asset: "Gold", weight: 10, color: "#f2c23e" }
]
Asset_Allocation = html`
<div style="font-family: sans-serif; width: 800px; padding: 20px;">
<h3 style="margin: 0 0 12px; font-weight: 600;">Asset Allocation for Long Term Portfolio: FY '25</h3>
<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:#5ca65c;margin-right:6px;border-radius:3px;"></span>
Equity
</div>
<div style="display: inline-flex; align-items: center;">
<span style="display:inline-block;width:16px;height:16px;background:#a8601c;margin-right:6px;border-radius:3px;"></span>
Debt
</div>
<div style="display: inline-flex; align-items: center;">
<span style="display:inline-block;width:16px;height:16px;background:#f2c23e;margin-right:6px;border-radius:3px;"></span>
Gold
</div>
</div>
${Plot.plot({
marks: [
Plot.barX(allocationData, {
x: "weight",
y: () => "", // single horizontal bar
fill: "color",
inset: 0
}),
Plot.text(allocationData, {
x: d => {
const offsets = {
"Equity": d.weight / 2,
"Debt": 70 + d.weight / 2,
"Gold": 90 + d.weight / 2
};
return offsets[d.asset];
},
y: () => "",
text: d => `${d.weight}%`,
fill: "white",
fontWeight: "bold",
textAnchor: "middle",
dy: 0
})
],
x: {
domain: [0, 100],
ticks: [],
tickFormat: () => null,
label: null
},
y: {
label: null
},
color: {
type: "identity",
legend: false
},
width: 760,
height: 150,
marginTop: 10,
marginLeft: 0,
marginBottom: 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.
