Simple d3 bar chart from values from a file

 D3.js is a JavaScript library for manipulating documents based on data. - quoted from https://d3js.org

This post is on how to display a simple bar chart using HTML div elements and d3 JavaScript library. 

data.tsv is the data file we are going to use which has tab separated values (tsv) and header values. Similar to tsv, csv stands for comma separated values which acts similar to tsv files.

When running this however, in certain browsers, simply opening the html file is not sufficient since d3 makes AJAX requests for data. Therefore, the file must be loaded through a web server.

✔ Python users have a simple way to run a web server on the local machine by simply opening the terminal in the file's directory and executing the following command.

python -m SimpleHTTPServer

Once the server is started, simply open the html file using the server.

Eg: http://127.0.0.1:8000/barchartexample.html

This article presents more information on python's simple server.

✔ Or online editors such as Plunker too can be used.

This question on StackOverflow focuses on the file loading problem.

The following is a self explaining code gist relevant to the above displayed bar chart.