I’ve just downloaded D3.js from d3js.org (link to zip file), unzipped it, and referenced it in the following HTML page:
<html> <head> <title>D3 Sandbox</title> <style> </head> <body> <script src="/d3.v3.js"></script> </body> </html>
But when I load this page, my console (in Chrome) is giving me this error:
Uncaught SyntaxError: Unexpected token ILLEGAL: line 2
It doesn’t like the pi and e symbols at the start of the file. Errrr… what can I do about this? I am serving the file with python’s SimpleHTTPServer.
Update: yes I know I can just link to a CDN version, but I would prefer to serve the file locally.
Try specifying the UTF-8 charset on the HTML host document :
<meta http-equiv="content-type" content="text/html; charset=UTF8">
D3 contains UTF-8 symbols (like π) invalids in non-UTF8 documents.
That sounds like a problem with encoding. I recommend The Absolute Minimum Every Software Developer Absolutely, Positively Must Know About Unicode and Character Sets (No Excuses!). Despite the somewhat condescending title, it contains some very useful information. Specifically, it sounds like your server is serving the
d3.v3.js file with the wrong encoding.
<script src="/d3.v3.js" charset="utf-8"></script>
I tried setting the charset in the doc and in the script tag itself, but Chrome doesn’t seem to care. Not sure if i’m doing something wrong.
I did find success by running it through uglify with the –ascii-only option first.
UPDATE: Turns out my View->Encoding setting in Chrome was not on Auto-Detect, but some Western encoding. Not sure why, but changing that resolved the problem. Ridiculous that that setting would trump a charset property right on the script tag. Considering that users might be in the same situation and not be able to figure it out, i’ll still be using uglify to ensure success.
Check if you have a plus sign between all of your string concatenations, if you do not this error will be generated.