data = [
["Chocó", 42],
["Valle del Cauca", 16],
["Risaralda", 6],
["Antioquia", 3]
]
html`<style>
.bar-chart{display:flex;flex-direction:column;gap:8px;font-family:sans-serif;font-size:14px}
.bar-row{display:grid;grid-template-columns:140px 1fr 70px;align-items:center;gap:10px}
.bar-row .name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-row .track{background:#eef1f5;border-radius:6px;height:14px;overflow:hidden}
.bar-row .fill{height:100%;border-radius:6px}
.bar-row .val{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
</style>
<div class="bar-chart">
${(() => {
const max = Math.max(...data.map(r => r[1])) || 1;
return data.map(r => {
const w = (r[1] / max * 100).toFixed(1);
return html`<div class="bar-row">
<span class="name" title="${r[0]}">${r[0]}</span>
<div class="track"><div class="fill" style="width:${w}%;background:linear-gradient(90deg,#e0413f,#D8232A)"></div></div>
<span class="val">${r[1].toLocaleString("es-CO")}</span>
</div>`;
});
})()}
</div>`D3, Observable y JS
D3
Introduction to D3 P3.
Introduction to D3 P4.
Introduction to D3 P5.
Recursos
- Diseña y visualiza con D3.js datos de siniestralidad en carretera. Link