Public
Edited
May 27
viewof chart = {
// Sorted dataset (descending)
const data = [
{ occupation: "Production", short_sleep: 43.0 },
{ occupation: "Healthcare Support", short_sleep: 40.1 },
{ occupation: "Food Preparation & Serving", short_sleep: 39.9 },
{ occupation: "Protective Service", short_sleep: 38.2 },
{ occupation: "Transportation", short_sleep: 35.1 },
{ occupation: "Education & Library", short_sleep: 31.1 },
{ occupation: "Farming, Fishing & Forestry", short_sleep: 31.0 }
];
const colors = [
"#00FFE7", "#FF6EC7", "#FFD700",
"#8A2BE2", "#40E0D0", "#FF69B4", "#87CEFA"
];
const margin = { top: 20, right: 30, bottom: 40, left: 220 };
const width = 800;
const height = data.length * 45 + margin.top + margin.bottom;
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
.style("background", "#121212");
const x = d3.scaleLinear()
.domain([0, d3.max(data, d => d.short_sleep)]).nice()
.range([margin.left, width - margin.right]);
const y = d3.scaleBand()
.domain(data.map(d => d.occupation))
.range([margin.top, height - margin.bottom])
.padding(0.25);
// Draw bars with individual colors
svg.append("g")
.selectAll("rect")
.data(data)
.join("rect")
.attr("x", x(0))
.attr("y", d => y(d.occupation))
.attr("width", d => x(d.short_sleep) - x(0))
.attr("height", y.bandwidth())
.attr("rx", 6) // rounded corners
.attr("fill", (d, i) => colors[i % colors.length])
.append("title")
.text(d => `${d.occupation}: ${d.short_sleep}% short sleep`);
svg.append("g")
.attr("transform", `translate(0,${margin.top})`)
.call(d3.axisTop(x).ticks(width / 80))
.selectAll("text")
.attr("fill", "#E0E0E0");
svg.append("g")
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y))
.selectAll("text")
.attr("fill", "#E0E0E0");
return svg.node();
}
viewof chart1 = {
// Initial data
let data = [
{ occupation: "Healthcare Support", short_sleep: 40.1 },
{ occupation: "Food Preparation & Serving", short_sleep: 39.9 },
{ occupation: "Production", short_sleep: 43.0 },
{ occupation: "Protective Service", short_sleep: 38.2 },
{ occupation: "Transportation", short_sleep: 35.1 },
{ occupation: "Education & Library", short_sleep: 31.1 },
{ occupation: "Farming, Fishing & Forestry", short_sleep: 31.0 }
];
let sortDescending = true;
const colors = [
"#00FFE7", "#FF6EC7", "#FFD700",
"#8A2BE2", "#40E0D0", "#FF69B4", "#87CEFA"
];
const margin = { top: 20, right: 80, bottom: 40, left: 220 };
const width = 800;
const height = data.length * 45 + margin.top + margin.bottom;
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
.style("background", "#121212");
function draw() {
svg.selectAll("*").remove(); // clear
// Sort data based on toggle
const sortedData = [...data].sort((a, b) =>
sortDescending
? d3.descending(a.short_sleep, b.short_sleep)
: d3.ascending(a.short_sleep, b.short_sleep)
);
const x = d3.scaleLinear()
.domain([0, d3.max(sortedData, d => d.short_sleep)]).nice()
.range([margin.left, width - margin.right]);
const y = d3.scaleBand()
.domain(sortedData.map(d => d.occupation))
.range([margin.top, height - margin.bottom])
.padding(0.25);
// Bars
const bars = svg.append("g")
.selectAll("rect")
.data(sortedData)
.join("rect")
.attr("x", x(0))
.attr("y", d => y(d.occupation))
.attr("width", d => x(d.short_sleep) - x(0))
.attr("height", y.bandwidth())
.attr("rx", 6)
.attr("fill", (d, i) => colors[i % colors.length])
.on("mouseover", function () {
d3.select(this)
.attr("stroke", "#FFF")
.attr("stroke-width", 2)
.attr("fill-opacity", 1);
})
.on("mouseout", function () {
d3.select(this)
.attr("stroke", "none")
.attr("fill-opacity", 0.9);
})
.attr("fill-opacity", 0.9);
// Value Labels
svg.append("g")
.selectAll("text.label")
.data(sortedData)
.join("text")
.attr("x", d => x(d.short_sleep) + 6)
.attr("y", d => y(d.occupation) + y.bandwidth() / 2)
.attr("dy", "0.35em")
.text(d => `${d.short_sleep}%`)
.attr("fill", "#E0E0E0")
.attr("font-size", "12px");
// Axes
svg.append("g")
.attr("transform", `translate(0,${margin.top})`)
.call(d3.axisTop(x).ticks(width / 80))
.selectAll("text")
.attr("fill", "#E0E0E0");
svg.append("g")
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y))
.selectAll("text")
.attr("fill", "#E0E0E0");
}
draw();
// Add button
const button = html`<button style="margin-top:10px; font-size:14px; background:#333; color:#fff; border:none; padding:6px 12px; cursor:pointer; border-radius:6px;">🔁 Toggle Sort: Desc / Asc</button>`;
button.onclick = () => {
sortDescending = !sortDescending;
draw();
};
const container = html`<div></div>`;
container.appendChild(svg.node());
container.appendChild(button);
return container;
}
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.
