chart = {
const container = d3
.create("div")
.style("width", width)
.style("height", fullHeight + "px");
const narrativeContainer = container
.append("div")
.style("height", "400px")
.style("overflow-y", "scroll")
.style("float", "left")
.on("scroll", () => {
const totalHeight = narrativeContainer.node().getBoundingClientRect().top;
const offset = narrative.node().getBoundingClientRect().y;
const section = Math.floor((totalHeight - offset + 10) / sectionHeight);
update(section);
});
const narrative = narrativeContainer
.append("div")
.style("width", "200px")
.style("background-color", "red");
narrative
.selectAll(".section")
.data(descriptions)
.join("div")
.attr("class", "section")
.append("text")
.text(d => d);
const vis = container
.append("div")
.style("height", "400px")
.style("width", width - 220 + "px")
.style("float", "right")
.style("background-color", "purple");
const update = section => {
console.log("update ", section);
let color = '';
switch (section) {
case 1:
color = "pink";
break;
case 2:
color = "green";
break;
case 3:
color = "black";
break;
default:
color = "blue";
break;
}
vis.style("background-color", color);
};
return container.node();
}