The avatar for @tututwo
Gordon Tu
Trying to get good at Three and D3 @tu_yukun
Published
Edited
Jan 27, 2022
Fork of D3 scatterplot
•
2 forks
5 stars
2
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
st = require('gsap@3.9.1/dist/ScrollTrigger.js')
Insert cell
ScrollTrigger = st.ScrollTrigger
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
html `
<style>
#scroll {
overflow-y:scroll;

}

.panel.blue {
height: 800px;
background-color: lightblue
}
.panel.orange {
height: 400px;
background-color: orange
}
</style>
`
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.

Insert cell
Insert cell
<style>
circle {
mix-blend-mode: screen;
}

#wrapper {
height: 600px;
overflow-y: scroll;
position: relative;
/* overflow-anchor */??
}
* {
margin: 0;
padding: 0
}
article {
width: 100%;
position: absolute;
display: flex;
flex-direction: column;
line-height: 600px;
font-weight: bold;
z-index: 50;
margin: 0;
padding: 0
}

.step {
text-align: center;
margin: 0;
padding: 0
}

svg#chart {
margin: 0;
padding: 0
}
.pin-spacer-chart-pin {
margin: 0;
padding: 0
}
</style>
Insert cell
Insert cell
Insert cell
Insert cell
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