Plotly = await require("https://cdn.plot.ly/plotly-2.24.1.min.js")
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<br>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], fixedrange: true },
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_bcc_data = FileAttachment("FCC_BCC_concentration.json").json()
viewof t_index_multi = Scrubber(
d3.range(0, fcc_bcc_data.FCC_concentration.length),
{
autoplay: true,
delay: 100,
loop: true,
label: "Time Index (0.01sec)",
format: i => `${(i / 100).toFixed(2)} [sec]`
}
)
concentration_BCC_1 = fcc_bcc_data.BCC_concentration.map(row => row[0]);
concentration_BCC_2 = fcc_bcc_data.BCC_concentration.map(row => row[1]);
viewof coloredFCC = {
const a = 1;
const n = 3;
const radius = 10;
const positions = [];
let index = 0;
for (let i = 0; i < n; i++) {
for (let j = 0; j < n; j++) {
for (let k = 0; k < n; k++) {
const base = [i * a, j * a, k * a];
positions.push({ x: base[0], y: base[1], z: base[2], i: index++, type: "corner" });
positions.push({ x: base[0] + a/2, y: base[1] + a/2, z: base[2], i: index++, type: "face" });
positions.push({ x: base[0] + a/2, y: base[1], z: base[2] + a/2, i: index++, type: "face" });
positions.push({ x: base[0], y: base[1] + a/2, z: base[2] + a/2, i: index++, type: "face" });
}
}
}
const xs = positions.map(p => p.x);
const ys = positions.map(p => p.y);
const zs = positions.map(p => p.z);
const colors = positions.map(p =>
p.type === "corner"
? concentration_FCC_1[t_index_multi]
: concentration_FCC_2[t_index_multi]
);
const trace = {
type: "scatter3d",
mode: "markers",
x: xs,
y: ys,
z: zs,
marker: {
size: radius,
color: colors,
cmin: -1,
cmax: 1,
colorscale: [
[0, "blue"],
[0.5, "white"],
[1, "red"]
],
opacity: 1,
line: {
color: "black",
width: 0.5
},
colorbar: { title: "Concentration [M]<br>positive: material I<br>negative: material II<br>", thickness: 10 }
}
};
return Plotly.newPlot(
document.createElement("div"),
[trace],
{
scene: {
xaxis: { range: [-1, n * a + 1], visible: false },
yaxis: { range: [-1, n * a + 1], visible: false },
zaxis: { range: [-1, n * a + 1], visible: false },
aspectmode: "data",
camera: {
eye: { x: -1.06, y: -2, z: 1.5 } // angle
}
},
margin: { t: 30 },
dragmode: "turntable",
},
{
scrollZoom: false,
doubleClick: false,
displayModeBar: false
}
);
}
Plotly.newPlot(
DOM.element("div", { style: "height: 500px;" }),
[
{
x: d3.range(concentration_FCC_1.length),
y: concentration_FCC_1,
type: "scatter",
mode: "lines",
name: "Material 1",
line: { color: "red" }
},
{
x: d3.range(concentration_FCC_2.length),
y: concentration_FCC_2,
type: "scatter",
mode: "lines",
name: "Material 2",
line: { color: "blue" }
},
{
x: [t_index_multi, t_index_multi],
y: [-1, 1],
type: "scatter",
mode: "lines",
name: "Current Time",
line: { dash: "dot", color: "gray" },
hoverinfo: "skip"
}
],
{
title: "FCC Concentration vs Time",
xaxis: { title: "Time Index" },
yaxis: { title: "Concentration [M]", range: [-1, 1] },
margin: { t: 40 }
}
)
viewof coloredBCC = {
const a = 1;
const n = 3;
const radius = 12;
const positions = [];
let index = 0;
for (let i = 0; i < n; i++) {
for (let j = 0; j < n; j++) {
for (let k = 0; k < n; k++) {
const base = [i * a, j * a, k * a];
// 1. Corner atoms
positions.push({ x: base[0], y: base[1], z: base[2], i: index++, type: "corner" });
// 2. Body center
positions.push({ x: base[0] + a/2, y: base[1] + a/2, z: base[2] + a/2, i: index++, type: "body" });
}
}
}
const xs = positions.map(p => p.x);
const ys = positions.map(p => p.y);
const zs = positions.map(p => p.z);
const colors = positions.map(p =>
p.type === "corner"
? concentration_BCC_1[t_index_multi]
: concentration_BCC_2[t_index_multi]
);
const trace = {
type: "scatter3d",
mode: "markers",
x: xs,
y: ys,
z: zs,
marker: {
size: radius,
color: colors,
cmin: -1,
cmax: 1,
colorscale: [
[0, "blue"],
[0.5, "white"],
[1, "red"]
],
opacity: 1,
line: {
color: "black",
width: 0.5
},
colorbar: {
title: "Concentration [M]<br>positive: material I<br>negative: material II<br>",
thickness: 10
}
}
};
return Plotly.newPlot(
document.createElement("div"),
[trace],
{
scene: {
xaxis: { range: [-1, n * a + 1], visible: false },
yaxis: { range: [-1, n * a + 1], visible: false },
zaxis: { range: [-1, n * a + 1], visible: false },
aspectmode: "data",
camera: {
eye: { x: -1, y: 2, z: 1.5 }
}
},
margin: { t: 30 },
dragmode: "turntable"
},
{
scrollZoom: false,
doubleClick: false,
displayModeBar: false
}
);
}
Plotly.newPlot(
DOM.element("div", { style: "height: 500px;" }),
[
{
x: d3.range(concentration_BCC_1.length),
y: concentration_BCC_1,
type: "scatter",
mode: "lines",
name: "Material 1",
line: { color: "red" }
},
{
x: d3.range(concentration_BCC_2.length),
y: concentration_BCC_2,
type: "scatter",
mode: "lines",
name: "Material 2",
line: { color: "blue" }
},
{
x: [t_index_multi, t_index_multi],
y: [-1, 1],
type: "scatter",
mode: "lines",
name: "Current Time",
line: { dash: "dot", color: "gray" },
hoverinfo: "skip"
}
],
{
title: "BCC Concentration vs Time",
xaxis: { title: "Time Index" },
yaxis: { title: "Concentration [M]", range: [-1, 1] },
margin: { t: 40 }
}
)
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.
