[Solved]-d3 line and area charts not updating with new data array-d3.js

I actually had the same issue today. So I may be able to help out. I noticed you're calling setTimeout to update the data in your html.

It seems you are calling chart() inside of that setTimeout. The only problem with that is that you aren't resetting your ranges.

Instead you should try calling demoChart(), or adding new ranges inside of your chart(). Your ranges are:

function xs(d) { return xScale(d[0]) }
function ys(d) { return yScale(d[1]) }

var xScale = d3.scale.linear().domain([0, 500]).range([0, 400]),
    yScale = d3.scale.linear().domain([0, 1]).range([400, 0]),
    line = d3.svg.line().x(xs).y(ys);

If that doesn't fix it, it may because you are updating with two setTimeouts initiating each second simultaneously. So the second data is overwriting the first immediately here:

setTimeout(function() {
  console.log("Modifying data array");
  pts[0][2][1] = 0.5;
  d3.select("#demo").datum(pts).call(chart);
},1000);

setTimeout(function() {
  console.log("Passing new data array");
  d3.select("#demo").datum([[[0,1],[200,0.45],[500,0]]]).call(chart);
},1000);

Here's an article I found helpful: http://www.d3noob.org/2013/02/update-d3js-data-dynamically-button.html