The issue was d3 was not able to locate file data.tsv. The key note is data file location should be /static/data/data.tsv .


You're trying to get the data.tsv file by URL (probably something like http://localhost/data.tsv) but your code shows no route for this URL. So you got a 404.

If you want to have the data.tsv file served by your Flask application, and as this file seems static, you should put it in a static directory (not the templates directory) and then include it (many possibilities here, see below) in your template file (say index.html) where your d3 will do the job.

Depending on how works d3 (I don't know what it is), you may want one of the following:

  1. To load the file from an URL pointing to your static file in the index.html template
  2. To directly include the data in the template itself. To do so, the code under your route must do this job (read the TSV and give it to your template for processing). In that case the TSV file may not need to be available nor in templates folder, nor in static folder.


After reading the basic example of d3.js code, I managed to make it work:

  1. Make sure you configured your static file path somewhere in you app code

    app = Flask(name)

  2. Put you data.tsv file in the static file directory

  3. In your index.html template, modify the path to the TSV file in the javascript part accordingly to the path of your TSV file:

d3.tsv("/static/data/data.tsv", type, function(error, data) {
  if (error) throw error;

  var cities = data.columns.slice(1).map(function(id) {
    return {
      id: id,
      values: {
        return {date:, temperature: d[id]};

Thats All !

Related Query

More Query from same tag