D3.js v4 load with dsv and parseDate

The devil is in the details.

This is a quick post following the first article about migrating D3.js code from version 3 to 4 with ease.

This time I'm focussing on two very little common functions in visualisation projects.

Loading CSV with custom delimiter

With D3.js v3 this was the usual snippet to achieve this common task:

var dsv = d3.dsv(';')
dsv('datasets.csv', function(error, data){
    // do whatever you want with data
})

By using the d3.dsv object it was possible to specify the custom delimiter then you were able to use it as a function to actually load the csv file with proper parser.

With the version 4 we need to set up the things a little bit different.

The parser is a standalone object that we have to use explicitly with the raw csv content.
This means we need to rely to the more generic d3.text object to load the csv file without apply any default parser:

d3.text('datasets.csv', function(error, raw){
    var dsv = d3.dsvFormat(';')
    var data = dsv.parse(raw)
    // do whatever you want with data
})

Parse Date and Time

With D3.js version 3 this was the tipical code to set up a date/time parser. We've usually relied to the .parse method of the d3.timeFormat object:

var parseDate = d3.timeFormat("%d.%m.%Y %H:%M").parse;
data.forEach(function(d){
    d.date = parseDate(d.data)
})

With the version 4, the parser is a standalone object, therefore this is the little change you have to make in your code:

var parseDate = d3.timeParse("%d.%m.%Y %H:%M");
...

That's all for now.
Happy coding and see the next time.