How to use ternary conditional on object in loop? - object

Question

I'm new with D3.JS and I want to visualise some data in a graph. The data is stored in an object. I want to make a graph with day & night temperatures. It's stored in the object as below:
{
"datum": "2016-09-11",
"day": "22",
"night": "16"
},
I've used a ternary condition to shift between 'day' and 'night' every time it loops and saved the value in a variable (key) so I can use it to get the key value from the data object. But somehow it doesn't work .. Can anybody see what I'm doing wrong here? I hope my problem is clear .. Here the full code:
var i;
var barOffset = 10;
var barSpacing = 20;
d3.json('weather.json', function (data) {
console.table(data);
for (i = 0; i < 14; i++) {
var key = i % 2 === 0 ? 'night' : 'day';
console.log(data.length);
d3.select('svg')
.append('rect')
.attr('x', barOffset * (i *2))
.attr('y', 400 - 4*data[i][key])
.attr('width', barSpacing)
.attr('height', 4*data[i][key])
.attr('class', i % 2 === 0 ? 'night' : 'day');
}
});
I hope someone can help me! Thanks! :)

Answer 1

d3 provides its own way to negate (pretty much) the need for "for" loops, which is the selection.data(data).enter() pattern, which allows you to use functions to determine svg elements' properties and attributes.
Before the d3.json call define your svg element:
var svg=d3.select('svg').attr('width',500).attr('height',500);
Then instead of using a for loop you can do something like, inside your d3.json call:
//once for the day
svg.selectAll('rect.day').data(data)
.enter()
.append('rect')
.attr('x', function(d,i) {return barOffset * (i * 4);})
.attr('y', function(d,i) {return 400 - 4*d.day;})
.attr('width', barSpacing)
.attr('height', function(d,i) {return 4*d.day;})
.attr('class', "day");
//again for the night...
svg.selectAll('rect.night').data(data)
.enter()
.append('rect')
.attr('x', function(d,i) {return barOffset * (i * 4 + 2);})
.attr('y', function(d,i) {return 400 - 4*d.night;})
.attr('width', barSpacing)
.attr('height', function(d,i) {return 4*d.night;})
.attr('class', "night");
JSBin:
http://jsbin.com/luleze/edit?css,js,output

Answer 2

From what I understand, you have 7 days worth of data, but are looping on 14 days. So after 7 days, data[i] is undefined, hence the error.
Try with:
for (i = 0; i < 7; i++) {
["night", "day"].forEach(function(key) {
d3.select('svg')
.append('rect')
.attr('x', barOffset * (i *2))
.attr('y', 400 - 4*data[i][key])
.attr('width', barSpacing)
.attr('height', 4*data[i][key])
.attr('class', key);
});
}