Group bar chart data not working as expected

Question

Have an array set of the type json object. Var data has an array object like:

0: Object
letter  : A
frequency : .08167
1: Object
letter  : B
frequency : .01492
2: Object
letter  : C
frequency : .02780
3: Object
letter  : A
frequency : .06167
4: Object
letter  : D
frequency : .02492
5: Object
letter  : C
frequency : .03780

The field letter has more than one set of data(for ex: letter A is having two sets of frequency or more). I need to create a group chart for the same.

var frequency= d3.keys(data[0]).filter(function (key) {
                return (key !== "letter");
            });
            data.forEach(function (d) {
                d.val = frequency.map(function (name) { return { name: name, value: +d[name] }; });
            });

This doesn't seem to work. Is there anything wrong in the structure of Json data?

Answer 1

From the question and comment, it seems like you have your data in a format like this:

data = [
{ "letter": "A", "frequency": .08167, "year": 2015}, 
{ "letter": "B", "frequency": .01492, "year": 2015},
{ "letter": "C", "frequency": .02780, "year": 2015}...

In which case, the best way to group by letter for your grouped bar chart would be to use d3.nest:

var nested_data = d3.nest()
    .key(function (d) {
        return d.letter;
    })
    .entries(data);

which will structure your data with multiple values under each letter key.

Here's a working fiddle with your data: http://jsfiddle.net/henbox/jc0nohhb/1/, that borrows a lot from this example: http://bl.ocks.org/mbostock/3887051

Note - This is a good resource to read more about nest in d3: http://bl.ocks.org/phoebebright/raw/3176159/