Returning js dataset from a D3 function

Question

I've been given the following working code:

var datasetBarChart = [{
    group: "X",
    category: "Oranges",
    measure: 100
}, {
    group: "Y",
    category: "Apples",
    measure: 200
}];

// set initial group value
var group = "X";

function datasetBarChosen(group) {
    var ds = [];
    for (x in datasetBarChart) {
        if (datasetBarChart[x].group == group) {
            ds.push(datasetBarChart[x]);
        }
    }
    return ds;
}

Rather than hard-coding the data in datasetBarChart I've moved the data to a csv that looks like this:

group,category, measure
X,    Oranges,  100
Y,    Applies,  200

Now I'm trying to amend the function - it still needs to return ds; - the following is one of my attempts that does not work:

function datasetBarChosen(group) {
    var ds = [];

    d3.csv("http://ourServer/testingtesting/DThree/datasetBarChart.csv", function(rows) {
            for (x in rows) {
                if (rows[x].group == group) {
                    ds.push(rows[x]);
                }
            }
        }

    return ds;
}

Here is another failed attempt!!

function datasetBarChosen(group) {
    var ds = [];

    d3.csv("http://ourServer/testingtesting/DThree/datasetBarChart.csv", function(rows) {

        ds = rows.map(function(d) {
                //each d is one line of the csv file represented as a json object                
                if (d.group == group) {
                    return {
                        "group": d.group,
                        "category": d.category,
                        "measure": +d.measure
                    }
                };
            })

    }

    return ds;
}

....is either of the following close?

Check [this answer](http://stackoverflow.com/a/17116990/427146) . It is not possible to return value from an asynchronous call inside a function. You can search for *why* — sabithpocker, Oct 06 '16 at 10:07

sabithpocker · Accepted Answer · 2016-10-06T12:44:32.873

2

function datasetBarChosen(group, process) {//this can be refactored more
  var ds = [];
  d3.csv("https://raw.githubusercontent.com/openmundi/world.csv/master/countries(204)_olympics.csv")
    .row(d => d["Code"] === group ? d : false)//get only items with code===group
    .get(process);

}

function doThisWithResult(error, rows) {
  console.log(rows);
  //write all your logic to do with returned data here;
  //or call other functions from here passing data
}

datasetBarChosen("ZIM", doThisWithResult);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

Converted to es5 using Babel

"use strict";

function datasetBarChosen(group, callbackFunction) {
  //this can be refactored more
  var ds = [];
  d3.csv("https://raw.githubusercontent.com/openmundi/world.csv/master/countries(204)_olympics.csv").row(function (d) {
    return d["Code"] === group ? d : false;
  }) //get only items with code===group
  .get(callbackFunction);
}

function doThisWithResult(error, rows) {
  console.log(rows);
}

datasetBarChosen("ZIM", doThisWithResult);
//dataBarChosen takes a filter string to filter result
//and a function to be called with resulting rows

edited Oct 06 '16 at 12:44

answered Oct 06 '16 at 10:36

sabithpocker

15,274
1
42
75

I realise this is concise but could it be expanded to more verbose `(d => d["Code"] === group ? d : false)` ...I'm very green to js ! – whytheq Oct 06 '16 at 10:59
@whytheq I have added es5 code and a link to see the conversion by yourself. – sabithpocker Oct 06 '16 at 11:33
I've ended up scrapping the idea of returning a value, based on your initial comment to the question. Although now I'm struggling to just nest every inside d3.csv! What is "process" in your code - is that some sort of global variable? – whytheq Oct 06 '16 at 12:27
No, `process` is a formal parameter, when we pass `doThisWithResult` function as actual parameter, `process` becomes `doThisWithResult`. Also note that this will be pass by reference as it is a function. Let me explain that in comments. – sabithpocker Oct 06 '16 at 12:40
how would the code look if you want to do it all as 1 function with all the logic inside `d3.csv(` ? Does everything need to go inside `.get(....)`? – whytheq Oct 06 '16 at 13:22
Yes everything goes inside `get`. If you can post your code, I can comment. – sabithpocker Oct 06 '16 at 14:30

Returning js dataset from a D3 function

1 Answers1