Public
Edited
Jun 3
Plotly = await require("https://cdn.plot.ly/plotly-2.24.1.min.js")
viewof t_index = Scrubber(
d3.range(0, concentration[0].length),
{
autoplay: true,
delay: 100,
loop: true,
label: "Time Index (0.01sec)"
}
)
arcSegments = {
const linesPerSide = 3;
const arcPoints = 80;
const amplitude = 0.4;
const horizontalSpan = 6;
const x0 = positions[0][0]; // Blue particle
const z0 = positions[0][2];
const x1 = positions[1][0]; // Red particle
const z1 = positions[1][2];
const c0 = concentration[0][t_index];
const c1 = concentration[1][t_index];
function fadeColor(base, intensity) {
const mix = (1 - intensity);
return `rgb(${base[0] + mix * (255 - base[0])},${base[1] + mix * (255 - base[1])},${base[2] + mix * (255 - base[2])})`;
}
const arcs = [];
// Red particle (downward ripples)
for (let i = 1; i <= linesPerSide; i++) {
const arc = [];
const offset = -i * 0.6;
const fade = 1 - i / (linesPerSide + 1);
const color = fadeColor([255, 0, 0], fade * Math.abs(c1));
for (let j = 0; j < arcPoints; j++) {
const t = j / (arcPoints - 1);
const x = (t - 0.5) * horizontalSpan + x1;
const z = z1 + offset + Math.sin(x * Math.PI / 3) * amplitude;
arc.push({ x, z, color });
}
arcs.push(arc);
}
// Blue particle (upward ripples)
for (let i = 1; i <= linesPerSide; i++) {
const arc = [];
const offset = i * 0.6;
const fade = 1 - i / (linesPerSide + 1);
const color = fadeColor([0, 0, 255], fade * Math.abs(c0));
for (let j = 0; j < arcPoints; j++) {
const t = j / (arcPoints - 1);
const x = (t - 0.5) * horizontalSpan + x0;
const z = z0 + offset + Math.sin(x * Math.PI / 3) * amplitude;
arc.push({ x, z, color });
}
arcs.push(arc);
}
return arcs;
}
Plotly.newPlot(
DOM.element("div", { style: "height: 500px;" }),
[
// Draw wave arcs
...arcSegments.flatMap(arc =>
arc.slice(0, -1).map((_, i) => ({
type: "scatter",
mode: "lines",
x: [arc[i].x, arc[i + 1].x],
y: [arc[i].z, arc[i + 1].z],
line: {
color: arc[i].color,
width: 2
},
hoverinfo: "skip",
showlegend: false
}))
),
// Draw particles
{
type: "scatter",
mode: "markers",
x: positions.map(p => p[0]),
y: positions.map(p => p[2]),
marker: {
size: 23,
color: concentration.map(row => row[t_index]),
cmin: -1,
cmax: 1,
colorscale: [
[0, "blue"],
[0.5, "white"],
[1, "red"]
],
showscale: true,
colorbar: {
title: "Concentration [M]<br>(positive: material I; negative: material II)"
},
line: { color: "black", width: 0.5 }
},
text: ["Particle 1", "Particle 2"],
hoverinfo: "text+marker.color"
}
],
{
xaxis: { visible: false },
yaxis: {
title: "Distance [cm]",
range: [
Math.min(...positions.map(p => p[2])) - 3,
Math.max(...positions.map(p => p[2])) + 3
]
},
margin: { t: 50 }
}
);
Plotly.newPlot(
DOM.element("div", { style: "height: 500px;" }),
[
{
x: d3.range(concentration[0].length),
y: concentration[0],
type: "scatter",
mode: "lines",
name: "Particle 1",
line: { color: "red" }
},
{
x: d3.range(concentration[1].length),
y: concentration[1],
type: "scatter",
mode: "lines",
name: "Particle 2",
line: { color: "blue" }
},
{
x: [t_index, t_index],
y: [-1, 1],
type: "scatter",
mode: "lines",
name: "Current Time",
line: { dash: "dot", color: "gray" },
hoverinfo: "skip"
}
],
{
title: "Concentration vs Time",
xaxis: { title: "Time Index" },
yaxis: { title: "Concentration [M]", range: [-1, 1] },
margin: { t: 40 }
}
)
FCC = FileAttachment("FCC_d2@4.gif").image()
BCC = FileAttachment("BCC_d2.gif").image()
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.
