E.g of Using D3.entries

by Nivaldo

HTML

<div id="lists">
     <h4>Below should be divs for each key in data.</h4>
</div>

CSS

div {
    border: 1px solid gray;
}

JavaScript

var data = {
    Engagement: [{
        average_dif: 1.258225910078876,
        high_average: 3.18623784592371,
        medium_average: 1.928011935844834,
        sig: true,
        test: 56.80225601991332
    }, {
        average_dif: 1.258225910078876,
        high_average: 3.18623784592371,
        medium_average: 1.928011935844834,
        sig: true,
        test: 56.80225601991332
    }, {
        average_dif: 1.258225910078876,
        high_average: 3.18623784592371,
        medium_average: 1.928011935844834,
        sig: true,
        test: 56.80225601991332
    }],
    Performance: [{
        average_dif: 1.258225910078876,
        high_average: 3.18623784592371,
        medium_average: 1.928011935844834,
        sig: true,
        test: 56.80225601991332
    }, {
        average_dif: 1.258225910078876,
        high_average: 3.18623784592371,
        medium_average: 1.928011935844834,
        sig: true,
        test: 56.80225601991332
    }, {
        average_dif: 1.258225910078876,
        high_average: 3.18623784592371,
        medium_average: 1.928011935844834,
        sig: true,
        test: 56.80225601991332
    }]
};

var listContainers = d3.select('#lists').selectAll('div')
    .data(d3.entries(data))
  .enter().append('div')
    .attr('class', 'listContainer');

listContainers
  .append('h5')
    .text(function (d) {
        return d.key;
    });

var item = listContainers.selectAll('.item')
    .data(function (d) {return d.value;})
  .enter()
  .append('div')
    .attr('class', 'item')
    .text(function (d) {
        return 'average_dif = ' + d.average_dif + '; ' +
               'test = ' + d.test;
    });