javascript - d3.max doesn't return highest value from csv file -
i have small csv file, containing 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 , services,operational materials,205,02/01/2015,35.20,r,a & electrical distributors ltd central & corporate,commercial services trading services,supplies , services,operational materials,205,12/01/2015,72.67,r,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 , services,operational materials,205,21/01/2015,26.35,r,a andrews & sons (marbles & tiles) central & corporate,commercial services trading services,supplies , services,operational materials,205,21/01/2015,33.32,r,a andrews & sons (marbles & tiles) central & corporate,commercial services trading services,supplies , services,operational materials,205,21/01/2015,51.84,r,a andrews & sons (marbles & tiles) central & corporate,commercial services trading services,supplies , services,stores - central , other depots,5,21/01/2015,706.80,r,a andrews & sons (marbles & tiles) city development,employment & skills,supplies , services,other hired , contracted services,265,30/01/2015,248.19,r,redacted personal data city development,employment & skills,supplies , services,other hired , contracted services,265,09/01/2015,248.19,r,redacted personal data and js code draw graph out of 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 "amount" column in csv file 706.80, yet
d3.max(data, function(d) { return d.amount; }) function returns 72.67.
i've checked if data perhaps corrupted or malformed, can't see wrong it. can problem here?
it turned out that, amount data coming csv file array of strings, rather numbers, , javascript treats this, example:
var arr = ["35.20", "72.67", "550.00", "248.19"]; console.log(d3.max(arr)); will return "72.67",
var arr = [35.20, 72.67, 550.00, 248.19]; console.log(d3.max(arr)); will return 550.00
hint found here on d3.max documentation.
so solution parsefloat(d.amount) before "maxing" d3, 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; } }); });
Comments
Post a Comment