Importing local files for d3 in Angular2 projects generated using the cli

Question

I'm trying to load a local csv file (or json file) in an angular2 project. I've tried a few variations per other SO questions (e.g., this) or github issues, including:

1.) Setting up a local server using python -m SimpleHTTPServer (which serves to port 8000), and executing:

d3.csv("http://127.0.0.1:8000/master_grades_lecture.csv", function(error, data){
      console.log(data[0]);
    });

When I do this, I can't just navigate to localhost:8000 in my browser and see the webapp working on index.html, because I've been using the Angular cli to set up my project, and it seems that it can only render when I run ng serve (which runs on port 4200).

2.) When I try to load this using ng serve on port 4200, and I change the above code to,

d3.csv("master_grades_lecture.csv", function(error, data){
      console.log(data[0]);
    });

I get an Access-Control-Allow-Origin related error.

Finally, there are also some typing issues when I compile that don't seem to yield many helpful insights when I search for them:

ERROR in src/app/grade-display/grade-display.component.ts(20,41): error TS2345: Argument of type '(error: DSVRowString, data: number) => void' is not assignable to parameter of type '(rawRow: DSVRowString, index: number, columns: string[]) => DSVRowAny'. Type 'void' is not assignable to type 'DSVRowAny'.

These may or may not be separate issues. I'll be happy to provide a reproducible example if people feel like it's needed, but my hope is that somebody has had to deal with this issue before and knows exactly what's going on here. Forgive the newness to this topic.

UPDATE a reproducible example can be found here:

git clone https://github.com/Atticus29/whatismygrade.git
cd whatismygrade
git checkout SO
//create a test csv file in the app directory called master_grades_lecture.csv
rm package-lock.json
npm install
ng serve

Navigate to localhost:4200/test in browser

Are you willing to accept an alternative method (that is not accessible)? — Randy Casburn, Mar 05 '18 at 21:12
@RandyCasburn which part is not accessible? And possibly; it depends on how alternative... — Atticus29, Mar 05 '18 at 21:13
My silly autocorrect change 'that' to 'this' - I meant my alternative method is not accessible. Sorry for confusion — Randy Casburn, Mar 05 '18 at 21:15
@RandyCasburn I'm interested to know what an inaccessible alternative would mean... :-) — Atticus29, Mar 05 '18 at 21:16
Ah. Gotcha. For my ultimate use case, that won't be an option, unfortunately. — Atticus29, Mar 05 '18 at 21:29
ok - well it looks like a path problem when using the Angular in memory deployment. Is your assets folder being copied when you run ng serve? — Randy Casburn, Mar 05 '18 at 21:32
I use Angular's http to read the csv then hand it off to d3 - works ok. Am I missing something? Any reason why you cannot use angular to fetch the data? — Richard Matsen, Mar 06 '18 at 02:20

Richard Matsen · Accepted Answer · 2018-03-06T04:18:55.223

1

The first thing I notice is your @types/d3 is the wrong version.
You have

"dependencies": {
  ...
  "d3": "^4.13.0",
},
"devDependencies": {
  ...
  "@types/d3": "5.0.0",

so need to run npm install --save-dev @types/d3@4.13.0 which should take care of typescript errors.

I didn't try your python server, but after running ng serve this code will work

d3.csv('http://localhost:4200/assets/master_grades_lecture.csv', function(error, data){
  console.log('data', data);
});

edited Mar 06 '18 at 04:18

answered Mar 06 '18 at 04:10

Richard Matsen

20,671
3
43
77

That did it. Thank you! – Atticus29 Mar 06 '18 at 15:49
on version 5 of d3 you I used a different syntax. I used a promise. `.then` like so `d3.csv("https://some-data.csv").then((data)=>{ console.log(data) })` – Gel Jul 12 '19 at 01:10

Importing local files for d3 in Angular2 projects generated using the cli

1 Answers1