CODEWITHSUNDEEP
javascriptcsvd3.js
robjez
robjez

Reputation: 3788

d3.max doesn't return highest value from csv file

I have a small csv file, containing this data: 

Organisational Unit,Service Division Label,Category Internal Name,Purpose,Detailed Expenditure Code,Date,Amount,Capital Or Revenue,Benificiary Name
Central & Corporate,Commercial Services Trading Services,Supplies and Services,Operational Materials,205,02/01/2015,35.20,R,A & A Electrical Distributors Ltd
Central & Corporate,Commercial Services Trading Services,Supplies and Services,Operational Materials,205,12/01/2015,72.67,R,A & A Electrical Distributors Ltd
Environment & Housing,Environmental Health,Capital,Construction,3,12/01/2015,72.00,C,A & P Crontractors Ltd
Childrens Services,Safeguarding Targeted & Specialist,Third Party Payments,Section 17,551,02/01/2015,550.00,R,A Ahmadi
Central & Corporate,Commercial Services Trading Services,Supplies and Services,Operational Materials,205,21/01/2015,26.35,R,A Andrews & Sons (Marbles & Tiles)
Central & Corporate,Commercial Services Trading Services,Supplies and Services,Operational Materials,205,21/01/2015,33.32,R,A Andrews & Sons (Marbles & Tiles)
Central & Corporate,Commercial Services Trading Services,Supplies and Services,Operational Materials,205,21/01/2015,51.84,R,A Andrews & Sons (Marbles & Tiles)
Central & Corporate,Commercial Services Trading Services,Supplies and Services,Stores - Central And Other Depots,5,21/01/2015,706.80,R,A Andrews & Sons (Marbles & Tiles)
City Development,Employment & Skills,Supplies and Services,Other Hired And Contracted Services,265,30/01/2015,248.19,R,REDACTED PERSONAL DATA
City Development,Employment & Skills,Supplies and Services,Other Hired And Contracted Services,265,09/01/2015,248.19,R,REDACTED PERSONAL DATA

And also JS code to draw a graph out of this data: 

svg = d3.select("body").append("svg").attr({
    width: window.innerWidth - 40,
    height: window.innerHeight
});

var padding = 10,
    radius = 4;

var parse = d3.time.format("%d/%m/%Y").parse;

d3.csv("./spending-small.csv", function(d) { d.Date = parse(d.Date); return d; }, function(data) {

    var max = d3.max(data, function(d) { return d.Amount; });
    console.log(max);

    var dateScale = d3.time.scale()
        .domain(d3.extent(data, function(d) { return d.Date; }))
        .range([50, window.innerWidth - 50]);

    var amountScale = d3.scale.linear()
        .domain([0, d3.max(data, function(d) { return d.Amount; })])
        .range([50, window.innerHeight - 50]);

    // Define date Axis
    var dateAxis = d3.svg.axis().scale(dateScale)
        //.tickSize(100 - window.innerHeight)
        .tickSize(1)
        .orient("bottom");

    // Draw date Axis
    svg.append("g")
        .attr({
            "class": "date-axis",
            "transform": "translate(" + [0, window.innerHeight -50] + ")"
        }).call(dateAxis);

    // Define amount Axis
    var amountAxis = d3.svg.axis().scale(amountScale)
        //.tickSize(100 - window.innerHeight)
        .tickSize(1)
        .orient("left");

    // Draw amount Axis
    svg.append("g")
        .attr({
            "class": "amount-axis",
            "transform": "translate(" + 50 + ",0)"
        }).call(amountAxis);

    svg.selectAll("circle")
        .data(data)
        .enter()
        .append("circle")
        .attr({
            cx: function(d) { return dateScale(d.Date); },
            cy: function(d) { return window.innerHeight - amountScale(d.Amount); },
            r: 3,
            fill: "#fff",
            stroke: "#78B446",
            "stroke-width": 2,
            "title": function (d) { return d.Amount; },
            "data-date": function (d) { return d.Date; }
        });

});

Highest value for "Amount" column in my csv file is 706.80, yet 

d3.max(data, function(d) { return d.Amount; })

function returns 72.67.

I've checked if data is perhaps corrupted or malformed, but can't see anything wrong with it. What can be a problem here?

Upvotes: 1

Views: 1384

Answers (1)

robjez
robjez

Reputation: 3788

It turned out that, amount data coming from csv file is an array of strings, rather than numbers, and javascript treats it as this, so for example: 

var arr = ["35.20", "72.67", "550.00", "248.19"];
console.log(d3.max(arr));

will return "72.67", but 

var arr = [35.20, 72.67, 550.00, 248.19];
console.log(d3.max(arr));

will return 550.00

Hint to that I found here on d3.max documentation.

So solution to that will be to parseFloat(d.Amount) before "maxing" it with d3, as here: 

svg = d3.select("body").append("svg").attr({
    width: window.innerWidth - 40,
    height: window.innerHeight
});

var padding = 10,
    radius = 4;

var parse = d3.time.format("%d/%m/%Y").parse;

d3.csv("./spending-small.csv", function(d) { d.Date = parse(d.Date); d.Amount = parseFloat(d.Amount); return d; }, function(data) {

    // var arr = [35.20, 72.67, 550.00, 248.19];
    // console.log(d3.max(arr));

    // var max = d3.max(data, function(d) { return d.Amount; });
    // console.log(max);

    var dateScale = d3.time.scale()
        .domain(d3.extent(data, function(d) { return d.Date; }))
        .range([50, window.innerWidth - 50]);

    var amountScale = d3.scale.linear()
        .domain([0, d3.max(data, function(d) { return d.Amount; })])
        .range([window.innerHeight - 50, 50]);

    // Define date Axis
    var dateAxis = d3.svg.axis().scale(dateScale)
        //.tickSize(100 - window.innerHeight)
        .tickSize(1)
        .orient("bottom");

    // Draw date Axis
    svg.append("g")
        .attr({
            "class": "date-axis",
            "transform": "translate(" + [0, window.innerHeight -50] + ")"
        }).call(dateAxis);

    // Define amount Axis
    var amountAxis = d3.svg.axis().scale(amountScale)
        //.tickSize(100 - window.innerHeight)
        .tickSize(1)
        .orient("left");

    // Draw amount Axis
    svg.append("g")
        .attr({
            "class": "amount-axis",
            "transform": "translate(" + 50 + ",0)"
        }).call(amountAxis);

    svg.selectAll("circle")
        .data(data)
        .enter()
        .append("circle")
        .attr({
            cx: function(d) { return dateScale(d.Date); },
            cy: function(d) { return amountScale(d.Amount); },
            r: 3,
            fill: "#fff",
            stroke: "#78B446",
            "stroke-width": 2,
            "title": function (d) { return d.Amount; },
            "data-date": function (d) { return d.Date; }
        });

});

Upvotes: 3

Related Questions