Public
Edited
Mar 4, 2024
3 stars
{
let plt1, plt2;
plt1 = Plot.plot({
x: { nice: true },
y: { nice: true, domain: [-150, 0], label: "dB" },
grid: true,
color: { nice: true, legend: true, scheme: "Tableau10", columns: 6 },
marks: [
Plot.line(data, {
x: "freq",
y: (d) => Math.log10(Math.min(d.resp, 1.0)) * 20,
stroke: "name",
opacity: 0.5
}),
Plot.line(
data.filter((d) => d.name === select),
{
x: "freq",
y: (d) => Math.log10(Math.min(d.resp, 1.0)) * 20,
stroke: "black",
strokeWidth: 4
}
)
]
});
plt2 = Plot.plot({
x: { nice: true },
y: { nice: true },
grid: true,
color: { nice: true, legend: true, scheme: "Tableau10", columns: 6 },
marks: [
Plot.line(data, {
x: "time",
y: "amplitude",
stroke: "name",
opacity: 0.5
}),
Plot.line(
data.filter((d) => d.name === select),
{
x: "time",
y: "amplitude",
stroke: "black",
strokeWidth: 4
}
)
]
});
return htl.html`
<div style="display: flex">
${plt1}
${plt2}
</div>
`;
}
data = {
let data,
d = await FileAttachment(
"frequency-responses-of-the-windows@3.json"
).json();
data = [];
for (const j in d.freq) {
data.push({
resp: d.resp[j],
name: d.name[j],
freq: d.freq[j],
data_type: d.data_type[j],
time: d.time[j],
amplitude: d.amplitude[j]
});
}
return data;
}
data
Type Table, then Shift-Enter. Ctrl-space for more options.
d3 = require("d3")
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.
