Public
Edited
Apr 10, 2024
import { pathstuff } from "@tophtucker/pathstuff"
{
function degreeToRadian(d) {
return (d * Math.PI) / 180;
}
function fnData() {
const data = d3.range(0, 11, 1).map((d) => {
const angleRadian = degreeToRadian(d);
return {
index: d,
angleDeg: d,
angleRadian: angleRadian,
x: Math.cos(angleRadian),
y: Math.sin(angleRadian)
};
});
return data;
}
const data = fnData();
const pathOg = d3
.line()
.x((d) => d.x)
.y((d) => d.y)(data);
const scaleX = d3
.scaleLinear()
.range([0, 100])
.domain(d3.extent(data, (d) => d.x));
const scaleY = d3
.scaleLinear()
.range([100, 0])
.domain(d3.extent(data, (d) => d.y));
const pathStr = d3
.line()
.x((d) => scaleX(d.x))
.y((d) => scaleY(d.y))(data);
const size = pathstuff.size(100, 100)(pathOg);
return { og: pathOg, d3: pathStr, Pathstuff: size };
}
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.
