D3js data format

Question

I'm new one in D3js and I need some help... My task is to draw a graph of the exchange rate

I have data like this in.txt file:

date,value
2020-12-31,38.43
2020-12-08,35.43
2020-12-04,35.839
2020-10-21,36.222
2020-08-04,38.834
2020-06-04,39.562
2020-04-04,37.832
2020-03-12,38.834
2020-02-08,36.723
2020-01-04,37.834

and my JS code is: (euroFileName = "euro.txt" - path to data file)

 let eMargin = {top: 10, right: 30, bottom: 30, left: 30}, eWidth = 800 - eMargin.left - eMargin.right, eHeight = 400 - eMargin.top - eMargin.bottom; let svg2 = d3.select("#euroChart").append("svg").attr("width", eWidth + eMargin.left + eMargin.right).attr("height", eHeight + eMargin.top + eMargin.bottom).append("g").attr("transform", "translate(" + eMargin.left + "," + eMargin.top + ")"); d3.csv(euroFileName, function(d){ return { date: d3.timeParse("%Y-%m-%d")(d.date), value: d.value } }, function(data) { //Only last year data let dateCurrent = Date.now() data = data.filter(function(d){return d.date >= dateCurrent - (365 * 24 * 3600 * 1000)}) // X Axis let now = new Date(); let x = d3.scaleTime().domain([now - (365 * 24 * 3600 * 1000), d3.max(data, function(d) { return d.date; })]).range([ 0, eWidth ]); svg2.append("g").attr("transform", "translate(0," + eHeight + ")").call(d3.axisBottom(x)); // Y Axis let y = d3.scaleLinear().domain([d3.min(data, function(d) { return +d.value; })-2, d3.max(data, function(d) { return +d.value; })]).range([ eHeight, 0 ]); svg2.append("g").call(d3.axisLeft(y)); svg2.append("path").datum(data).attr("fill", "none").attr("stroke", "steelblue").attr("stroke-width", 1.5).attr("d", d3.line().x(function(d) { return x(d.date) }).y(function(d) { return y(d.value) }) ) } )

And it was working just fine... BUT!!! Now I need to change my data to another locale data format. And now I got like this:

date;value
31.12.2020;31,13
21.05.2020;31,13
03.04.2020;31,13
05.11.2020;31,13
16.10.2020;31,13
29.05.2020;31,13
30.12.2020;31,13

I think you already got the point, but I'll announce: How can I make D3js recognize the data in a new format? I'm using https://d3js.org/d3.v4.js It seems to me that the point is in the lines:

 defaultLocale({ decimal: ".", thousands: ",", grouping: [3], currency: ["$", ""] });

But I'm not sure what can I do with it...

PS Don't worry about data sorting, it is done in another PHP script. I have full access to all data \ code (localhost)

I would really appreciate it if you could help me!

Answer 1

D3.csv won't work with data separated by semicolons ( ; ), you'll need to use a different method to get your data. Luckily, you can use any delimiter when parsing delimiter-separated values with d3.dsv. It's a bit more straightforward if you have d3v5 or v6.

If you've replaced your commas with semicolons as your delimiter, then instead of d3.csv, you can use the following:

D3 v5 and v6:

 d3.dsv(";", "file.dsv").then(function(data) {
     // ... do something with data
 })

To add a row function, we'd simply pass that as the third parameter to d3.dsv:

function row(d){
     return { date : d3.timeParse("%d.%m.%Y")(d.date), value : d.value }
}

d3.dsv(";", "file.dsv",row).then(function(data) {
     // ... do something with data
 })

In d3v3 and v4 and earlier you could use:

var dsv = d3.dsvFormat(";");

d3.request("test.dsv")
  .mimeType("text/plain")
  .response(function(data) { return dsv.parse(data.response) })
  .get(function(data) {
     // ... do something with data here
     console.log(data);
  });

Based on your suggested edit, and the code in your question, it appears that you have a row function. To use a row function with the v3/4 function above we'd use:

function row(d){
     return { date : d3.timeParse("%d.%m.%Y")(d.date), value : d.value }
}

let dsv = d3.dsvFormat(";");
d3.request(dollarFileName)
  .mimeType("text/plain")
  .response(function(data) { return dsv.parse(data.response, row) })
  .get(function(data) { .... 
      // use data.
  })
   

These will let you parse your data in, this has nothing to do with its representation, which is the locale information you're seeing. Locale information will not affect or alter how d3 parses delimiter separated values.