Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
viewof d = Inputs.range([2, 25], {
label: "d – Particle Spacing (2–25)",
step: 1,
value: 2
})
Insert cell
viewof K = Inputs.radio([0.01, 0.1, 1], {
format: x => {
const colorMap = { 0.01: "blue", 0.1: "orange", 1: "red" };
return html`<span style="color:${colorMap[x]}">K = ${x}</span>`;
},
value: 0.01,
horizontal: true
})
Insert cell
selected_file = data.find(d => d.filename === selected_filename)

Insert cell
positions = selected_file?.x
concentration = selected_file?.C
time = selected_file?.t

Insert cell
viewof t_index = concentration && Scrubber(
d3.range(0, concentration[0].length),
{
autoplay: true,
delay: 100,
loop: true,
label: "Time Index (0.01 sec)"
}
)
Insert cell
Plotly.newPlot(
DOM.element("div", { style: "height: 500px;" }),
[
{
type: "scatter",
mode: "markers",
x: positions.map(p => p[0]),
y: positions.map(p => p[1]),
marker: {
size: 23,
sizemode: "diameter",
color: concentration.map(row => row[t_index]),
cmin: -1,
cmax: 1,
colorscale: [
[0, "blue"],
[0.5, "white"],
[1, "red"]
],
colorbar: {
title: "Concentration [M]<br>(positive: material I; negative: material II)"
},
opacity: 0.9,
line: { color: "black", width: 0.5 }
},
text: ["Particle 1", "Particle 2"],
hoverinfo: "text+marker.color"
}
],
{
xaxis: { visible: false },
yaxis: { title: "Distance [cm]", range: [-1, 26] },
margin: { t: 50 }
}
)

Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Plotly = await require("https://cdn.plot.ly/plotly-2.24.1.min.js")
Insert cell
viewof t_index = Scrubber(
d3.range(0, concentration[0].length),
{
autoplay: true,
delay: 100,
loop: true,
label: "Time Index (0.01sec)"
}
)
Insert cell
viewof d = parameters.querySelector('input[type="range"]')
d = Generators.input(viewof d)

viewof K = parameters.querySelectorAll('input[type="radio"]')
.find(r => r.checked)
?.closest('label')?.control
K = Generators.input(viewof K)
Insert cell
Plotly.newPlot(
DOM.element("div", { style: "height: 500px;" }),
[
{
type: "scatter",
mode: "markers",
x: positions.map(p => p[0]), // X position
y: positions.map(p => p[2]), // Z position
marker: {
size: 23, // Diameter = 2 (units)
sizemode: "diameter", // Interpret size in coordinate units
color: concentration.map(row => row[t_index]),
cmin: -1,
cmax: 1,
colorscale: [
[0, "blue"],
[0.5, "white"],
[1, "red"]
],
colorbar: { title: "Concentration [M] <br>(positive: material I; negative: material II)" },
opacity: 0.9,
line: { color: "black", width: 0.5 } // Optional: outline
},
text: ["Particle 1", "Particle 2"],
hoverinfo: "text+marker.color"
}
],

{
xaxis: {
visible: false,
showgrid: false,
showticklabels: false,
zeroline: false,
showline: false
},
yaxis: { title: "Distance [cm]", range: [-1, 26] },
margin: { t: 50 }
}
);

Insert cell
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 }
}
)

Insert cell
Insert cell
Insert cell
Insert cell
FCC = FileAttachment("FCC_d2@4.gif").image()
Insert cell
Insert cell
BCC = FileAttachment("BCC_d2.gif").image()
Insert cell

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.
Learn more