viewof chart = {
const svg = d3
.create("svg")
.attr("width", 960)
.attr("height", 500)
.attr("viewBox", [0, 0, 960, 500])
.style("background-color", "#D1DCE2");
const margin = { top: 20, right: 30, bottom: 30, left: 40 };
const width = 960 - margin.left - margin.right;
const height = 500 - margin.top - margin.bottom;
const g = svg
.append("g")
.attr("transform", `translate(${margin.left},${margin.top})`);
const parseDate = d3.timeParse("%Y-%m-%d");
dataset_KOI_548.forEach((d) => {
d.date = parseDate(d.date);
});
const x = d3
.scaleBand()
.domain(dataset_KOI_548.map((d) => d.date))
.range([0, width])
.padding(0.1);
const y = d3.scaleLinear().domain([0, 1]).range([0, height]);
const color = d3
.scaleOrdinal()
.domain(["Falt", "Joke", "Succes", "Other"])
.range(["#80BEAF", "#EDB5D2", "#C8A8DA", "#708aa3"]);
const stack = d3
.stack()
.keys(["Falt", "Joke", "Succes", "Other"])
.order(d3.stackOrderNone)
.offset(d3.stackOffsetExpand);
const series = stack(dataset_KOI_548);
g.append("g")
.selectAll("g")
.data(series)
.join("g")
.attr("fill", (d) => color(d.key))
.selectAll("rect")
.data((d) => d)
.join("rect")
.attr("x", (d) => x(d.data.date))
.attr("y", (d) => y(d[0]))
.attr("height", (d) => y(d[1]) - y(d[0]))
.attr("width", x.bandwidth());
g.append("g")
.attr("transform", `translate(0,${height})`)
.call(d3.axisBottom(x).tickFormat(d3.timeFormat("%m/%d")))
.selectAll("text")
.attr("transform", "rotate(45)")
.style("text-anchor", "start");
g.append("g").call(d3.axisLeft(y).ticks(10, "%"));
return svg.node();
}