We Keep Coding

Tooltip using d3.bisector in small multiples of stacked area charts is throwing reference errors

I have a stacked area chart — or rather, small multiples of stacked area charts — to which I'm trying to add a tooltip that displays values multiple values, as in this block: https://bl.ocks.org/fabiomainardi/3976176cb36e718a608f
as well as this one: http://bl.ocks.org/wdickerson/64535aff478e8a9fd9d9facccfef8929
As I understand it, the result I'd like to achieve (which most resembles that second block) requires the d3.bisect method, since 1) multiple paths/lines are involved, and 2) I'd like, eventually, alongside the y value for each area inside the tooltip, to display the x axis value (i.e., the date), like in this block: http://bl.ocks.org/d3noob/6eb506b129f585ce5c8a. Maybe getting the x axis value on mousover is another question for another day; but maybe you're feeling generous.
To me, they're related questions in the sense that I'm equally unable to call up either x or y values for the tooltip.
Here's my Plunker: http://plnkr.co/edit/ztDPXbLu3dZ6ju4poz84?p=preview
I've tried adapting about six or seven different examples that use d3.bisect to display tooltip x/y values for multiple paths/lines, without success. All of the other examples that I've been working from have a much simpler data structure.
In my various adaptations of other people's tooltips, I've tried summoning dates and y values in the following ways, among others:
d.x
d.date
d.dates
arr
data.x
dataset.x
dataset.date
data.x
dataset.x
data.y
d.y
dataset.y
dataset[0].values[1].y
dataset[i].values[j].y
dates.x
date.y
dataset.values.x
data.values.y
d3.max(data.values.y)
Predictably, I get a lot of reference errors.
I've managed to get one pseudo-tooltip working. Here's another Plunker:
https://plnkr.co/edit/XpXQc6ryvpyPeprAPxH4?p=info
But this only displays totals for the full date range, and only one path at a time. My goal is to display, in the tooltip, both the date and all of the respective y axis values, for each of the paths in the stacked area chart, just like in the second block I referenced earlier.
How do I do this, and can someone demonstrate for me in a forked Plunker, how to make the necessary references to my dataset for such a tooltip?

Alter first vertical grid line in nvd3

I want to remove (or make effectively hidden) the first vertical line in the grid for an nvd3 chart. I thought it was a problem with my chart, but after testing it, I realized it seems to be a more general problem.
I tested it by running the line:
d3.selectAll('.tick, .nv-axislabel, .nv-axis text').attr('fill','#999999')
in the console, at the simplest line chart I could find: http://nvd3.org/examples/line.html and it still didn't work! It changes all the lines except the very first vertical line. I'm baffled, I've tried every combination of classes with stroke, fill, opacity, etc - I can either affect the entire svg (with opacity), or nothing. Anyone have any ideas?
EDIT:
I should have specified this originally, I apologize - I do not want to remove the Y axis entirely. I still need the label and the tick marks - I just want to remove that one vertical line (or at least lighten it - it is much darker than the rest of my chart).

Going by your comments:
You don't want to see the " the first vertical line in the grid for an nvd3 chart"
Which is the y axis:
Two ways to achieve that:
Option1
var chart = nv.models.lineChart()
.margin({left: 100}) //Adjust chart margins to give the x-axis some breathing room.
.useInteractiveGuideline(true) //We want nice looking tooltips and a guideline!
.transitionDuration(350) //how fast do you want the lines to transition?
.showLegend(true) //Show the legend, allowing users to turn on/off line series.
.showYAxis(false) //hide the y-axis
.showXAxis(true); //Show the x-axis
Option2:
Since in your example you are going for a CSS option
d3.selectAll('.nv-y').attr('display','none')
I will prefer Option1
EDIT post your clarification, you wish to make the y axis line light you can use:
d3.selectAll('.nv-y path').attr('opacity','0.1')
or if you want to hide it completely
d3.selectAll('.nv-y path').attr('display','none')

One solution is to specify an array of tick values that you want to use for each axis. Use axis.tickValues([values]) to explicitly declare which XAxis ticks you want for your graph. So you could pop .tickValues([1, 2, 3, 5, 8, 13, 21]); into either the chart.xAxis or the chart.yAxis, and ticks would only appear from the corresponding values in the array. In your case, you would want to put it in the chart.xAxis variable. However if you want to have a dynamic chart, explicitly declaring the tick values would pose a problem once the data is updated in the graph. If on the other hand you are using static data, this is a pretty easy fix. I've tested this solution in their live code editor and it seems to do the trick.
Refer to https://github.com/mbostock/d3/wiki/SVG-Axes#ticks to see some other directives that could be of use.

Spline chart drawn on the xaxis in case of single value or constant values - highchart

while using the older version of highchart - 2.1.6, if a plot had only one value or a series of same values, it would plot at the middle of the screen as below.
But, ever since i have upgraded the version of the highchart to 4.1.5, the line sticks to the bottom, on the xaxis. like this.
I am looking for the option to set it back to normal but, didn't find it yet. Help me out with this please.
I have tried pointPadding on the series and even maxPadding on the yAxis, but no use.
Here is the fiddle where it is replicated -
http://jsfiddle.net/ka4p4sym/2/
var chart = $('#container').highcharts();

I would set yAxis.minRange option, demo. It won't place line exactly in the middle, but will make some extra space on top and bottom.

Highchart - spline chart - Single value or horizontal line series draws ON the x axis [duplicate]

while using the older version of highchart - 2.1.6, if a plot had only one value or a series of same values, it would plot at the middle of the screen as below.
But, ever since i have upgraded the version of the highchart to 4.1.5, the line sticks to the bottom, on the xaxis. like this.
I am looking for the option to set it back to normal but, didn't find it yet. Help me out with this please.
I have tried pointPadding on the series and even maxPadding on the yAxis, but no use.
Here is the fiddle where it is replicated -
http://jsfiddle.net/ka4p4sym/2/
var chart = $('#container').highcharts();

I would set yAxis.minRange option, demo. It won't place line exactly in the middle, but will make some extra space on top and bottom.

Highcharts - Series tooltip doesn't work when plotting lines that zigzag on the x axis

I have a highcharts chart that I need to plot but which has lines which can go back on themselves on the X Axis.
e.g. jsfiddle example
My problem isn't that I can't plot it but rather the series tooltips don't display correctly.
If you zoom right in to individual points they seem ok, but not at normal zoom level.
E.g. if you scan your mouse across the series from right to left it doesn't want to show you the tooltip on x Value 1, intead it jumps to the second set of values on x value 2.
I've changed the tooltips to being not shared:
tooltip: {
shared: false,
},
but this has made little difference, apart from now it seems to work when zoomed in, but I suspect this is only because there are only one set of x Axis values visible.
Does anybody know how it is possible to configure Highcharts to allow for series where the x values aren't sorted either ascending or descending as I can't find anything in the documentation.

From the API documentation:
Note that line series and derived types like spline and area, require
data to be sorted by X because it interpolates mouse coordinates for
the tooltip. Column and scatter series, where each point has its own
mouse event, does not require sorting.
So change your series to type: 'scatter' with a lineWidth > 0. Here's an updated fiddle.