how to load 2 columns of csv as array d3

Question

d3.csv("Sales Export Friendly 2-14-2017.csv", function(data) {
 var sales = data.map(function(d) { return [ +d["BookingID"], +d["Total Paid"] ]; });
});

var x = d3.scaleBand()
    .domain(sales.map(function(sale){ return sale.bookingID; }))
    .range([0, width])
    .paddingInner([0.1])

var y = d3.scaleLinear()
  .range([height, 0])
  .domain([0, d3.max(sales.map(function(sale){ return sale['Total Paid']; }))]);

I want sales as an array that will work to help me get my vars x and y. I'm getting a referenceError... It's something to do with how I'm loading this in I just can't figure it out though.

score 2 · Accepted Answer · answered Feb 17 '17 at 05:55

D3.csv is asynchronous. So your csv file has not loaded (and thus sales is not defined and has no properties) by the time you are using your sales variable in your scales.

The easiest solution to this is to place anything requiring the csv data in the callback function itself:

  d3.csv("Sales Export Friendly 2-14-2017.csv", function(data) {
     var sales = data.map(function(d) { return [ +d["BookingID"], +d["Total Paid"] ]; });

     var x = d3.scaleBand()
        .domain(sales.map(function(sale){ return sale.bookingID; }))
        .range([0, width])
        .paddingInner([0.1])

     var y = d3.scaleLinear()
        .range([height, 0])
        .domain([0, d3.max(sales.map(function(sale){ return sale['Total Paid']; }))]);

});

The entire csv will be loaded, even if you are using only two columns (for each of with d3.csv/tsv/json). As such the sales variable is somewhat unnecessary outside of convenience.

how to load 2 columns of csv as array d3

1 Answers1