We Keep Coding

Re-scale axis when zoomed

I'm creating a similar graph to this:
https://bl.ocks.org/mbostock/34f08d5e11952a80609169b7917d4172
However when I'm zooming in to a certain section, I would like to scale the Y axis to the local (displayed) maximum, instead of the global one. For example when I zoom to the data between 2009 and 2010 there is a lot of empty white space at the top.
Basically what I would like to achieve is get the range to which I've zoomed, and get the maximum value within that.
The other possibility would be adding another brush bar on the side, but that would be very inconvenient on the long run for the users.

You just need to change the y scale domain for that.
First, let's create a global variable named globalData and associate the data array to it. Note: this is not the correct way to do this, but I'll do it simply because the brushed and zoomed functions lie outside d3.csv, which is asynchronous, and refactoring it takes some work... so, it will be your job refactoring it.
Then, in both the brushed and zoomed functions, we filter the data according to the brush:
var filteredData = globalData.filter(function(d){
return d.date > x.domain()[0] && d.date < x.domain()[1]
});
After that, we calculate the new y domain:
y.domain([0, d3.max(filteredData, function(d){
return d.price
})]);
Don't forget to call the axis again.
This is the updated bl.ocks: https://bl.ocks.org/GerardoFurtado/17fd6b82324e355c768992e78140fe9a/33b9a6c58265454864a9d921df032e708fad5237

dygraph set x axis max value and update the dygraph

Trying to set the maximum value of the x-axis of a dygraph after it has been drawn.
Tried
axes = g.axes_;
axes.maxxval = maxVal;
g.updateOptions({
axes
});

You want to be setting the valueRange property. See this demo.
The trailing _ in g.axes_ means it's a private internal property. Nothing good will come from messing with it.

Highcharts - Diagonal line X/Y axis

Is there any way of showing a 1:1 diagonal line in Highcharts? I am looking for a line which X and Y values always match.
I know how to render a line in Highcharts using the renderer, however, I don't want an independent line but one that reacts to the chart resizing/zooming. A series with [(0,0),(1,1)] is not really an option (it would affect zooming).
Something like this except x and y axis might vary their value due to zooming.

You can do it by detecting the setExtremes() event on you axes, and fire a function to get the axis extremes and draw a line.
(or, in this case, I used the afterSetExtremes() function)
In my example I did it by using a line series. I assume you can adapt it to use the renderer since you've already used the renderer to draw the line initially.
function redrawLine(chart) {
var xExt = chart.xAxis[0].getExtremes();
var yExt = chart.yAxis[0].getExtremes();
chart.series[1].setData([
{'x':xExt.min,'y':yExt.min},
{'x':xExt.max,'y':yExt.max}
]);
}
Example:
http://jsfiddle.net/jlbriggs/feLdzpux/
Of course, if your intent is to compare observed values to predicted values, then re-drawing the line when you zoom in is counter productive and misleading - the line should not move based on the zoom level - it should always be constant.

dc.js bar chart with ordinal x axis scale doesn't render correctly

I've recently discovered dc.js and have been trying to implement a simple bar chart using the bar chart example provided on d3.js's website: http://bl.ocks.org/mbostock/3885304.
However, as part of dc.js implementation, a crossfilter dimension and group is required.
So using a simple TSV file with "letters" and "frequencies", I've changed the code a bit to look as follows:
d3.tsv('testdata.tsv', function(error, data) {
var cf = crossfilter(data);
var dimension = cf.dimension(function(d){
return d.letter;
}
var group = dimension.group().reduce(
function(p,v){
p.frequency += v.frequency
},
function(p,v){
p.frequency -= v.frequency
},
function(){
return { frequency: 0 };
});
I'm a little confused about what I should be setting the valueAccessor to (on my bar chart), because when I set the valueAccessor to return "frequency", and I set my xAxis scale to ordinal with a domain of all "letters" in the data set, I get a rendered bar graph with almost all x-axis values ("A - Y") at the ZERO point and one x-axis value (i.e. "Z") at the end of the x-axis line.
I've tried setting the ranges, but it doesn't seem to do the trick. Any ideas on what I'm misunderstanding would be greatly appreciated!

Turns out I had to set the .xUnits property to dc.units.ordinal() in order to get the x-axis spaced out correctly!

Use d3 log scale instead of linear scale

I'm trying to do a chart based on http://mbostock.github.com/d3/talk/20111116/bar-hierarchy.html, the only difference being that I'd like to use a log scale for the x-axis.
Here's my fiddle: http://jsfiddle.net/JhDVC/5/
As you can see, the x-axis is defined at line 4:
x = d3.scale.linear().range([0, w]),
If I change it for
x = d3.scale.log().range([0, w]),
Then it doesn't work (nothing is rendered), throwing these error messages:
Error: Invalid value for <rect> attribute width="NaN"
Changing the domain setting from
x.domain([0, root.value]).nice();
to
x.domain([1, root.value]).nice();
shows me the z axis (names) but still no bars or values.

There are a few other places where the domain for the scale is set. You need to update those as well.
Working jsfiddle here.
And here's some code so that it allows me to post this:
x.domain([1, root.value]).nice();

Your range includes zero - log(0) is undefined.