The issue here has nothing to do with D3, this is just the way object references work in Javascript. When you do this...
obj.startTime = currentDate;
obj.magnitude = currentValue;
data.push(obj);
... you are changing the same object, which is this...
var obj = {};
... and pushing it to the data array. Because of that, all properties are the same (the last iteration). We can easily demonstrate it. Have a look at this array, it has 10 objects:
const obj = {foo:42};
const myArray = d3.range(10).map(()=>obj);
console.log(JSON.stringify(myArray))
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
Now let's change just the third object:
myArray[2].foo = 17;
However, this will change all of them:
const obj = {foo:42};
const myArray = d3.range(10).map(()=>obj);
myArray[2].foo = 17;
console.log(JSON.stringify(myArray))
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
And that happens because they are all references to the same object.
Solution: the simplest solution is just pushing the whole object, a new one, at each iteration:
data.push({startTime : currentDate, magnitude: currentValue});
Here is the demo:
var data = [];
var currentValue = 0;
var random = d3.random.normal(0, 20);
for (var i = 0; i < 20; i++) {
var currentDate = new Date();
currentDate.setDate(currentDate.getDate() + i);
if (i === 0) {
currentValue = 0;
} else if (i === 1) {
currentValue = 0;
} else if (i === 5) {
currentValue = 0;
} else if (i === 10) {
currentValue = 0;
} else if (i === 19) {
currentValue = 0;
} else {
currentValue = currentValue + random();
}
data.push({
startTime: currentDate,
magnitude: currentValue
});
}
console.log(data);
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
