Search code examples
jqueryd3.jsgithubgithub-pagesgoogle-font-api

d3 chart and google font not visible on github page


I uploaded a page onto Github and the HTML, CSS and Jquery and Jquery UI run very well. However, the d3 chart does not run. (PS: the chart is hidden, and becomes visible once the card on the middle is clicked. The data on the d3 chart was entered manually, it was not linked to an external data file.)

You can see in on the original page when you click on the middle (black) card.

On the github page, if you click on the middle card, the collapsed css container appears, but no chart:(. On the Github page, in addition to the d3 issue, I see that the Google font I used (Lato) did not upload either.

I am new to Github there may be something obvious I am missing. I uploaded the whole thing as an html file (as opposed to separate folders for the css and the js scripts.


Solution

  • OOOOPS Found the clue and (incomplete) answer to my own question: it was my Chrome browser. I was trying to figure out what was happening and there was a thingie on my chrome browser that said " this page was trying to load an untrusted script". I clicked on it and said "yes", I'd like to load it and it loaded. The graph popped up. The font still does not load but that's ok. It's not a huge issue. (UPDATE: thanks to Stephen whose comment explained WHY this happened.)

    Also, I just created a folder on my repository with the d3 base code and linked to it (as opposed to having it linked externally as I did before) this fixed the issue, I can see the chart easily. I will go ahead and do the same to the Google font (uploading it onto the repository).

    Thanks in any case and please disregard this question:)

    UPDATE re: Google Font issue: About 2 hours after posting the question I had uploaded the font onto a folder; that did not work.

    Then I went back to the code and...well it was a simple mistake I am embarrassed to admit:( I did not close one style tag properly so the font didn't read. As soon as I'd fixed this, it worked perfectly. (I had hosted the same page on Tumblr before, so it's possible they have something going where these mistakes are picked up and corrected by their system automatically somehow).

    Everything is solved now:)