Published
Edited
Mar 1, 2022
Importers
8 stars
chart = {
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
const line = d3
.line()
.x(d => xScale(d.year))
.y(d => yScale(d.value));
const area = d3
.area()
.x(d => xScale(d.year))
.y0(d => yScale(d.value - d.halfwidth))
.y1(d => yScale(d.value + d.halfwidth));
svg
.append("path")
.attr("fill", "pink")
.attr("d", area(fitted));
svg
.append("path")
.attr("fill", "none")
.attr("stroke", "black")
.attr("d", line(data));
svg
.append("path")
.attr("fill", "black")
.attr("d", line.curve(curvePoints(2))(data));
svg
.append("path")
.attr("fill", "none")
.attr("stroke", "red")
.attr("d", line.curve(d3.curveLinear)(fitted));
return svg.node();
}
Loess = import("https://cdn.skypack.dev/loess").then((d) => d.default)
options = ({ span, band, degree: +degree })
model = new Loess(
{
x: data.map(d => d.year), // x
y: data.map(d => d.value), // value
w: data.map(Math.random) // weights
},
options
)
fit = model.predict()
fitted = data.map((d, i) => ({
year: d.year,
value: fit.fitted[i],
halfwidth: fit.halfwidth[i]
}))
xScale = d3
.scaleLinear()
.domain(d3.extent(data, d => d.year))
.nice()
.range([10, width - 10])
yScale = d3
.scaleLinear()
.domain(d3.extent(data, d => d.value))
.nice()
.range([height, 0])
height = 500
d3 = require("d3@5")
// https://github.com/d3/d3-shape/issues/154#issuecomment-586640918
function curvePoints(radius = 0.5) {
const tau = 2 * Math.PI;
return function(context) {
return {
lineStart: () => {},
lineEnd: () => {},
point: (x, y) => {
context.moveTo(x + radius, y);
context.arc(x, y, radius, 0, tau);
}
};
};
}
import { select, slider } from "@jashkenas/inputs"
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.
