We Keep Coding

D3: Use brush to zoom to specific interval

please see the following D3 example:
https://bl.ocks.org/mbostock/f48fcdb929a620ed97877e4678ab15e6
In this example, the user is able to draw a brush on the screen and then the graph zooms to the region encapsulated by the brush. The way this example works is by updating the x and y scale domains based on the brush extent. You can see that in the brushended() function.
I am looking to achieve this same functionality. However, I do not want to update the x and y scale domains but want to update the zoom scale and translate. The following example achieves this for a map:
https://bl.ocks.org/mmazanec22/586ee6674f52840492c16cc194aacb1f
You can see this is the brushend() function. Here the writer calculates a scale and translation based on the brush extent and then uses them to set a new scale and translate for the zoom behaviour. I am looking to achieve this however for a scatter plot.
I have a written an example of what I have tried in this jsfiddle: https://jsfiddle.net/SSS123/uxdd760k/1/ - see the part where I do my scale and translate calculations below:
var extent = brush.extent();
// Get box coordinates
var lowerX = d3.min([extent[0][0], extent[1][0]]);
var upperX = d3.max([extent[0][0], extent[1][0]]);
var lowerY = d3.min([extent[0][1], extent[1][1]]);
var upperY = d3.max([extent[0][1], extent[1][1]]);
var scale = Math.max( ( width / (x(upperX) - x(lowerX)) ), ( height / (y(upperY) - y(lowerY)) ) );
graphContainer.transition()
.duration(750)
.call(zoom.scale(scale).translate([-x(lowerX), -y(upperY)]).event);
I believe this now works fine for the case when you draw a brush with a width the same size as the height i.e. if you try drawing a box that stretches from 0 to 5 on the xAxis and 0 to 5 on the yAxis then this will zoom in quite well.
However, if you draw a box with 0 - 5 on the xAxis but 0 - 30 on the yAxis then this will no longer calculate a sensible zoom scale.
Has anyone any advise on how to solve this?

Major Ticks and Minor Ticks using Dygraphs

I am working with Dygraphs. I need to have a graph with a background of a grid that has major ticks in dark blue color and minor ticks in light blue color. There should be 1 major tick after every 4 minor ticks. I am looking for an effect similar to the picture shown below.
Picture courtsey :Stack overflow
I have spent a lot of time but have not been able to understand how to do it. Any lead in this direction is appreciated.

You could try using an underlayCallback. Something like:
var g = new Dygraph(div, data,
{
underlayCallback: function(canvas, area, g) {
for (const tick of majorTicks) {
const x = g.toDomCoordsX(tick);
canvas.fillRect(x, area.y, x, area.h);
}
}
}
);

x position of tooltip in d3 stacked bar chart not working

I don't really know why but my xPosition in the stacked bar chart that I am working on is not really working. Can someone tell what I am doing wrong?
No matter what bar I hover over it always comes out on the side:
Here's a JS Bin code that I am working on: https://jsbin.com/qudoyewiba/edit?js,output
All help is appreciated. Thanks!

Inspect the console, the console is your friend. You have a lot of NaNs. The reason is simple: your rect elements don't have a "x" attribute. So, this doesn't work:
var xPos = parseFloat(d3.select(this).attr("x"));
Instead, you have to get the "x" translation of the group that is the parent of that respective rectangle:
var group = d3.select(d3.select(this).node().parentNode);
var xPos = d3.transform(group.attr("transform")).translate[0];
Here is your working code: https://jsbin.com/dutetokoti/1/edit

d3.js: pan with limits

I'm working on a basic linear chart with pan functionality.
I managed to limit the extent to which the chart elements can be dragged by limiting the d3.event.translate values:
var tx = Math.max(0, d3.event.translate[0]),
ty = Math.min(0, d3.event.translate[1]);
All I need now is to limit the x and y axes accordingly. See the example:
http://jsfiddle.net/Q2SWV/
The bars on the chart are limited by 0 when dragging down or to the left. The x and y axes aren't. Any ideas on how to fix the axis problem?

You're very close, but you're missing the final step of updating the zoom behavior with your updated translation coordinates. This will fix your problem since both axes are updated using the zoom. Add the following right after determining tx and ty:
zoom.translate([tx, ty]);
This will apply the limits to your axes. See updated fiddle here: http://jsfiddle.net/mdml/nZD3E/.

from group to stacked graph with Rgraph, y-axis doesn't change

I've been looking around and couldn't find an answer for it, and I don't think it's a difficult solution, but I can't figure out how to do it.
I draw a grouped bar chart with RGraph. This is done with the following code:
var tooltip = createToolTip();
bar4 = new RGraph.Bar('graph_tab1', objectSoap1.getValue());
bar4.Set('chart.colors', ['Gradient(#c01:red)', 'Gradient(#05D:blue)', 'Gradient(#0f0:green)', 'Gradient(#f0f:pink)']);
bar4.Set('chart.labels', objectSoap1.getLabel());
bar4.Set('chart.numyticks', 8);
bar4.Set('chart.ylabels.count', 6);
bar4.Set('chart.variant', '2d');
bar4.Set('chart.strokestyle', 'rgba(0,0,0,0)');
bar4.Set('chart.hmargin.grouped', 0);
bar4.Set('chart.background.grid.autofit.numhlines', 6);
RGraph.Effects.Bar.Grow(bar4);
now if I hit a button it had to change from grouped to stacked. I do this with the following code:
bar4.Set('chart.grouping', 'stacked')
RGraph.Effects.Bar.Grow(bar4);
it draws a stacked graph.. but the problem is the y-axis doesn't change.
as an example, if I have a grouped bar chart, with values 5, 10 and 15. the max y-value will be 15.
But if I stack these values, the value will be 30, and with this piece of code the barchart will grow to far, because it's going to a value 30, and the y-axis only goes to 15.
I hope it's clear what I mean and somebody can help me out.

There's an example of switching from grouped to stacked here:
http://dev.rgraph.net/fiddle/view/cfa8b72f8a9988527269abdfc7d34384