0

I am trying to literally just copy a template from D3 where the only difference is that I pulling the Java script and the json file whith data from my Mac. However, when I open the html at Chrome I cannot see the data. Stackoverflow is not accepting my html code, I don't know why.

pepperjohn
  • 67
  • 1
  • 3
  • 11
  • https://superuser.com/questions/646304/google-chrome-cant-access-localhost-domains -- basically you need to either have a local server or do the change suggested here – pmkro Apr 19 '18 at 21:50
  • Also, try using https://jsfiddle.net/ to put code into and post the link. – pmkro Apr 19 '18 at 21:53
  • Thanks @pmkro Link to the code: https://jsfiddle.net/h0fr8q7s/ – pepperjohn Apr 19 '18 at 22:13
  • Do you think it has to do with the fact that the d3 js is not in the same folder as my html file in my mac? – pepperjohn Apr 19 '18 at 22:14
  • As long as the html file has the correct *relative* link it shouldn't matter. I know people have problems with d3 when they dont use something like XAMPP, MAMP, etc – pmkro Apr 19 '18 at 22:16
  • how do I run a local server in mac? silly question, do I have to set up a server in mac and then run everytime I turn the computer on if I want to run a d3 graph in HTML? – pepperjohn Apr 19 '18 at 22:16
  • This is what I use: [MAMP](https://www.mamp.info/en/downloads/). The setup documentation is pretty good. Super easy to use. – pmkro Apr 19 '18 at 22:17
  • thanks mate, so now I downloaded Mamp and I clicked to start servers meaning that now I have apache and Mysql server green. Does that mean that everytime I open mac and I open MAMP and click to start servers I should be sorted? – pepperjohn Apr 19 '18 at 22:34
  • Yep, you may have to configure its default directory but basically yes. I'm going to post my response as an answer so ppl know its been solved. – pmkro Apr 19 '18 at 22:38
  • I still can't see the data – pepperjohn Apr 19 '18 at 22:40
  • @pepperjohn This has nothing to do with D3. Modern browsers do not allow loading local files. – Gerardo Furtado Apr 19 '18 at 23:02

1 Answers1

0

For Macs (or even PC) you can use MAMP to create a localhost to serve your sites to chrome, as its seems chrome doesn't like using your file system.

To set your project directory go to Preferences > Web Server and change the Document Root to whatever your current project directory is.

Some things to keep in mind: any paths to files from html or js need to be relative, from the html file location. So if your directory looks like this:

root
  js
    scripts.js
  index.html

your path from index.html to scripts.js would be ./js/scripts.js.

pmkro
  • 2,542
  • 2
  • 17
  • 25
  • This has been asked/answered many times. For a question like this, please just vote to close as a duplicate. We don't need yet another Q/A regarding this. – Gerardo Furtado Apr 19 '18 at 23:03
  • @GerardoFurtado Ah yes thanks, I didn't think of looking for duplicates. – pmkro Apr 19 '18 at 23:04
  • 1
    No worries. At least once a week someone asks this same issue again... – Gerardo Furtado Apr 19 '18 at 23:05
  • Thanks Gerardo and pmkro. I didn't phrase my question correctly since it was answered before already. So, I went to MAMP and changed the directory until the js folder. Now the html file and the js file are at least under the same root. However, I still can't see the data. I went to the devtools and I saw this error: "Cannot read property 'category20c' of undefined". In addition, the JSon file with the data is also stored locally, what should I do when writing the directory of the Json file in the html code? – pepperjohn Apr 19 '18 at 23:20
  • If its in the same directory as your html just `./file.json` – pmkro Apr 19 '18 at 23:29
  • Thanks pmkro. I still can't see the data. It looks like the html has problems according to the chrome dev tools. I used this template from d3 webiste: https://bl.ocks.org/mbostock/4063423 – pepperjohn Apr 19 '18 at 23:35
  • Hey @pmkro It is sorted now. The last error that I was doing is that by using MAMP I have all the codes coming from the same domain. But I can just double click on my html file. I had to copy the name next to the local host port from MAMP. Such as: http://localhost:8888/sunburst_template.html Now works fine. Thanks very much both for the patience and help! – pepperjohn Apr 20 '18 at 14:00