0

I am loading data from a csv file to create D3 images.

I am using firefox so serving a local file should not be a problem.

I read the data in as follows:

dataset = d3.csv("movies.csv", function(data){
                  data.forEach(function(d){ 
                  d['imdbRating'] = +d['imdbRating'],
                  d['WinsNoms'] = +d['WinsNoms'],
                  d['Budget'] = +d['Budget'],
                  d['imdbVotes'] = +d['imdbVotes'],
                  d['IsGoodRating'] = +d['IsGoodRating']; });   
                  console.log(data);     
                });

The console shows that the data is being read. enter image description here

How do I access it? For example if I paste the data in Json format as shown below 

dataset = [
    {
    "Id": 13,
    "Title": "Alone in the Dark",
    "Year": 2005,
    "Runtime": 96,
    "Country": "Canada, Germany, USA",
    "imdbRating": 2.3,
    "imdbVotes": 37613,
    "Budget": 20000000,
    "Gross": 8178569,
    "WinsNoms": 9,
    "IsGoodRating": 0
  },
  {
    "Id": 38,
    "Title": "Boogeyman",
    "Year": 2005,
    "Runtime": 89,
    "Country": "USA, New Zealand, Germany",
    "imdbRating": 4.1,
    "imdbVotes": 25931,
    "Budget": 20000000,
    "Gross": 67192859,
    "WinsNoms": 0,
    "IsGoodRating": 0
  };]

I can easily access it with commands like.

d3.max(dataset, function(d) {return d.imdbRating;})

However, when I try the same d3.max() command on the dataset variable read in from the .csv file I get 'undefined'.

How would I do the same on my current data? Where am I going wrong?

Here is some sample data which is stored in a file named "movies.csv"

Id,Title,Year,Runtime,Country,imdbRating,imdbVotes,Budget,Gross,WinsNoms,IsGoodRating 13,Alone in the Dark,2005,96,"Canada, Germany, USA",2.3,37613,20000000,8178569,9,0 38,Boogeyman,2005,89,"USA, New Zealand, Germany",4.1,25931,20000000,67192859,0,0 52,Constantine,2005,121,"USA, Germany",6.9,236091,75000000,221594911,11,1 62,Diary of a Mad Black Woman,2005,116,USA,5.6,10462,5500000,50458356,26,0 83,Fever Pitch,2005,104,"USA, Germany",6.2,36198,40000000,50071069,9,1 86,Forty Shades of Blue,2005,108,USA,6,1135,1500000,172569,3,1 94,Guess Who,2005,105,USA,5.9,33846,35000000,102115888,16,1 103,Hide and Seek,2005,101,"USA, Germany",5.9,70185,25000000,123696741,6,0 105,Hitch,2005,118,USA,6.6,244830,55000000,366784257,28,1 108,House of Wax,2005,108,"Australia, USA",5.3,94338,35000000,70064800,15,0 153,Monster-in-Law,2005,101,"Germany, USA",5.5,43005,45000000,155931301,11,0 247,Wolf Creek,2005,99,Australia,6.3,55818,1100000,29005064,27,1 265,50 First Dates,2004,99,USA,6.8,264192,75000000,196324496,15,1 285,Against the Ropes,2004,111,"USA, Germany",5.3,5890,39000000,6429865,0,0 294,Alfie,2004,103,"UK, USA",6.2,43411,40000000,35195939,13,1 301,Along Came Polly,2004,90,USA,5.9,106798,42000000,173044410,9,0 315,Anacondas: The Hunt for the Blood Orchid,2004,97,USA,4.6,22226,25000000,70326393,1,0

DeeeeRoy
  • 467
  • 2
  • 5
  • 13
  • 2
    search here for async loading of files with javascript – rioV8 Oct 03 '18 at 14:59
  • @rioV8 So I found some comments about how to load the data as a text file and then parse it? Could you help me with the code that would do that? I tried several of the options listed but I must be doing something wrong. – DeeeeRoy Oct 03 '18 at 15:37
  • 1
    The issue isn't with the format of the data; you're having the problem because `d3.csv` runs asynchronously, and `dataset` won't contain anything until your file has loaded and been parsed (by the time you look at `dataset` in the console, the csv file has obviously loaded). There are two main strategies—either use Promises / `async`/`await` to ensure that the data has loaded before you draw your chart, or do your operations on the `data` variable instead of `dataset`. – i alarmed alien Oct 03 '18 at 21:28

0 Answers0