score:2

You code is take from examples with One data serie and you have multiple series:

The important start here:

``````var x0 = x.invert(d3.mouse(this)),
i = bisectDate(data, x0, 1),
d0 = data[i - 1],
d1 = data[i],
d = x0 - d0.date > d1.date - x0 ? d1 : d0;

city.select("circle.y")
.attr("transform",
"translate(" + x(d.date) + "," +  // based on date
y(d.close) + ")"); // you need find y value
// d.close is not defined
``````

You have 3 serie. You could take the max value at some date and draw the circle there:

``````var ymax = d3.max([+d["OP"],+d["IP"],+d["Pharmacy"]])
var xm = x(d.date);
var ym = y(ymax);

city.select("circle.y")
.attr("transform",
"translate(" + xm + "," +
ym + ")");
``````

Or, draw three circles, one for each series:

``````city.select("circle.y")
.attr("transform",
"translate(" + xm + "," +
y(+d["OP"]) + ")");

city.select("circle.y")
.attr("transform",
"translate(" + xm + "," +
y(+d["IP"]) + ")");

city.select("circle.y")
.attr("transform",
"translate(" + xm + "," +
y(+d["Pharmacy"]) + ")");
``````

Now you know how to calulate (x,y) you can do the horizontal & vertical dashed lines with labels.

Here's s psudoworking code. I've let you complete it as homework :)