score:1

Accepted answer

var csv = [
  {"entity_name":"BEDFORD UNITARY AUTHORITY","level1":"Local Government","level2":"EAST OF ENGLAND","Year":"2014","Month":"09","Spend":3535},
{"entity_name":"DEPARTMENT FOR WORK AND PENSIONS (DWP)","level1":"Central Government","level2":"DEPARTMENT FOR WORK AND PENSIONS (DWP)","Year":"2014","Month":"09","Spend":123032},
{"entity_name":"HALTON BOROUGH COUNCIL","level1":"Local Government","level2":"NORTH WEST","Year":"2014","Month":"09","Spend":1332945},
{"entity_name":"HARINGEY LONDON BOROUGH COUNCIL","level1":"Local Government","level2":"LONDON","Year":"2014","Month":"09","Spend":21371},
{"entity_name":"HOUNSLOW LONDON BOROUGH COUNCIL","level1":"Local Government","level2":"LONDON","Year":"2014","Month":"09","Spend":4680},
{"entity_name":"OLDHAM METROPOLITAN BOROUGH COUNCIL","level1":"Local Government","level2":"NORTH WEST","Year":"2014","Month":"09","Spend":46459},
{"entity_name":"BARNET LONDON BOROUGH COUNCIL","level1":"Local Government","level2":"LONDON","Year":"2014","Month":"08","Spend":5727},
{"entity_name":"BEDFORD UNITARY AUTHORITY","level1":"Local Government","level2":"EAST OF ENGLAND","Year":"2014","Month":"08","Spend":7071},
{"entity_name":"BRISTOL CITY COUNCIL","level1":"Local Government","level2":"SOUTH WEST","Year":"2014","Month":"08","Spend":2000},
{"entity_name":"BRISTOL CITY COUNCIL","level1":"Local Government","level2":"SOUTH WEST","Year":"2014","Month":"08","Spend":6657},
{"entity_name":"BRISTOL CITY COUNCIL","level1":"Local Government","level2":"SOUTH WEST","Year":"2014","Month":"08","Spend":121072},
{"entity_name":"BRISTOL CITY COUNCIL","level1":"Local Government","level2":"SOUTH WEST","Year":"2014","Month":"08","Spend":10000},
{"entity_name":"BRISTOL CITY COUNCIL","level1":"Local Government","level2":"SOUTH WEST","Year":"2014","Month":"08","Spend":538118}
];

var data = d3.nest()
		  .key(function(d) { return d.level2})
		  .key(function(d) { return d.Year})
		  .rollup(function(d) { 
		   return d3.sum(d, function(g) {return g.Spend; });
		  }).entries(csv);


	  var columns = ["region","Year","Spend"]

	  var table = d3.select("#r2b2").append("table").attr("class","pure-table pure-table-striped"),
			thead = table.append("thead"),
			tbody = table.append("tbody");

		// append the header row
		thead.append("tr")
			.selectAll("th")
			.data(columns)
			.enter()
			.append("th")
				.text(function(column) {
				return column; 
				});

		var tds =[];
		data.forEach(function(d){
			var innerTd = {};
			innerTd['region'] = d.key;
			if(d.values.length>0){
				d.values.forEach(function(c){
					innerTd['Year']=c.key;
					innerTd['Spend'] = c.values;
					tds.push(innerTd);
				});
			}
		});
		// create a row for each object in the data
		var rows = tbody.selectAll("tr")
			//.data(data)
			.data(tds)
			.enter()
			.append("tr");

		// create a cell in each row for each column
		var cells = rows.selectAll("td")
			.data(function(row) {
				return columns.map(function(column) {
					return {column: column, value: row[column]};
				});
			})
			.enter()
			.append("td")
				.text(function(d) {
				return d.value; 
				});
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div class="pure-g-r box_main" id="r2b2"></div>

I've done changes

data.forEach(function(d){
            var innerTd = {};
            innerTd['region'] = d.key;
            if(d.values.length>0){
                d.values.forEach(function(c){
                    innerTd['Year']=c.key;
                    innerTd['Spend'] = c.values;
                    tds.push(innerTd);
                });
            }
        });

and for 'td' values try to understand what nest function is giving (i.e. data) and convert it to our requirement... If you are not getting ask me for more.

2nd Edition Read From here Actually I didn't have enough time to explain all the things, Okay, now I can. We have done mistakes in two of the areas,those are

var data = d3.nest()
 .key(function(d) { return d.level2})
.key(function(d) { return d.year})
.rollup(function(d) { 
     return d3.sum(d, function(g) {return g.spend; });
}).entries(csv);

In above code key closure we are returning d.year but it should be d.Year and in rollup returning g.spend but it should be g.Spend, So if we return d.year and g.spend those are undefined, change those,

Second one is

var columns = ["region","year","spend"]

In the above array also change "year" to "Year" and "spend" to "Spend".

I've done changes

var tds =[];
        data.forEach(function(d){
            var innerTd = {};
            innerTd['region'] = d.key;
            if(d.values.length>0){
                d.values.forEach(function(c){
                    innerTd['Year']=c.key;
                    innerTd['Spend'] = c.values;
                    tds.push(innerTd);
                });
            }
        });

created tds variable to fulfill our needs, and

// create a row for each object in the data
        var rows = tbody.selectAll("tr")
            //.data(data)
            .data(tds)
            .enter()
            .append("tr");

passing it to rows

Hope this will solve your problem. If not ask for more.


Related Query