Published
Edited
May 4, 2022
2 forks
1 star
Insert cell
Insert cell
MAX_THETA = 9/4 * Math.PI; // 1.5 revolutions
Insert cell
START_PHASE = Math.PI * 0.75;
Insert cell
Insert cell
Insert cell
numSamples = 30
Insert cell
model = Array.from(Array(numSamples), (_, i) => {
const phase = START_PHASE + (i * MAX_THETA) / (numSamples - 1);
const percent = ((100 * i) / (numSamples - 1));
const value = AMPLITUDE * (0.5 + 0.5 * Math.sin(phase));
const adjustment = -1 * Math.pow(percent/100, 4);
return { x: percent, y: value, adjustment, sum: value + adjustment };
})
Insert cell
Plot.plot({
marks: [
Plot.line(model, {x: 'x', y: 'y', stroke: 'steelblue'}),
Plot.line(model, {x: 'x', y: 'adjustment', stroke: 'orange'}),
Plot.line(model, {x: 'x', y: 'sum', stoke: 'black'})
]
})
Insert cell
clipPath = model.map(({x, sum:y}) => ({x: `${x.toFixed(1)}%`, y: `${y.toFixed(2)}em`})).concat([
{ x: "100%", y: "100%" },
{ x: "0%", y: "100%" }
])
Insert cell
styles = `.clip-demo {
clip-path: polygon(${clipPath.map(({x, y}) => `${x} ${y}`).join(', ')});
margin-top: ${-(AMPLITUDE)}em;
padding: ${(EXTRA_PADDING + AMPLITUDE * 0.75)}em ${EXTRA_PADDING}em;
}`
Insert cell
htl.html`
<style>
${styles}
.container {
padding: 4em 0;
}

.clip-demo:nth-child(odd) {
background-color: rebeccapurple;
color: white;
}
.clip-demo:nth-child(odd) > * {
color: white;
}
.clip-demo:nth-child(even) {
background-color: white;
}
</style>
<div class="container">
<div class="clip-demo">
<h1>Here's a big wavy section</h1>
</div>
<div class="clip-demo">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla at convallis purus. Mauris quis gravida enim. Pellentesque luctus, massa vel interdum condimentum, risus est luctus mi, scelerisque mattis velit massa ac ante. Fusce pharetra diam a tellus molestie dictum. Sed quis tortor sit amet lorem porttitor commodo quis eu turpis. Pellentesque vitae libero tincidunt, tempus magna nec, eleifend lectus. Sed lacus mauris, rhoncus non pellentesque vitae, tempor et justo. Duis at lobortis mi. Nunc ultricies urna vitae justo eleifend, at convallis elit congue.</p>
</div>
<div class="clip-demo">
<p>Aliquam id ipsum eros. Vivamus nisl turpis, dictum sit amet dolor in, maximus pellentesque magna. Cras nisi purus, placerat et dapibus hendrerit, consectetur nec mi. Fusce dictum arcu in lorem ultrices accumsan. Fusce ullamcorper dapibus quam ut aliquam. Phasellus viverra dapibus ipsum. Ut non ligula vehicula, dictum est eu, interdum arcu. Suspendisse potenti. Sed scelerisque est ante, nec convallis arcu viverra non. Nulla consequat imperdiet tellus vitae molestie.</p>
</div>
<div class="clip-demo" />
</div>
`
Insert cell
FileAttachment("wave-source.svg").image()
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