d3.js. Stream chart shifts with different data sets. Why? -

code available here http://jsfiddle.net/zeleniy/ea1ul7w9/

data = [47, 13, 61, 46, 26, 32, 6, 85, 1, 14, 86, 77, 13, 66, 0, 20, 11, 87, 5, 15]; data = [52, 33, 53, 45, 59, 45, 42, 50, 53, 50, 37, 45, 52, 50, 46, 48, 52, 56, 58, 59]; width = 300; height = 100;  xscale = d3.scale.linear()     .domain([0, data.length])     .range([0, width]); yscale = d3.scale.linear()     .domain([d3.min(data), d3.max(data)])     .range([0, height])  area = d3.svg.area()     .interpolate("basis")     .x(function(d, i) { return xscale(i); })     .y0(function(d) { return yscale(-d / 2); })     .y1(function(d) { return yscale(d / 2); });  svg = d3.select("#stream")     .append("svg")     .attr("width", width)     .attr("height", height);  svg.selectall("path")     .data([this.data])     .enter()     .append("path")     .attr("transform", "translate(0," + (height / 2) + ")")     .style("fill", "red")     .attr("d", area); 

with first data set chart drawn in center of svg element, expect. second data set stream shifts top of svg element. , can't understand why. why?

the first array contains values close 0 , it's opening range. line, then, fudge shift path open window:

.attr("transform", "translate(0," + (height / 2) + ")") 

that said, setting scales in confusing way (to me @ least). think domain min/max of (plotted) dataset, in case -max(d/2) , max(d/2). further, think y-scale going bottom top in normal plot. these changes, don't need artificially move anything:

var datamax = d3.max(data); yscale = d3.scale.linear()   .domain([ -datamax/2, datamax/2 ]) // real min/max of plotted data   .range([height, 0]) //<- bottom top, although still works without change... 

in example, left axis overlayed illustration.