score:5

Accepted answer

First You would need to look how Django server works and to serve static file in Django link.

You can not just load static file as d3.csv("data.csv")

Then Follow these steps

1. Add Following in settings.py

STATIC_URL = '/static/'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static'),
]

2. Create static folder inside root project folder and add csv file inside static folder

3. The you need to serve static file and load

  • {% load static %} at top
  • {% static "data.csv" %}

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<h1>hello d3</h1>
<div>
</div>
<script>
    d3.csv('{%  static 'data.csv' %}', function (err, csv) {
        console.log(csv)
    });
</script>
</body>
</html>

If your file is not static and user uploaded media file just replace d3.csv code as below. And before this you need add MEDIA_URL and MEDIA_ROOT in settings as below

  • settings.py
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'

  • visualisation.html
<script>
d3.csv('{{ object.file.url}}', function (err, csv) {
        console.log(csv)
    });
</script>

Related Query