Public
Edited
Sep 7, 2023
viewof a = Inputs.range([1, 10], { value: 1 })
{
let w = 628;
let h = 200;
let svg = d3
.create("svg")
.attr("width", "100%")
.attr("viewBox", [0, 0, w, h]);
let [xmin, xmax, ymin, ymax] = [-2 * Math.PI, 2 * Math.PI, -1.1, 1.1];
let pad = 10;
let x_scale = d3
.scaleLinear()
.domain([xmin, xmax])
.range([pad, w - pad]);
let y_scale = d3
.scaleLinear()
.domain([ymin, ymax])
.range([h - pad, pad]);
let path = d3
.line()
.x((d) => x_scale(d[0]))
.y((d) => y_scale(d[1]));
let pts = d3.range(xmin, xmax, 0.01).map((x) => [x, Math.sin(a * x)]);
let fill_pts = pts.filter(([x, y]) => 0 <= x && x < Math.PI / a);
fill_pts = [[fill_pts[0][0], 0]]
.concat(fill_pts)
.concat([[fill_pts.slice(-1)[0][0], 0]]);
svg
.append("path")
.attr("d", path(fill_pts))
.attr("fill", "lightblue")
.attr("stroke", "blue")
.attr("stroke-width", 0.5);
svg
.append("path")
.attr("d", path(pts))
.attr("fill", "none")
.attr("stroke", "black")
.attr("stroke-width", 3);
// Draw the axes
svg
.append("g")
.attr("transform", `translate(0, ${y_scale(0)})`)
.call(d3.axisBottom(x_scale).tickFormat(d3.format("d")).tickSizeOuter(0));
svg
.append("g")
.attr("transform", `translate(${x_scale(0)})`)
.call(d3.axisLeft(y_scale).ticks(5).tickSizeOuter(0));
return svg.node();
}
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.
