CODEWITHSUNDEEP
csvd3.jsnested
user2399453
user2399453

Reputation: 3081

Using d3.nest() to slice csv data

I have a csv file like this for which I want to draw plots (always date on x axis) and cust is customer (team1,team2, team3), prod is product (A,B,C,D) and units is units sold for each product on a given day:

date,cust,prod,units
2012-04-01,team1,A,34
2012-04-02,team1,B,45
2012-04-03,team2,C,67
2012-04-04,team1,A,78
2012-04-05,team3,D,89
2012-04-06,team2,C,99
2012-04-07,team2,A,101
2012-04-08,team3,A,122
2012-04-09,team1,D,134
2012-04-10,team1,D,160
2012-04-11,team2,D,180

I want to plot line graphs for different combinations. So basically I want to be able to plot just on product (units of either A, B, C or D sold for a given customer) or (units sold by a particular customer regardless of product type or units sold of a particular type) or (just units of a particular product A, B, C or D sold irrespective of customer) . Here is the snippet I want to get right in a general way. Down below it allows me to filter out just the data for cust 'team1' and prod 'A'. How can I generalize this?

 d3.csv("test.csv", function (error, tdata) {
        if (error) throw error;
        var _data = d3.nest()
                .key(function(d) {return d.cust; })
                .key(function(d) {return d.prod;})
                .entries(tdata);
        data = _data[0].values[0].values; // This gives me the filtered values I need for

Upvotes: 0

Views: 886

Answers (1)

Gerardo Furtado
Gerardo Furtado

Reputation: 102194

You probably don't need nest() here, but just a simple filter for each situation.

For instance, to show only the data regarding the product D:

var dataProductD = data.filter(e=>e.prod==="D");


var data = [{
    "date": "2012-04-01",
    "cust": "team1",
    "prod": "A",
    "units": "34"
}, {
    "date": "2012-04-02",
    "cust": "team1",
    "prod": "B",
    "units": "45"
}, {
    "date": "2012-04-03",
    "cust": "team2",
    "prod": "C",
    "units": "67"
}, {
    "date": "2012-04-04",
    "cust": "team1",
    "prod": "A",
    "units": "78"
}, {
    "date": "2012-04-05",
    "cust": "team3",
    "prod": "D",
    "units": "89"
}, {
    "date": "2012-04-06",
    "cust": "team2",
    "prod": "C",
    "units": "99"
}, {
    "date": "2012-04-07",
    "cust": "team2",
    "prod": "A",
    "units": "101"
}, {
    "date": "2012-04-08",
    "cust": "team3",
    "prod": "A",
    "units": "122"
}, {
    "date": "2012-04-09",
    "cust": "team1",
    "prod": "D",
    "units": "134"
}, {
    "date": "2012-04-10",
    "cust": "team1",
    "prod": "D",
    "units": "160"
}, {
    "date": "2012-04-11",
    "cust": "team2",
    "prod": "D",
    "units": "180"
}];

var dataProductD = data.filter(e=>e.prod==="D");
console.log(dataProductD);
<script src="https://d3js.org/d3.v4.min.js"></script>

Or to show the data regarding the products D sold for the costumer Team2:

var dataProductDTeam2 = data.filter(e=>e.prod==="D" && e.cust==="team2");


var data = [{
    "date": "2012-04-01",
    "cust": "team1",
    "prod": "A",
    "units": "34"
}, {
    "date": "2012-04-02",
    "cust": "team1",
    "prod": "B",
    "units": "45"
}, {
    "date": "2012-04-03",
    "cust": "team2",
    "prod": "C",
    "units": "67"
}, {
    "date": "2012-04-04",
    "cust": "team1",
    "prod": "A",
    "units": "78"
}, {
    "date": "2012-04-05",
    "cust": "team3",
    "prod": "D",
    "units": "89"
}, {
    "date": "2012-04-06",
    "cust": "team2",
    "prod": "C",
    "units": "99"
}, {
    "date": "2012-04-07",
    "cust": "team2",
    "prod": "A",
    "units": "101"
}, {
    "date": "2012-04-08",
    "cust": "team3",
    "prod": "A",
    "units": "122"
}, {
    "date": "2012-04-09",
    "cust": "team1",
    "prod": "D",
    "units": "134"
}, {
    "date": "2012-04-10",
    "cust": "team1",
    "prod": "D",
    "units": "160"
}, {
    "date": "2012-04-11",
    "cust": "team2",
    "prod": "D",
    "units": "180"
}];

var dataProductDTeam2 = data.filter(e=>e.prod==="D" && e.cust==="team2");
console.log(dataProductDTeam2);
<script src="https://d3js.org/d3.v4.min.js"></script>

Or to show the data regarding Team2:

var dataTeam2 = data.filter(e=>e.cust==="team2");


var data = [{
    "date": "2012-04-01",
    "cust": "team1",
    "prod": "A",
    "units": "34"
}, {
    "date": "2012-04-02",
    "cust": "team1",
    "prod": "B",
    "units": "45"
}, {
    "date": "2012-04-03",
    "cust": "team2",
    "prod": "C",
    "units": "67"
}, {
    "date": "2012-04-04",
    "cust": "team1",
    "prod": "A",
    "units": "78"
}, {
    "date": "2012-04-05",
    "cust": "team3",
    "prod": "D",
    "units": "89"
}, {
    "date": "2012-04-06",
    "cust": "team2",
    "prod": "C",
    "units": "99"
}, {
    "date": "2012-04-07",
    "cust": "team2",
    "prod": "A",
    "units": "101"
}, {
    "date": "2012-04-08",
    "cust": "team3",
    "prod": "A",
    "units": "122"
}, {
    "date": "2012-04-09",
    "cust": "team1",
    "prod": "D",
    "units": "134"
}, {
    "date": "2012-04-10",
    "cust": "team1",
    "prod": "D",
    "units": "160"
}, {
    "date": "2012-04-11",
    "cust": "team2",
    "prod": "D",
    "units": "180"
}];

var dataTeam2 = data.filter(e=>e.cust==="team2");
console.log(dataTeam2);
<script src="https://d3js.org/d3.v4.min.js"></script>

I'm using an array of objects as the data (which is exactly the outcome of d3.csv) because I cannot load an CSV using S.O. snippet.

Upvotes: 2

Related Questions