Can't load TSV when using D3.JS

Question

I need to visualise a TSV file with countries, dates and percentages in a slopegraph. Next to that I need to use a CSV file for another assignment, which frankly loads without any issues but I've been stick on this one for more then 1.5 day and I just can't figure it out.

I've made a basic code just to test whether I can display some of the text out of the TSV file. Also when inspecting the elements in the chrome browser I don't see the SVG container. I really would appreciate some help on this subject!!

    var container = d3.select("body").append("svg")
                .attr("width", 500)
                .attr("height", 500);

d3.tsv("18-year-olds-in-education.tsv", function(error, data) {
    data.forEach(function(d) {
        d.indic_ed,geo\time = d.indic_ed,geo\time;
        d.2001 = +d.2001
        d.2012 = +d.2012;
});


var text = container.selectAll("text")
                .data(data)
                .enter()
                .append("text");

var textLabels = text
     .attr("x", 200)
             .attr("y", 200)
             .text(function(d) { return d.2012)
             .attr("font-family", "sans-serif")
             .attr("font-size", "20px")
             .attr("fill", "red");

});

Uncaught SyntaxError: Unexpected token ILLEGAL on the line which includes this code: d.indic_ed,geo\time = d.indic_ed,geo\time;. When I delete the data.forEach function ( this was my old code before this question) and I run it in the browser I get this error: "Uncaught SyntaxError: Unexpected number" on the line which includes the code: .text(function(d) { return d.2012) — WirAre, Jun 11 '14 at 15:13
Ah, you would need to reference that field like this: `d["indic_ed,geo\time"]`. I would recommend renaming it to something more sane though. — Lars Kotthoff, Jun 11 '14 at 15:18
I changed ["indic_ed,geo\time"] to country. The line now includes d.country = d.country. Only now I'm getting this error on the next line: unexpected number. I changed 2012 to twelf and 2001 to one in the tsv file. Now it's gone. Thanks alot for your time! Just a question out of curiosity is why I cannot use the numbers and have to make them strings? — WirAre, Jun 11 '14 at 15:40
Oh yes, that's another thing :) It's simply not valid Javascript. You can use `d["2001"]` instead of `d.2001` though. — Lars Kotthoff, Jun 11 '14 at 15:43

score 0 · Answer 1 · answered Jun 11 '14 at 15:51

The problem are the field names you're using in the TSV. In particular, the following code isn't valid Javascript:

d.indic_ed,geo\time = d.indic_ed,geo\time;
d.2001 = +d.2001;
d.2012 = +d.2012;

You can use the alternative syntax for accessing fields though:

d['2001'] = +d['2001'];
d['2012'] = +d['2012'];

I'm omitting the first statement here because it has no effect.

Can't load TSV when using D3.JS

1 Answers1