CODEWITHSUNDEEP
javascriptcsvd3.js
woodbine
woodbine

Reputation: 662

Putting data into a table using d3.js after a .nest() call

I'm fairly certain that I'm making a basic error here, but I can't see where I'm going wrong. I'm gathering data from a csv and using .nest() to roll it up.

I can see from the console that .nest() is processing the data correctly, but it isn't working its way into the html. I'm just getting an empty table. The table is rendering with the correct number of rows and columns, which implies that the data is binding properly, its just not working its way into the html.

Can anyone see where I'm going wrong?

Here's my script:

<div class="pure-g-r box_main" id="r2b2">
             <script type="text/javascript"> 

                            d3.csv("/data/cic_data.csv", function (csv) {

                              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; });

                                // create a row for each object in the data
                                var rows = tbody.selectAll("tr")
                                    .data(data)
                                    .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>
                    </div>

And here's a simplified sample of the csv file that I'm processing:

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

Upvotes: 0

Views: 1517

Answers (1)

saikiran.vsk
saikiran.vsk

Reputation: 1796

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.

Upvotes: 1

Related Questions