viewof flowConfig = Inputs.form(
Object.entries({
width: ["range", 1200, 1200, 1],
height: ["range", 600, 1200, 1],
columns: ["range", 40, 80, 1],
backgroundColor: ["color", "#341a0f"],
a: md`---`,
pointerWidth: ["range", 2, 100, 0.1],
pointerLength: ["range", 20, 100, 0.1],
pointerBaseColor: ["color", "#661e32"],
pointerTipColor: ["color", "#c2b6da"],
mouseInfluencedPointerBaseColor: ["color", "#f26968"],
mouseInfluencedPointerTipColor: ["color", "#c5d92d"],
b: md`---`,
noiseScale: ["range", 0.0005, 1, 0.0001],
noiseChangeSpeed: ["range", 0.001, 0.01, 0.0001],
c: md`---`,
mouseInfluenceRadius: ["range", 300, 500, 1],
mouseInfluenceFalloff: ["range", 1.5, 10, 0.01],
mouseLineProximityMin: ["range", 10, 100, 1],
mouseHotspotColor: ["color", "#341a0f"],
// d: md`---`,
// flowLineStepSize: ["range", 2, 100, 1],
// flowLineWidth: ["range", 3, 10, 0.01],
// flowLineFadeSpeed: ["range", 0.02, 1, 0.01],
// flowLineSpawnRate: ["range", 0.5, 1, 0.01],
// flowLineMaxLength: ["range", 1000, 1000, 1],
// flowLinesGeneratedPerFrame: ["range", 20, 100, 1],
// maxFlowLines: ["range", 100, 1000, 1],
// flowLineDirectionalStability: ["range", 0.8, 1, 0.01],
// flowLineColor: ["color", "#fff1b9"],
e: md`---`,
anchorRadius: ["range", 0, 20, 0.1],
anchorColor: ["color", "#341a0f"]
}).reduce((a, v) => {
if (v[1][0] == "range") {
a[v[0]] = Inputs.range([0, v[1][2]], {
value: v[1][1],
label: v[0],
step: v[1][3]
});
} else if (v[1][0] == "color") {
a[v[0]] = Inputs.color({
value: v[1][1],
label: v[0]
});
} else {
a[v[0]] = v[1];
}
return a;
}, {})
)
viewof magnetConfig = Inputs.form(
Object.entries({
width: ["range", 640, 1200, 1],
height: ["range", 1000, 1200, 1],
columns: ["range", 40, 100, 1],
backgroundColor: ["color", "#341A0F"],
a: md`---`,
pointerWidth: ["range", 2, 100, 0.1],
pointerLength: ["range", 20, 100, 0.1],
attractionPointerBaseColor: ["color", "#661e32"],
attractionPointerTipColor: ["color", "#C2B6DA"],
repulsionPointerBaseColor: ["color", "#F26968"],
repulsionPointerTipColor: ["color", "#C5D92D"],
c: md`---`,
anchorRadius: ["range", 0, 20, 0.1],
anchorColor: ["color", "#341A0F"],
// b: md`---`,
// flowLineStepSize: ["range", 2, 100, 1],
// flowLineWidth: ["range", 3, 10, 0.01],
// flowLineFadeSpeed: ["range", 0.02, 1, 0.01],
// flowLineSpawnRate: ["range", 0.2, 1, 0.01],
// flowLineMaxLength: ["range", 1000, 1000, 1],
// flowLinesGeneratedPerFrame: ["range", 1, 100, 1],
// maxFlowLines: ["range", 20, 1000, 1],
// flowLineDirectionalStability: ["range", 0.8, 1, 0.01],
// flowLineColor: ["color", "#fff1b9"],
d: md`---`,
magnetInfluenceRadius: ["range", 880, 1000, 1],
magnetProximityFadeDistance: ["range", 4, 1000, 1],
positiveColor: ["color", "#341a0f"],
negativeColor: ["color", "#0000ff"],
drawMagnets: ["toggle", false]
}).reduce((a, v) => {
if (v[1][0] == "range") {
a[v[0]] = Inputs.range([0, v[1][2]], {
value: v[1][1],
label: v[0],
step: v[1][3]
});
} else if (v[1][0] == "color") {
a[v[0]] = Inputs.color({
value: v[1][1],
label: v[0]
});
} else if (v[1][0] == "toggle") {
a[v[0]] = Inputs.toggle({
value: v[1][1],
label: v[0]
});
} else {
a[v[0]] = v[1];
}
return a;
}, {})
)
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.
