I'm attempting to create a row of bars that are all the same height and width based on their titles. I have an array of 100 objects, each with a key called results containing another array of 20 objects. This means I should end up with a row of 2000 bars, but I am only seeing 20 bars:
https://i.sstatic.net/0IO1l.png
Check out my Codepen example: https://codepen.io/ekilja01/pen/RdJqGO
The data consists of an array of objects with sub-objects called results, in this format:
0:
page: 1
results: Array(20)
0: {vote_count: 17968, id: 19995, video: false, vote_average: 7.4, title: "Avatar", …}
...
length: 20
1: {page: 2, total_results: 406130, total_pages: 20307, results: Array(20)}
2: {page: 3, total_results: 406130, total_pages: 20307, results: Array(20)}
This is the approach I am taking in my code:
d3.json('data.json').then(data => {
console.log(data);
for (let i = 0; i < data.length; i++) {
// Setting x and y domain
xScale.domain(data[i].results.map(d => d.title));
yScale.domain(data[i].results.map(d => d.original_title));
svg.selectAll('rect')
.data(data[i].results)
.enter()
.append('rect')
.style('fill', 'red')
.attr('width', xScale.bandwidth())
.attr('height', 70)
.attr('x', function (d) {
return xScale(d.title);
})
.attr('y', function (d) {
return yScale.bandwidth() + 175;
});
}
}).catch(error => console.log(error));