D3 loading data

Question

I am working on learning D3. One of the examples I am working on has code which was written under an older version of D3. I know the loading of data works differently under 5.7.0, but I cannot get the data to load properly for this example. When just loading the data (1 function) I know how it works, however in this example with 2 functions I just cannot work out the solution.

Can anyone give me some advise on how to rework this to work under the latest version of d3? Here is the code:

function show() {

'use strict';

// load the data
var loadedData;

d3.csv('./data/businessFiltered.csv').then(
    function(row) {
        switch (row.yearsInBusiness) {
            case "001" : row.yearsInBusinessLabel = "All"; break;
            case "311" : row.yearsInBusinessLabel = "less then 2 years"; break;
            case "318" : row.yearsInBusinessLabel = "2 to 3 years "; break;
            case "319" : row.yearsInBusinessLabel = "4 to 5 years"; break;
            case "321" : row.yearsInBusinessLabel = "6 to 10 years"; break;
            case "322" : row.yearsInBusinessLabel = "11 to 15 years"; break;
            case "323" : row.yearsInBusinessLabel = "more then 16 years"; break;
        }

        return row;
    },
    function (data) {
        loadedData = data;
        updateCircle();
    }); ...

Answer 1

Looking at the documentation for d3.csv() , it appears you can specify a callback function with .get() :

function show() {

'use strict';

// load the data
var loadedData;

d3.csv('./data/businessFiltered.csv')
    .row(function(row) {
        switch (row.yearsInBusiness) {
            case "001" : row.yearsInBusinessLabel = "All"; break;
            case "311" : row.yearsInBusinessLabel = "less then 2 years"; break;
            case "318" : row.yearsInBusinessLabel = "2 to 3 years "; break;
            case "319" : row.yearsInBusinessLabel = "4 to 5 years"; break;
            case "321" : row.yearsInBusinessLabel = "6 to 10 years"; break;
            case "322" : row.yearsInBusinessLabel = "11 to 15 years"; break;
            case "323" : row.yearsInBusinessLabel = "more then 16 years"; break;
        }
        return row;
    })
    .get(function(error, data) {
        loadedData = data;
        updateCircle();
    });

Answer 2

After some more googling and trying I seem to have found something that works in the latest version of D3 (v5):

function show() {

'use strict';

// load the data
var loadedData;

d3.csv('./data/businessFiltered.csv', function(row) {
        switch (row.yearsInBusiness) {
            case "001" : row.yearsInBusinessLabel = "All"; break;
            case "311" : row.yearsInBusinessLabel = "less then 2 years"; break;
            case "318" : row.yearsInBusinessLabel = "2 to 3 years "; break;
            case "319" : row.yearsInBusinessLabel = "4 to 5 years"; break;
            case "321" : row.yearsInBusinessLabel = "6 to 10 years"; break;
            case "322" : row.yearsInBusinessLabel = "11 to 15 years"; break;
            case "323" : row.yearsInBusinessLabel = "more then 16 years"; break;
        };
        return row;
    })
    .then(function(data) {
        loadedData = data;
        updateCircle();
    });