Several questions about @thi.ng/viz

[rrrnld]

Heya :) Once again strolling through the repository I found @thi.ng/viz. My first impression is really good. It's actually composable! I found that it was a pain to change d3 plots, and copying and slightly adjusting bits from the examples inside the viz repo worked really well. I know it's unfinished and alpha, so please just read this as me expressing my curiosity. :)

I have three unrelated questions:

1. I'd like to create multiple scatterplots below each other that share the same x-axis (time-of day); the y-position is determined by the date. This what I do with the data to prepare it (timestamp is an RFC3339 timestamp like 2024-07-12T10:03:00Z):

const data = [...iterator(
  comp(
    map((x) => ({ ...x, datetime: new Date(x.timestamp) })),
    partitionBy((x) => x.timestamp.split('T')[0])
  ),
  measurements
)]

Is this currently possible?

2. Is there any way to dynamically generate attribs, or, if I may dream, add interactivity to individual atoms of the plot? From what I can tell attribs are generated like so:

scatterPlot(values, {
  // static, will be the same for the entire plot
  attribs: { stroke: "green", fill: "transparent", shape: "circle", size: 2, title: 'foo' },
})

Naively replacing attribs with a function taking the current value as an argument didn't work. Also, as soon as the DOM tree is generated, it's not trivial to recover the original value, so massaging the tree to add dynamic behavior is not possible. Any thoughts on that?

3. Lastly and least importantly for me: Is it possible to overlay plots with different domains? The examples show overlayed plots of different types, but they share the same domain. My guess is that it's not trivial due to the way axes work.

Thanks!

[postspectacular]

Hey @heyarne! Welcome back! 👋 These are great questions & I will try to answer them (incl. via a new example) over the weekend...

In the meantime, it would really help me if you could briefly explain some more what you mean with:

• in your first question: multiple scatter plots below each other — do you mean they should all be part of the same SVG, but with different Y origins, yet all using a single X axis (e.g. only shown in first/last subplot)? Is that it?
• last question: please explain some more the multiple domains overlay idea. any examples (or quick napkin sketch) to illustrate?

Thanks & will report back asap!

[rrrnld]

Maybe it helps if I show what the data I'm trying to visualize looks like. I am trying to visualize power consumption, where a measurement looks like this:

{
  "qcom-battery": {
    "capacity": {
      "value": 99,
      "unit": "%"
    },
    "status": "Full",
    "current": {
      "value": 20.5,
      "unit": "mA"
    },
    "voltage": {
      "value": 4.3,
      "unit": "V"
    },
    "power": {
      "value": 0.1,
      "unit": "W"
    }
  },
  "timestamp": "2024-07-09T20:30:00+0200"
}

This is a single measurement out of many taken in 15 minute intervals.

So regarding the "multiple scatter plots below each other": They should appear in the same SVG. I would like to treat the x-domain as periodic, using time of day, and I'd like to produce something like a ridgeline chart https://d3-graph-gallery.com/graph/ridgeline_basic.html, where each line represents a day that has the same scale for values in [0; 100] (to visualize current capacity). Ideally the y-axis would be labelled with the date.

Now regarding multiple domains, here's a sketch:

The idea is to show an additional measurements. It's a different unit, with values in a different domain (capacity: [0; 100] %, power draw: [0; 2.5] W), but they share the point in time.

I have seen this elsewhere with multiple y-axis labels positioned on both sides of the chart (though I personally this crowded and often confusing). This is also why my thinking went to multiple y-axes, and that the interface doesn't allow it. In the sketch I'm riffing on the idea of indicating a current x-position on hover, and just displaying the current value there (going back to the question of interactivity and how to correlate a piece of hiccup to the measurement that produced it).

Thank you so much! :)

[postspectacular]

Thank you for these, @heyarne — I will take a look at this in a bit. Just wanted to let you know I've also just uploaded a new example for you, more details in this Mastodon thread:

https://mastodon.thi.ng/@toxi/112778569932971617

More to come! :)

[postspectacular]

Hi @heyarne, just another quick interim update by way of another new example:

Demo:
https://demo.thi.ng/umbrella/viz-ridge-lines/

(move the mouse over the plots to show & update value labels)

Source:
https://github.com/thi-ng/umbrella/tree/develop/examples/viz-ridge-lines/src/index.ts

Please note: This uses a still unreleased updated version of thi.ng/viz (the areaPlot() fn needed some minor update). I've already committed the changes, but release will only be sometime tomorrow/Tuesday... (more answer then too, but I hope this helps somewhat for now...)