How to edit a visualization from the examples on d3.org website?

Question

I'm very new to data visualization but I have to edit an example visualization given on the d3 website and customize it little bit. In the example at: http://bl.ocks.org/mbostock/4339607

I've created both the index.html file and the csv file and directly run the index.html file in the browser(chrome). But nothing is being displayed. Please guide me what I'm doing wrong.

Answer 1

Are you looking for an example? Your file locations need to be in the correct folders, but try using this example as a guide.

http://codepen.io/Zig_Zag/pen/YPdQKL

You can see the only thing included is the D3.js library:

    <script src="http://d3js.org/d3.v3.min.js" type ="text/javascript"></script>
<div id="canvas"></div>

It should be the same thing you are trying to do. If you need more help, make your own codepen and post it as an example so we can debug it for you.

Answer 2

I assume that you are getting an error something along the lines of:

XMLHttpRequest cannot load file:///../flare.csv. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

The code is using d3.csv, which is making an AJAX request to load a resource. Chrome places restrictions on AJAX requests to your file system (URIs with the file:// protocol). You will need to be serving your code through a server in order to load the file.

If you have Python 3 installed, it includes a simple file server that you can use for this.

In the directory that includes your index.html, you would simply call :

python -m http.server

Then, in Chrome you would navigate to localhost:8000.