viewof magnetConfig = Inputs.form(
Object.entries({
width: ["range", 1200, 1200, 1],
height: ["range", 1200, 1200, 1],
columns: ["range", 12, 20, 1],
backgroundColor: ["color", "#341A0F"],
a: md`---`,
pointerWidth: ["range", 4, 100, 0.1],
pointerLength: ["range", 40, 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", 750, 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;
}, {})
)
viewof magnetConfigEdge = Inputs.form(
Object.entries({
width: ["range", 1200, 1200, 1],
height: ["range", 1200, 1200, 1],
columns: ["range", 12, 20, 1],
backgroundColor: ["color", "#341A0F"],
a: md`---`,
pointerWidth: ["range", 4, 100, 0.1],
pointerLength: ["range", 40, 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", 750, 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;
}, {})
)
viewof magnetConfigForce = Inputs.form(
Object.entries({
width: ["range", 1200, 1200, 1],
height: ["range", 1200, 1200, 1],
columns: ["range", 12, 50, 1],
backgroundColor: ["color", "#341A0F"],
a: md`---`,
pointerWidth: ["range", 4, 10, 0.1],
pointerLength: ["range", 40, 50, 0.1],
attractionPointerBaseColor: ["color", "#661e32"],
attractionPointerTipColor: ["color", "#C2B6DA"],
repulsionPointerBaseColor: ["color", "#F26968"],
repulsionPointerTipColor: ["color", "#C5D92D"],
c: md`---`,
anchorRadius: ["range", 15, 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", 300, 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;
}, {})
)
viewof magnetConfigForm = Inputs.form(
Object.entries({
width: ["range", 1200, 1200, 1],
height: ["range", 1200, 1200, 1],
columns: ["range", 12, 20, 1],
backgroundColor: ["color", "#341A0F"],
a: md`---`,
pointerWidth: ["range", 4, 10, 0.1],
pointerLength: ["range", 40, 50, 0.1],
attractionPointerBaseColor: ["color", "#661e32"],
attractionPointerTipColor: ["color", "#C2B6DA"],
repulsionPointerBaseColor: ["color", "#F26968"],
repulsionPointerTipColor: ["color", "#C5D92D"],
c: md`---`,
anchorRadius: ["range", 10, 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", 250, 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.
