An html file doesn't run from within my templates folder

Question

I have a FLask app with some html files on my templates/ folder. I wanted to add a nice D3 visualization to my index.html, so first I tried to copy/paste this bubbles example into a file called bubbles.html on my templates/ folder: http://bl.ocks.org/mbostock/4063269

I tried to open bubbles.html with Firefox, but got just white space, where the bubbles should be. And here is the strange thing. When I took bubbles.html out of the templates/ folder and opened it from a different directory, the page loaded correctly.

What is the problem? How can I incorporate this plot into my app?

Answer 1

Make sure that your files are being served properly by an http server. The main question here is whether or not you're pasting the json directly into the index.html that you're creating or if you're using a separate json file.

d3.json makes an ajax call to load the json file. In order to make this json request you must have an http server serving the directory that contains the separate json file. This could very well be why when you change directories (perhaps to a directory that is being served by some server) the expected chart appears. If instead you replace the d3.json call with a reference to the json in an inline manner, you do not need a server. Instead you should be able to view the example statically from your file system with your browser no matter the directory it is in.

The reason for needing a server is due to the same origin policy that is described in w3c standards. You can find out a simple solution in this s.o. post: D3 Bar Graph example not working locally. It offers two solutions, to either spawn a http server for the directories that the files are being served or to modify the same origin policies in your browser. I recommend the server approach due to safety standards.