Loading the data

The first thing we do is load the data. In the previous section, we already showed what the data looks like, and how we sanitized it. The only change we make here is that we change the labels indicating how long a firm has been in business. We do this because the default labels are a bit long and shorter labels look better in the final visualization:

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; 
    }, 
    function (data) { 
        loadedData = data; 
        updateCircle(); 
    });

As you can see we use the standard d3.csv to load the data and change the row.yearsInBusinessLabel field of each row. Once the data is loaded, we call the updateCircle() function. We'll show you what happens in that function later in this chapter. We'll first look at the dropdown you can use to select a specific group to show.