Published
Edited
May 26, 2020
1 fork
4 stars
Insert cell
md`# Scroll testing`
Insert cell
descriptions = d3.range(0, 5).map(d => "Section " + d)
Insert cell
fullHeight = 400
Insert cell
sectionHeight = 200
Insert cell
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", () => {
// Compute section
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");

// Add sections
narrative
.selectAll(".section")
.data(descriptions)
.join("div")
.attr("class", "section")
.append("text")
.text(d => d);

// Visualization
const vis = container
.append("div")
.style("height", "400px")
.style("width", width - 220 + "px")
.style("float", "right")
.style("background-color", "purple");

// Update function
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();
}
Insert cell
html`<style>
.section {
height: ${sectionHeight}px;
}
.section:last-of-type {
height:${fullHeight}px;
}
</style>`
Insert cell
d3 = require("d3")
Insert cell

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.
Learn more