Create a local webserver

The same origin problem

In webfiles using Javascript, there is a same-origin policy as part of the web application security model. Under this policy, a web browser permits scripts contained in a first web page to access data in a second web page, but only if both web pages have the same origin.

In our D3 exercise, this can lead to problems when D3 is using asynchronous data loading functions, such as d3.csv() or d3.json(). D3 will request the data using a web request through http, and thus when you have loaded the file including this request directly from your disk (e.g. by double-clicking it), the browser considers the original file to have file:///your_dir/your_file.html as its origin, but the file that D3 requests is coming from http://your_dir/your_file.csv; These two are considered different origins, thus the file cannot be loaded...

The solution: using a webserver

So to do the latter part of the exercises, you need to serve the files through http, that is by a webserver. There are several ways to achieve this:

  1. Use (ftp or other) access to an existing server on the web, if you have that...

  2. During the run of the workshop we will also have a shared server you can use through ftp (but that will be taken off-air afterwards, and you have to share it with your fellow participants)...

  3. (install and) Use a local server on your laptop through the localhost loopback connection:
    • If you run Linux or Mac OSX you usually will have a local Apache webserver. Try pointing your browser to the address
      http://localhost
      and if that does not work you maybe have to start the server first by typing into the terminal:
      sudo apachectl start 
    • If you have Node installed, use its local server: https://github.com/d3/d3/wiki#local-development

    • I you already have Python on your system, you can use its local server:
      In the same directory where you have your HTML file, start the server using Python3:
      $ python -m http.server
      Serving HTTP on 0.0.0.0 port 8000 ...

      Or, for Python2:

      $ python -m SimpleHTTPServer
      Serving HTTP on 0.0.0.0 port 8000 ...

      In this message, Python tells you the IP address (0.0.0.0) and the port number (8000).

      So, if the file is named d3_template.html, you can get to this page via http://0.0.0.0:8000/d3_template.html

      On most machines you should also be able to use

      http://localhost:8000/d3_template.html