Multiples With X/y Axis And Mouseover Example - Line Path Shows Wrong Values

I am trying to combine severeal D3.js examples based on example. I managed to get mouseover for each multiples chart in part working (values are not displayed at mouse pointer yet

Solution 1:

This is an interesting problem. The example you link to uses a single y scale and yAxis for all 4 sub-plots. In your situation, though, your data has a very different domain for each sub-plot and when you add the dynamic mouse over a shared scale just won't work. So, my solution would be to create a different y scale and yAxis for each subplot.

...

// variable to hold our scalesvar ys = {};

var area = d3.svg.area()
  .x(function(d) {
    return x(d.date);
  })
  .y0(height)
  .y1(function(d) {
    return ys[d.symbol](d.price); //<-- call the y function matched to our symbol
  });

var line = d3.svg.line()
  .x(function(d) {
    return x(d.date);
  })
  .y(function(d, i) {
    return ys[d.symbol](d.price); //<-- call the y scale function matched to our symbol
  });

...

// for each symbol create our scale
symbols.forEach(function(s) {
  var maxPrice = d3.max(s.values, function(d) {
    return d.price;
  });
  ys[s.key] = d3.scale.linear() //<-- create a scale for each "symbol" (ie Sensor 1, etc...)
    .range([height, 0])
    .domain([0, maxPrice]);
});

...

// build 4 y axisvar axisGs = svg.append("g"); //<-- create a collection of axisGs

axisGs
  .attr("class", "y axis")
  .append("text")
  .attr("transform", "rotate(-90)")
  .attr("y", 6)
  .attr("dy", ".71em")
    .style("text-anchor", "end")
    .text("Value");

axisGs.each(function(d, i) { //<-- for each axisG create an axis with it's scalevarself = d3.select(this);
  self.call(
    d3.svg.axis()
      .scale(ys[d.key])
      .orient("left")
      .ticks(4)
  );
});

...

// adjust mouseover to use appropriate scale
focus.attr("transform", function(d) {
  index = bisectDate(d.values, date, 0, d.values.length - 1);
  console.log(index, d.values[index].symbol, d.values[index].date, d.values[index].price);
  return"translate(" + x(d.values[index].date) + "," + ys[d.key](d.values[index].price) + ")"; //<-- finally in our mouse move use the appropriate scale
});

Fully working code here.

Solution 2:

As far as best practices are concerned when you are dealing with n number of datasets you have to go for n number of y scales and their corresponding y axis. It is good for seperation of concern and keeps the visulization intact. here you can see the example.

http://grafitome.github.io/advanced-charts.html#(first chart)