MBA Candidate at Columbia, Software Engineer, Former Managing Web Editor @ The Michigan Daily. Building things I can see.
Published
Edited
Mar 1, 2022
23 stars
preset = {
let values = new Map();
const url = new URL(document.baseURI);
try {
values = new Map(
Object.entries(d3.autoType(Object.fromEntries([...url.searchParams])))
);
} catch (e) {}
return (name, defaultValue) =>
values.has(name) ? values.get(name) : defaultValue;
}
presetUrl = {
const url = new URL(document.baseURI);
Object.entries({
buffer,
randomize,
orientation,
curve,
stroke,
bottomColor,
topColor,
backgroundColor
}).forEach(kv => url.searchParams.set(kv[0], kv[1]));
return '' + url;
}
viewof buffer = Inputs.toggle({
label: 'Border Cells',
value: preset('buffer', false)
})
viewof randomize = Inputs.toggle({
label: 'Randomize',
value: preset('randomize', true)
})
viewof orientation = Inputs.select(['Left', 'Top', 'Right', 'Bottom'], {
label: 'Path Orientation',
value: preset('orientation', 'Top')
})
viewof curve = Inputs.select(
new Map([
['Basis', 'curveBasisClosed'],
['BumpX', 'curveBumpX'],
['BumpY', 'curveBumpY'],
['Bundle', 'curveBundle'],
['Cardinal', 'curveCardinal'],
['Linear', 'curveLinear'],
['MonotoneX', 'curveMonotoneX'],
['MonotoneY', 'curveMonotoneY'],
['Natural', 'curveNatural'],
['Step', 'curveStep']
]),
{
label: 'Curve Type',
value: preset('curve', 'curveBasisClosed')
}
)
viewof stroke = Inputs.select(['None', 'Reverse', 'Black', 'White'], {
label: 'Stroke Type',
value: preset('stroke', 'Reverse')
})
viewof bottomColor = Inputs.text({
type: "color",
value: preset('bottomColor', "#4d4193"),
label: "Bottom Color"
})
viewof topColor = Inputs.text({
type: "color",
value: preset("topColor", "#60c96e"),
label: "Top Color"
})
viewof backgroundColor = Inputs.text({
type: "color",
value: preset("backgroundColor", "#ecddc8"),
label: "Background Color"
})
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.
