I need to serve your page using the same server that is serving the data; localhost:3000 not working

32 views
Skip to first unread message

Jerry Wiltz

unread,
Aug 8, 2017, 7:47:58 PM8/8/17
to d3-js
I am working through a D3 example where I have to read a data.csv file with it.

I have downloaded and set up Node.js, next I have created a server with this code, and it works great.
var http = require('http');
var fs = require('fs');

var server = http.createServer(function(request, response){
response.writeHead(200, {
'Content-Type' : 'text-html'
});
fs.readFile('data.csv', 'utf8', function (err, text ){
response.end(text);
});
});

server.listen(3000, function () {
console.log('Server is listening at http://localhost:3000');
});

But .. this does not work. d3.csv does not like it, or there is some browser issue, or something else.
<script>
d3.csv("http://localhost:3000", function (myArrayOfObjects){
myArrayOfObjects.forEach(function (d){
console.log(d.x + ", " + d.y);
});
    });
</script>

For this situation, this what I get from the Chrome Console:
XMLHttpRequest cannot load http://localhost:3000/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

Japhy Bartlett

unread,
Aug 9, 2017, 2:04:30 PM8/9/17
to d3...@googlegroups.com
Here's a SO post about this:


the quick version is, your server needs to set a 'Access-Control-Allow-Origin' header, probably something like:

```
response.writeHead(200, {
'Content-Type' : 'text-html',
'Access-Control-Allow-Origin': '*',
});
```




--
You received this message because you are subscribed to the Google Groups "d3-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Jerry Wiltz

unread,
Aug 9, 2017, 3:47:17 PM8/9/17
to d3...@googlegroups.com
Thanks Japhy,
I tried that. But it did not work. I think I have to install/enable CORS as well along with that.
Is this correct?

Jerry

--
You received this message because you are subscribed to a topic in the Google Groups "d3-js" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/d3-js/2WT5_HIaPH0/unsubscribe.
To unsubscribe from this group and all its topics, send an email to d3-js+unsubscribe@googlegroups.com.

Gordon Woodhull

unread,
Aug 9, 2017, 3:59:12 PM8/9/17
to d3...@googlegroups.com
CORS is the name of the mechanism, and this is the usual way to enable it.


I'd advise looking at the response headers for the ajax request in your browser's developer tools, and make sure that header was really added.
To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+un...@googlegroups.com.

Jerry Wiltz

unread,
Aug 9, 2017, 11:07:33 PM8/9/17
to d3-js
I was able to make this work by:

The first thing was getting the right MIME for the request, it is supposed to be 'text/csv' and the link for that is:
https://github.com/d3/d3-3.x-api-reference/blob/master/CSV.md


Thank You
Jerry

Jerry Wiltz

unread,
Aug 9, 2017, 11:09:10 PM8/9/17
to d3...@googlegroups.com
Thank you Gordon, that helped me.
Jerry
Reply all
Reply to author
Forward
0 new messages