Unable to understand why graph doesn't work offline

[Zac Rinehart]

Hey everyone,

I have been having a really fun time creating D3 graphs offline -- I have the whole D3 library on my computer.  I have successfully created about 5 graphs totally offline. There is one though that just doesn't work offline, and I don't know why. Take a look at the code here:

http://bl.ocks.org/d3byex/3286c45058c242d125a9

Is there something behind the scenes? As far as appearances go, it doesn't seem too terribly complicated. Could it be that data.map() doesn't work offline, or is it browser specific? I know it doesn't work well with IE. I'm actually using browser plus within Atom text editor. It worked great up until now.

Let me know if someone can render this graph offline, I'd like to know if there is some special trick or if it's just some user error on my part.

Thanks for reading,

Zac

[Tito]

what do you mean does not work offline?

You are referencing two external resources. so if you are offline it will not work. Am I understanding your question properly?

<script src="http://d3js.org/d3.v3.min.js"></script>
var url = "https://gist.githubusercontent.com/d3byex/e5ce6526ba2208014379/raw/8fefb14cc18f0440dc00248f23cbf6aec80dcc13/walking_dead_s5.json";

So

[Zac Rinehart]

Woops, let me clarify. I have all those external resources on my computer. I changed the paths to local paths:

<script src = C:\Users\Me\Visualizations\d3-3.5.16\D3.js> </script>

And for the json file, my code uses 2 ways to reference it, I have:

<link href = C:\Users\Me\Visualizations\wd_season5.json>

plus I changed the url = to:

url = "C:\Users\Me\Visualizations\wd_season5.json"

So when it calls data.map() it should be mapping the json file on my computer.

and again, I want to point out this method has worked for me 5 times or so in the past. But this one has really stumped me. I have tinkered with it for an entire day and it still doesn't load offline. 

I hope this clears things up.

[Tito]

http://embed.plnkr.co/zTG4UlsLH48VQUkUtPq9/

are you sure the name under  C:\Users\Me\Visualizations is wd_season5.json

are you sure the file under C:\Users\Me\Visualizations\d3-3.5.16 is D3.js

What does your index.html or whatever calls these files.html look like.

what does your console for dev show as far as errors?

[Zac Rinehart]

Wow you did it, thanks for trouble shooting this with me.

I renamed the json file, just to make it shorter. So I don't think that's the problem. And the D3 library does appear to be called D3.js, I'm hoping that because I successfully loaded very similar graphs offline 4 or 5 times in the past that I can have confidence I referenced D3 in the right way. 

File paths do trip me up, that's why I have been super methodical, trying to rule things out. 

The only difference with this graph is it doesn't have the data hard coded, it's stored in a json. My previous graphs weren't like that. Maybe it has something to do with parsing or something.

I just checked dev tools, and you seem to be right. It says it cannot read the file, so the path is wrong. For what it's worth, I spelled it right. What I'm not so sure of is if it wants the path to the file using normal spaces, like in Windows when I shift click and copy as path, or if it wants the space-free path, that uses a bunch of % signs.

[Tito]

sure no problem. do you have a web server when doing all of this or just serving from a file?

[Zac Rinehart]

It's just a file, I don't have a server going.

I tried the full path starting from C:\ 

using spaces and the other way using % signs. Neither worked. Does the url variable before the data.map() function need to be the full address? I noticed in your rendition, your url is simply the file name. How does that work? Do I have to put the file in the same directory/folder as the the html document itself for that to work? Or does it have to be in the same folder as the d3.js file? 

Also is my <link href = C:\Users\Me\Visualizations\wd_season5.json> tag doing anyting? It doesn't seem to be helping, maybe I should just delete it.

Thanks again

[b.j.k...@utwente.nl]

You have to server the son through a (localhost or real) web server, otherwise the js security prevents this file from being loaded through XHR. See https://github.com/d3/d3/wiki#using

Barend

--
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+un...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Zac Rinehart]

Oh ok interesting, I had no idea you needed a local server. Thanks for filling me in.

I have Python, version 2.7 I think. The tutorial said do something like:

python -m SimpleHTTPServer 8888 &

Do I run that from the command prompt? I'm kind of not sure how Python and D3 interface. My browser is Github Atom, is there someway I can run this Python server and still use Atom's Browser Plus as my browser?

[Tito]

think in terms of real world. if you had to serve this graph to the outside world you are not going to show the path of your files, that is not safe as you would be exposing yourself to major security issues. and this is not allowed in any browser that I know of.

I recommend you read up some more, it will be good training for you also. But here are some sample repos that use python/node etc.

https://github.com/yosiasz

[Curran]

Hi Zac,

The issue is that d3.json uses XMLHTTPRequest to fetch the data, which means it must use the "http://" protocol, not the "file://" protocol.

You're almost there by running

python -m SimpleHTTPServer 8888

The key thing here is that yes, you need to run that from the command prompt AND you need to first navigate into the directory where your files are. If, for example, your files are in "C:\Users\Me\Visualizations\walkingDead", you'll need to start the server with these two commands:

cd C:\Users\Me\Visualizations\walkingDead

python -m SimpleHTTPServer 8888

(I'm not sure if "cd" works in Windows, maybe it's "dir")

This will serve the files in that directory from "http://localhost:8888/".

Let's say you have the following files:

C:\Users\Me\Visualizations\walkingDead\index.html

C:\Users\Me\Visualizations\walkingDead\wd_season5.json

C:\Users\Me\Visualizations\walkingDead\3-3.5.16.js

These will be available in your Web browser at the following URLs while the server is running:

http://localhost:8888/index.html

http://localhost:8888/wd_season5.json

http://localhost:8888/3-3.5.16.js

Due to a convention of the Web, index.html will actually served when you access

http://localhost:8888/

I think the best solution would be to use relative URLs in your index.html. This would look like this:

<script src="d3.v3.min.js"></script>

...

var url="walking_dead_s5.json";

These will be interpreted as relative to "http://localhost:8888/".

Also, I made a video that explains some of these concepts: D3 101.02 - Fetching Data with AJAX (part of D3 101).

Hope this helps!

Best regards,

Curran

Datavis.tech

[Zac Rinehart]

Hey Curran,

Thanks for walking through this with me. I tried cd + file path and dir + file path from the command prompt, but both returned an error: couldn't find 'dir' or something like that.

A google search suggested something like, C:\Users\Me\Visualizations CD <new directory>

I guess I'll put http://localhost:8888 where it says new directory and see what happens, I'll have updates shortly.

[Curran]

Hi Zac,

I found this tutorial on Windows command line, maybe it could help http://www.digitalcitizen.life/command-prompt-how-use-basic-commands .

The "http://localhost:8888" is not a directory, it is a URL, so it doesn't go into the command on the command line. It goes into the address bar of the Web browser.

Good luck!

Regards,

Curran

[Zac Rinehart]

Hey all,

Just wanted to say another quick thanks for the tips.

I got it working. I'll share what I did in case other fairly new people are wondering how to use d3.json() or d3.csv() offline. 

I have Python, so as instructed, I used it to create a local host. Instead of trying shell commands through the windows command prompt, I just opened up Jupyter notebook and entered cd C:\Users\Me\Visualizations.

After I ran that in the Jupyter cell, my graph displayed in my browser.

So if you have Python, it's easy to interface between the two. I thought it was going to be complicated, but it was really simple.

Hope this helps others too!