-1

I can't find the flaw in the following d3 code: 

//d3.tsv("dictionaries/dictionary-tsv.tsv", 
//      function(d) { return +d.frequency },
//      function(error, rows) { console.log(rows);},
//      function(d) { drawExample(data) }
//      );

var data = [1,2,12,4,7];
drawExample(data);

function drawExample(frequency) {

var x = d3.scale.linear()
    .domain([0, d3.max(frequency)])
    .range([0, 420]);

d3.select(".chart")
  .selectAll("div")
  .data(frequency)
  .enter().append("div")
  .style("width", function(d) { return x(d) + "px"; })
  .text(function(d) { return d; });
}

If you run as it is the bar chart is produced. If you comment var data and drawExample and uncomment the method to get external data from a tsv, it fails (althouth the firefox debugger shows that the data is loaded and no undefined var shows anywhere). Also the stackoverflow links:

"csv to array in d3.js" ,and "variable scope in d3 javascript"

does not seem to help. I am using d3.v3.min.js and my tsv file is the following:

word   frequency
and    1
be     2
art    12
break  4
cat    7

I am sure that it is my mistake so any help would be greatly appreciated !

Community
  • 1
  • 1
pebox11
  • 3,377
  • 5
  • 32
  • 57

1 Answers1

0

d3.tsv() doesn't return anything, it's an asynchronuous call (like when you make AJAX requests whith jQuery). So everything takes place in its callback.

Your call should look like something like that :

d3.tsv("dictionaries/dictionary-tsv.tsv", function(data){
    drawExample(data);
});

Not 100% sure (only dealt with json on the d3 connector - but it should be the same though)

topheman
  • 7,422
  • 4
  • 24
  • 33
  • But, I am calling in the callback drawExample(data), like you said, don't I? – pebox11 Sep 27 '14 at 20:54
  • No, you were assigning the result of d3.tsv to var data in `var data =d3.tsv` (your code just changed) and then you pass `d` in the callback function but use `data`. – topheman Sep 27 '14 at 21:05
  • Yes that part "var data =d3.tsv" was changed indeed, but when I changed it no one has answered yet. Any way, I am referring now to the specific question as posted. Sorry about that but I did what you suggest and it does not work. – pebox11 Sep 27 '14 at 21:10
  • add a console.log(data) inside the d3.tsv() call to see if you retrieve correctly some data (if there isn't some network problem) – topheman Sep 27 '14 at 21:19
  • Thanks, but again this is already done in the d3.tsv, and yes I get the log from the firefox debugger and there is no network problem (in fact file resides on my machine, localhost), but yes log is there and I can see the array [1,2,12,4,7] filled in my browser. – pebox11 Sep 27 '14 at 21:24
  • DOn't you have to pre-process the data comming from d3.tsv (extract the frequencies from your tsv to an array) ? like https://gist.github.com/mbostock/3305937#file-index-html-L41 – topheman Sep 27 '14 at 21:30
  • Hate to disappoint you again but even if I go with something like +d.frequency, which makes sure to give me integer values from text, still can't get the charts, as when I hardcode the data in the script. – pebox11 Sep 27 '14 at 21:36
  • Sorry, no more ideas without your real code ... If you could put this little part on a codepen, I will check it out (anyway could help other people to understand your problem better) – topheman Sep 27 '14 at 21:44
  • 1
    That's my code! that's all my script! the rest of the html is the div class and the call to the d3 library:
    . Thanks anyway ! Thank you my friend!     – pebox11 Sep 27 '14 at 21:46