We Keep Coding

Zoomable timeline with one element per tick (D3V6)

I'm working on a timeline-based chart that should always have one rect per x-axis tick. The idea is to use the color of each rectangle to convey the amount of data that's in that date (somewhat like a heatmap).
The chart also has grouped y values. That is, there are two y axes: one for each group, and inside each of those, three lines (subgroups). Semantically the intention is to say: "For this coupon, on this date, there are this many readings for each data type". To help clear up my intention further, this library has a very similar solution to what I'm aiming at.
OK, and your question...?
My question is about aligning the rectangles with the ticks, and keeping them that way. How can I make them always be aligned with the ticks? Is there a way to "tie" a rect to a tick?
To make matters worst, the chart has to be zoomable, so when you scroll and the dimensions of the ticks change, the rectangles should stick to their corresponding ticks: move with them, change their width accordingly and so on. Basically, I'd like to "marry" the rects to their corresponding ticks.
What have you tried?
My approach right now is to make the segments' width depend on the current tick count, and essentially treat the current ticks as if they were my data.
That is:
segmentWidth = state.width() / ticks.length;
And when updating/rendering the rects:
state.mainG.selectAll('g.couponData')
.selectAll('g.column')
.data(ticks)
...
One problem I see with this is that if you click and drag, the ticks expand, so having a single, global segmentWidth doesn't seem like the right approach. Seems like I'd need a way to grab each tick and get the distance to the next one, and use that as the width of each corresponding segment, but I haven't quite got there yet.
Here's a fiddle with an example of what I have:
https://jsfiddle.net/bnekvp0o/11/
TBH, I presume I'm making some dumb calculation mistakes, but I also feel like I'm bruteforcing the solution, so I'm hesitant to keep trying to make it work with my current approach, since I'm quite new to the framework.
Thanks in advance!

Highcharts Treemap

I am currently building a treemap using highcharts. I have a few categories, and each category has a numerical value indicating how many programs it has inside. What I want to do is have a treemap in the "squarified" style with a box for each category.
The issue I'm running into is that the font size handling highcharts has is abysmal. I'm looking to have the text be large for the larger boxes, and small for the smaller boxes. I cannot seem to figure it out.
I've tried scaling the font size to the value, but sometimes boxes of a large value are really thin, so that falls apart.
I have access to the dimensions of the box, and can give the chart a datalabel formatter function. So I've tried rendering text to a canvas at a certain size, seeing if it is within the bounds or too small, and adjusting by 1 pixel from there, but it still did not work. I actually don't know why this one failed but I messed around with it for a while but has no success.
I've read the documentation and searched for other answers online but no one seems to have done this before. Any help is appreciated. Thank you

You can use formatter function for data labels and make font size depending on point value.
series: [{
...,
levels: [{
...
}, {
level: 2,
dataLabels: {
formatter: function() {
return '<span style="font-size:' + (10 + this.point.value) + 'px">' + this.key + '</span>'
}
}
}],
...
}]
Live demo: https://jsfiddle.net/BlackLabel/8e7b6ak0/
API Reference: https://api.highcharts.com/highcharts/series.treemap.levels.dataLabels.formatter

Highcharts Custom display of tooltips, based on data series values

I could explain better if you can focus on the image attached here:
Can the hover line height be shown only up to the max line height (Please see the image below)
I do not want to show the hover values for first and last week. (I mean on hover of 'week 0', I do not want to show the hover boxes, same as for 'week 7')
Can I set the floor and ceiling for the each series data, Some thing like
series: [{
name: 'CPM',
data: [5,524,4,1,4,1,3,20,3],
color: 'rgb(87, 188, 0)'
//floor: 5,
//ceiling: 524,
},{ ....}
}]
Is there any such floor/min and max/ceil for the each data set.
Such that the other two series data gets visible in the chart. please refer this fiddle
How to show All Data Series Fiddle jsfiddle.net/4vzEt/21/

Could you show jsFiddle what is wrong? It's a little not clear for me.
In tooltip.formatter check this.x and return false when tooltip shouldn't be displayed.
Well, you can set that options, but it won't do anything.
Your image is saying something really different than 2) .. to remove that vertical line, just disable tooltip.crosshairs.
To change order of points, you need to use tooltip.formatter - sort points descending and return formatter string.
References:
tooltip.formatter
tooltip.crosshairs

Highstock scrollbar not covering the whole length in multiple series

I'm having an issue with the scrollbar in multiple series line chart where x-axis is date.
Looks like the max length of the scrollbar is determined by the length of the first (older) series.
Although when pressing the 'All' button in range selector I can see all of the series, as the first series ends before the others, as soon as I touch the scrollbar the chart readjusts so that all I can see is the data contained in the first series' length period.
After that, if I want to see the series after the first one has ended, I need to drag the chart or click the 'All' button in range selector again.
I would really appreciate any help you could provide.
Thanks in advance!
jsFiddle: http://jsfiddle.net/8DdP4/2/

Indeed, it's not supported to cover all series. Here you can find workarund.
With demo: http://jsfiddle.net/highcharts/SD4XN/
In short: in callback add series to the navigator on your own:
function (chart) {
chart.addSeries({
data: seriesOptions[2].data,
xAxis: 1,
yAxis: 1
});
}

The scrollbar you refer to is called navigator.
There is a property in navigator called series which is defined as:
series: Object
Options for the navigator series. Available options are the same as
any series, documented at plotOptions and series.
Unless data is explicitly defined on navigator.series, the data is
borrowed from the first series in the chart.
You can see it here.
Im not sure if you can build your navigator from multiple series, i suppose it is posibles. In case it is not build build the navigator with the largest.

Google Charts API: Highlighting closest Datapoints between 2 series. How?

I have a Google line chart that contains a few years of data. Each year is a separate series. The chart legends displaying each year/series are clickable and clicking on any given 2 or more of these legends/series, displays them and their corresponding Datapoints and their annotations. In the hAxis, these Datapoints are integers ranging from 1 to aprox. 6,000,000. I also have their values displayed under annotations for each Datapoint.
Notice that when you click on a datapoint, it increases in size and gains a white border. If you unclick it, it returns to it's original form.
My question is:
Is it possible to change my code to look for the top 10 closest-to-each-other integers between 2 series based on a predefined threshhold? I know styling may not be an option but perhaps there may be a way to force a Datapoint to appear clicked.
Please allow me to illustrate it for better understanding.

You can do that using option selectionMode: 'multiple' and selecting appropriate points using setSelection() method. For example:
chart.setSelection([
{row:0, column:1},
{row:0, column:2},
{row:2, column:1},
{row:2, column:2}
]);
Of course, you will have to find out points which correspond to defined threshold. See example at jsbin.
Update: example with DataView.