D3.js - Adding tooltip hover to multiline chart (CODEPEN)

[lot]

I want to create a tooltip / hover in my D3 linechart like this one: https://codepen.io/savemuse/pen/bgQQxp

My problem is that I’m trying to change this code to my data and I can’t get it to work. My data looks like this:

var data = [
  {
    'timescale': '2011-01-05', 
    'totalAmount': 20
  },
  {
    'timescale': '2011-01-06', 
    'totalAmount': 40
  },
  {
    'timescale': '2011-01-07', 
    'totalAmount': 70
  },
  {
    'timescale': '2011-01-08', 
    'totalAmount': 100
  }
];

And I create 3 lines out of this by multiplying it with a factor like this:

const lineFactor = 1.5 

 // create line 1
const line1 = d3.line()
     .x(function (d) { return x(d.timescale) })
     .y(function (d) { return y(d.totalAmount) })
     .curve(d3.curveCatmullRom.alpha(0.5))

// create line 2
const line2 = d3.line()
     .x(function (d) { return x(d.timescale) })
     .y(function (d) { return y(d.totalAmount * linefactor) })
    .curve(d3.curveCatmullRom.alpha(0.5))

// create line 3
const line3 = d3.line()
     .x(function (d) { return x(d.timescale) })
     .y(function (d) { return y(d.totalAmount * linefactor * 2) })
     .curve(d3.curveCatmullRom.alpha(0.5))

So, I want to get the same result as in https://codepen.io/savemuse/pen/bgQQxp , but then with my data above.

Untilnow I can’t get it visualized at all as I’m really struggling with keeping it flexible (no hard coding) and changing the format of my data is something I’m not getting. For example, to get the:

var trends = z.domain().map(function(name) {
  return {
    name: name,
    values: data.map(function(d) {
      return {
        timescale: d.timescale,
        total: +d[name]
      };
    })
  };
});

working… so any help is very helpfull!