如何在 Observable Plot 中为每个颜色系列创建一个线图？

Question

描述：

我正在玩 Observable Plot 真的很喜欢设置简单的地块是多么容易。

现在我有一点“更高级”的图表需要绘制并需要帮助。

在我的数据中，我在某个 timestamp 处记录了多个 temp（温度）读数。每个读数来自一个sensor，每个sensor附加到某个device（多个传感器（例如1-3）可以附加到单个设备（例如2） ). 因此，一个数据点可能如下所示（完整 minimal workabel example 见底部脚本）：

{
  timestamp: 1,
  device: 1,
  sensor: 1,
  temp: 20
}

目前，我dot plot这个数据，facet它基于传感器，并给每个(device, sensor)对系列（只是运行下面的代码片段以获得更好的感觉）。

问题：

我现在想用一条黑线连接所有相同颜色的点。我在代码段中用 // HERE I NEED HELP 标记了有问题的行。我假设我必须以某种方式根据 device 和 sensor 对 data 进行分组以实现与颜色类似的分组，但遗憾的是我不知道如何实现这一点并希望你能求助！

const plotTestTemperatures = function(data) {
  const div = document.getElementById('temp-chart-test')
  div.appendChild(Plot.plot({
    color: {
      type: "ordinal",
      scheme: "category10",
      legend: true
    },
    facet: { data: data, x: "device", grid: true,}, 
    grid: true,
    marks: [
      Plot.frame(),
      Plot.dot(data, {x: "timestamp", y: "temp", r: 4, opacity: 0.8, fill: d => `Sensor ${d.sensor} of device ${d.device}` }),
      // HERE I NEED HELP
      // does not yet work, connects all dots independent of color
      // Plot.line(data, {x: "timestamp", y: "temp", opacity: 0.8, stroke: "black" })
    ],              
  }));
}

// call with test data
plotTestTemperatures([
  {
    timestamp: 1,
    device: 1,
    sensor: 1,
    temp: 20
  },
  {
    timestamp: 2,
    device: 1,
    sensor: 1,
    temp: 21
  },
  {
    timestamp: 3,
    device: 1,
    sensor: 1,
    temp: 22
  },
  {
    timestamp: 1,
    device: 1,
    sensor: 2,
    temp: 20.1
  },
  {
    timestamp: 2,
    device: 1,
    sensor: 2,
    temp: 21.3
  },
  {
    timestamp: 3,
    device: 1,
    sensor: 2,
    temp: 22.5
  },
  {
    timestamp: 1,
    device: 2,
    sensor: 1,
    temp: 18
  },
  {
    timestamp: 2,
    device: 2,
    sensor: 1,
    temp: 19
  },
  {
    timestamp: 3,
    device: 2,
    sensor: 1,
    temp: 20
  },
  {
    timestamp: 1,
    device: 2,
    sensor: 2,
    temp: 17.8
  },
  {
    timestamp: 2,
    device: 2,
    sensor: 2,
    temp: 19.1
  },
  {
    timestamp: 3,
    device: 2,
    sensor: 2,
    temp: 20.1
  },
])

<html>

<head>
    <meta name=”robots” content=”noindex”>
    <meta charset="UTF-8">
    <title>Home Automation</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@observablehq/plot@0.4"></script>
</head>

<body>
    <div id="app">
        <h1>Home Automation</h1>
        <div id="temp-chart-test"></div>
    </div>
</body>
</html>

(交叉发布到 ObservableHQ forum)

Answer 1

我想你想要的是

z: (d) => `Sensor ${d.sensor} of device ${d.device}`,

如何在 Observable Plot 中为每个颜色系列创建一个线图？

How to create one line plot per color series in Observable Plot?

javascript

d3.js

observablehq

observable-plot