md`# Waves`
viewof speed = slider({
min: 0,
max: 500,
title: "Speed",
value: 250,
getValue: e => 501 - e.value,
display: v => 501 - v
})
{
const height = 100;
const xValue = d => d.x;
const yValue = d => d.y;
const xScale = d3
.scaleLinear()
.domain(d3.extent(data.map(xValue)))
.range([0, width]);
const yScale = d3
.scaleLinear()
.domain([-1, 1])
.range([0, height]);
const svg = d3.create('svg').attr('viewBox', `0 0 ${width} ${height}`);
const line = d3
.line()
.x(d => xScale(xValue(d)))
.y(d => yScale(yValue(d)));
svg
.append('path')
.datum(data)
.attr('d', line)
.attr('stroke', 'hsl(255,.5,.5)')
.attr('fill', 'none');
return svg.node();
}
count = 6
html`<h1>The count is ${count}</h1>
<style>
.rect {
width: 200px;
height: 20px;
background: hsl(${hue}, 100%, 50%);
margin: 10px;
padding: ${hue}px 0;
}
</style>
<p>${hue}<sup>o</sup></p>
<div class="rect"></div>
<div class="rect"></div>
`
curve = Math.sin
data = d3
.range(0, 1001)
.map(x => (x * 24) / (24 + 1))
.map(x => ({ x, y: curve(x / period + now / speed) * amplitude }))
import {slider} from "@jashkenas/inputs"
d3 = require('d3')
r = d3.color('blue')
d3.hsl(r)
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.
