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 Arearange has no zoom animation above certain length

I am building a Highcharts visualisation where there is a line series, and an area series that hugs it (as the error of that series).
My problem is that when I add the arearange, the zoom animation no longer works. The zoom animation works just fine without the arearange series and, strangely enough, the zoom animation works fine if there are eight data points in the area range, but not if there are nine or above.
I have created a codepen to demonstrate this: http://codepen.io/samirelanduk/pen/eWgdZN
The two highcharts files I am pulling in are:
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/stock/highcharts-more.js"></script>
Does anybody know why this is? Is it a bug (known or unknown) within Highcharts, or have I done something wrong? Or is there a very good reason for why it does this?

If the number of the points is higher than 99, then the animation for zooming is disabled, unless you force it by setting chart.animation to true. I cannot find whether it is documented, sadly, but it can be seen in the function responsible for zooming.
In chart.prototype.zoom:
// Redraw
if (hasZoomed) {
chart.redraw(
pick(chart.options.chart.animation, event && event.animation, chart.pointCount < 100) // animation
);
}
example: http://codepen.io/anon/pen/bWgBMw

Highcharts bar chart rendering issue - bars getting rendered under each other

I'm seeing a strange issue with a Highcharts bar chart. I am trying to render just under 10k items, and I have my plot options series turboThreshold set to 50k.
The issue is happening whether I structure my series as an array of objects
series: [
{
name: "string",
y: number
}
]
or as an array of arrays
series: [
[
"string",
number
]
]
What's happening is that, up to 4004 items, the chart renders fine. With 4005 items, the top bar is moved down one and is rendered under the second bar. With 4006, the top two are rendered under the third, etc. The x-axis labels remain fine, it's just the bars themselves that move.
Here is a screen shot with 4007 (4004 + 3) items. As you can see, the top three bars are under the fourth.
With the full 10k items, you have to scroll most of the way down (~6000 bars) to see the "first" bar.
I have a calculation to determine the height of the chart based on the number of items, to keep the bar size roughly the same, and that seems to be working fine. Inspecting the containing div shows that it is indeed the height set by the calculation, and the chart renders all of the x-axis labels correctly (even if I let through the full 10k items, the last one is right there at the bottom of the chart).
Any ideas as to why this might be happening? At 4004 items the chart height is 100100 px, is there some kind of limit or threshold within SVG that might be causing the issue?
(Highcharts 4.1.9, jQuery 1.11.3 for backwards compatability.)
Here is a fiddle showing the behavior. Apparently it is related to the fact that I have my y-axis opposite (so the scale is on top) and the y-axis and chart titles set to display: none.
Still would appreciate any ideas on how to deal with this. I would rather not have to show a y-axis title or chart title, but even if I do show them, the behavior still happens.
I agree with what #Mark said in the comments, it seems to be a bug in Highcharts, but it does not have to do with the visibility of the chart title or y-axis title. I did a little more playing around in an updated fiddle, and found that the problem is related to the chart height. A chart height of 100050px renders fine, no matter how many items are in it. At 100075px the top bar looks slightly off, and at 100100px it is definitely wrong.
The reason the problem was occurring for me at around 4000 items is that I was setting the chart height like this:
$('#container').height(function(){
return Math.max(400, (25 * numItems));
});
4002 * 25 = 100050 and 4003 * 25 = 100075, which is why it seemed to start right around that threshold.

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.

Rendering issue with 2 Google charts on the same page

I have a rendering problem when I have two column material Google charts on the same page. Basically, the first column gets partially drawn on the vertical line which corresponds to axis of the second chart. If I have only 1 chart - everything is OK.
Please take a look at the following screenshots to see the problem:
2 charts (problem): https://www.dropbox.com/s/9p0ji49kpv2vtl1/gc-svg-pb.png?dl=0
1 chart (no problems): https://www.dropbox.com/s/12rpxl23ojean2b/gc-svg-1.png?dl=0

It seems to be a problem with the different scales on the Y-axis. If you look at this example the problem is gone, because the widths of the Y-axis labels of both charts are equal: fiddle1
If you force the Y-axis label to a fixed width, using the vAxis.format option for example, the chart is also correctly rendered: fiddle2
You could try to define a usable format string (refer to the Google documentation for more information), but it seems like a bug in the Google API, see phts's answer for the support page.

You'd better to find/tell about your problem on Google Charts project page directly - https://code.google.com/p/google-visualization-api-issues/issues/list.

Here is the thing, the two tables are in the same line and their Y-axis unit confuses the charts styling. I mean;
There are two-digit numbers in the first case [25,34,33,45,...,26] and five-digit numbers in the second case [31209,43658,42007,...30177] These five-digit numbers become strings like 20K,40K...
Thus, problem is in that part. One solution can be formatting the numbers as #mhu suggested. Another solution can be using the ColumnChart type by changing the code part;
var chart = new google.visualization.ColumnChart(document.getElementById('traffic-chart'));
chart.draw(data, google.charts.Bar.convertOptions(options));
and adding this to the options ;
hAxis: {viewWindowMode: 'maximize'}
https://jsfiddle.net/L0gxnywu/
Solution 2: You can change the div's sequence as;
<div id="requests-chart"></div>
<div id="traffic-chart"></div>
https://jsfiddle.net/3j4s1vfj/