Wise Fool.
Visioneer.
viewof controls1 = Inputs.form(
{
curve: Inputs.radio(Object.keys(curves1), {label: "Curve", value: "linear"}),
radius: Inputs.range([0, 288], {label: "Corner Radius", value: 18, step: 1}),
}
)
curves1 = ({
linear: d3.curveLinear,
basis: d3.curveBasis,
natural: d3.curveNatural,
rounded: roundedCorners.radius(controls1.radius),
})
viewof controls2 = Inputs.form(
{
curve: Inputs.radio(Object.keys(curves2), {label: "Curve", value: "linear"}),
radius: Inputs.range([0, 288], {label: "Corner Radius", value: 18, step: 1}),
}
)
curves2 = ({
linear: d3.curveLinear,
basis: d3.curveBasis,
natural: d3.curveNatural,
rounded: roundedCorners,
})
settings = {
const curver = curves2[controls2.curve]; // pick the proper curve function
return ({
// only if curver has a radius function, use it to set its radius
curver: curver.radius && curver.radius(controls2.radius) || curver,
...controls2,
})
}
roundedCorners = require("d3-curve-circlecorners")
// roundedCorners = import('https://cdn.skypack.dev/d3-curve-circlecorners?min')
r = require("d3-curve-circlecorners")
r.radius(3)
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.
