Friday, February 23, 2024
 Popular · Latest · Hot · Upcoming
27
rated 0 times [  28] [ 1]  / answers: 1 / hits: 5246  / 8 Years ago, mon, august 22, 2016, 12:00:00

I'm tring to create a multi-line chart using D3.js. Here is my sample csv data:



A,B,C,D,E,F,G,date
53831,72169.87,54219,72555,63466,115312,126390,4/26/16
53031,70901.11,5976,5111,62388,111626,123198,7/10/16
51834,69917.12,5449,4902,62990,114296,124833,4/24/16
54637,73016.92,58535,77379,63090,113216,125261,6/14/16
54801,73072.4,57997,75674,63090,113216,125261,6/27/16
53578,71718.19,51085,69152,63370,115061,125949,5/3/16
51679,68897.14,6021,5421,61514,110330,121972,7/24/16


Here is my code snippet. However I keep seeing the error like d is not an expected number(as title shows). Can anyone please point me out?



Also I feel like the way I'm parsing data is ugly (two for loop). Any suggestions are welcome.



// Set the dimensions of the canvas / graph
var margin = {
top: 30,
right: 20,
bottom: 30,
left: 50
},
width = 800 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;

// Parse the date / time
var parseDate = d3.time.format(%b %Y).parse;

// Set the ranges
var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);

// Define the axes
var xAxis = d3.svg.axis().scale(x)
.orient(bottom);

var yAxis = d3.svg.axis().scale(y)
.orient(left);

var line = d3.svg.line()
.interpolate(basis)
.x(function (d) {
return x(d.date);
})
.y(function (d) {
return y(d.value);
});

// Adds the svg canvas
var svg = d3.select(#d3-line-chart)
.append(svg)
.attr(width, width + margin.left + margin.right)
.attr(height, height + margin.top + margin.bottom)
.append(g)
.attr(transform,
translate( + margin.left + , + margin.top + ));

//get the data
d3.csv(test.csv, function (error, data) {
var res = [];
var cols = d3.keys(data[0])
.filter(function (key) {
return key;
});

for (var j = 0; j < cols.length - 1; j++) {
var col = cols[j];
var row = [];
for (var i = 0; i < data.length; i++) {
row.push({
symbol: col,
date: data[i][date],
value: +data[i][col]
});
}
res.push(row);
}

// Scale the range of the data
x.domain(d3.extent(res, function (d) {
return d.date;
}));
y.domain([0, d3.max(res, function (d) {
return d.value;
})]);


svg.selectAll(.line)
.data(res)
.enter().append(path)
.attr(class, line)
.attr(d, line);

// Add the X Axis
svg.append(g)
.attr(class, x axis)
.attr(transform, translate(0, + height + ))
.call(xAxis);

// Add the Y Axis
svg.append(g)
.attr(class, y axis)
.call(yAxis);

});

More From » d3.js

 Answers
1

Firstly, provide sorted data in the CSV on the basis of date so:



Instead of this:



A,B,C,D,E,F,G,date
53831,72169.87,54219,72555,63466,115312,126390,4/26/16
53031,70901.11,5976,5111,62388,111626,123198,7/10/16
51834,69917.12,5449,4902,62990,114296,124833,4/24/16
54637,73016.92,58535,77379,63090,113216,125261,6/14/16
54801,73072.4,57997,75674,63090,113216,125261,6/27/16
53578,71718.19,51085,69152,63370,115061,125949,5/3/16
51679,68897.14,6021,5421,61514,110330,121972,7/24/16


Provide sorted CSV:



A,B,C,D,E,F,G,date
51834,69917.12,5449,4902,62990,114296,124833,4/24/16
53831,72169.87,54219,72555,63466,115312,126390,4/26/16
53578,71718.19,51085,69152,63370,115061,125949,5/3/16
54637,73016.92,58535,77379,63090,113216,125261,6/14/16
54801,73072.4,57997,75674,63090,113216,125261,6/27/16
53031,70901.11,5976,5111,62388,111626,123198,7/10/16
51679,68897.14,6021,5421,61514,110330,121972,7/24/16


Secondly:



The date parser you providing is incorrect:



var parseDate = d3.time.format(%b %Y).parse;


Should have been this:



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


Because your date is in the format ,4/26/16.



Thirdly,



The way you are calculating the x and y domain extent is wrong:



So instead of this:



  // Scale the range of the data
x.domain(d3.extent(res, function (d) {
return d.date;
}));
y.domain([0, d3.max(res, function (d) {
return d.value;
})]);


It should have been:



  x.domain(d3.extent(data, function (d) {
return parseDate(d.date);
}));
y.domain([0, d3.max(res, function (d) {
return d3.max(d, function(d2){console.log(d2);return d2.value;});
})]);


Reason: the res array you creating is an array inside an array so need that handling in here.



Working code here


[#26488] Saturday, August 20, 2016, 8 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
denism

Total Points: 627
Total Questions: 96
Total Answers: 98

Location: Ivory Coast
Member since Sun, Mar 7, 2021
3 Years ago
;