CODEWITHSUNDEEP
graphd3.js
user2398101
user2398101

Reputation: 339

d3js: multiple bar graphs arranged in a specific order

I wanna draw multiple bar graphs and arrange them at specific locations using d3js. Basically something like this:

enter image description here

I have drawn individual bar graphs earlier, but not sure how to draw multiple little bar graphs and place them as shown in the pic.

Any suggestions or links would be helpful.

Upvotes: 0

Views: 715

Answers (1)

Pablo Navarro
Pablo Navarro

Reputation: 8264

To create several charts as shown in the figure, you will need to have a data structure that allows you to compute the layout for the charts. The data structure could be something like:

var data = [
    {row: 0, col: 0, data: [{x: 1, y: 1}, {x: 2, y: 2}, ...]},
    {row: 0, col: 1, data: [{x: 1, y: 2}, {x: 2, y: 3}, ...]},
]

Then, you will need to implement your charts as reusable charts, so you can generate any number of charts without duplicating code and following the D3 style. Assuming that you have a reusable chart barchart, you will need to configure it, create container elements for your charts, and invoke your chart:

// Create and configure the barchars
var chart = barchart()
    .width(100)
    .height(100);

// Create the SVG element and set its size...

// Create a group for each element in the data array
var gcharts = svg.selectAll('g.chart').data(data)
   .enter().append('g')
   .attr('class', 'chart');


// Translate the groups using the row and column
gcharts.attr('transform', function(d) {
    return 'translate(' + 100 * d.row + ',' + d.col + ')';
});

// Create the charts, using the data bound to each selection.
gcharts.call(barchart);

Regards,

Upvotes: 1

Related Questions