Converting data from API to plot

New To Observable
1

Hi Everyone,

I am new to Observable and plot. And have collected some data from an API I want to show in a graph.

image
image1168×649 26.8 KB

The data is shown here with an array for each interface and then it contains an object with all the metrics with time stamps.

How do I make a plot.LineY for each of the level 1 arrays with the information in the records array.

Hope it makes sense?

2

I would try something like:

Plot.plot({
  x: {type: "utc"},
  marks: [
    advInterface1.map(({records}) => Plot.lineY(records, {x: "modificationTime", y: "avgOutputUtil"}))
  ]
})

(if it doesn’t work, please share a notebook with some data so we can elaborate “on site”)

3

Hi Fil

I have make a notebook with the JSON data loaded.

But I am afraid I don’t understand how to manipulate the data. Do we have some good tutorials on it?

4

Here’s a working solution

Plot.plot({
  x: { type: "utc" },
  y: { type: "linear" },
  marks: [
    myData.map(({ records }, index) =>
      Plot.lineY(records, { x: d => +d.modificationtime, y: "avgOutputUtil", stroke: index })
    )
  ]
})
  • x: { type: “utc” } coerces the x axis to utc time, and reads in numbers (the dataset has strings)
  • y: { type: “linear” } coerces the y axis to a linear scale (and avgOutputUtil from strings to numbers)
5

Great, it shows the line now. Thank you.

The stroks are not color coded though?

I have updated the shared notebook with you code.

6

it is color-coded but the red line doesn’t have much amplitude