Карта D3.js не загружается

Я работаю над визуализацией d3 (внутри приложения flask), и мне трудно загрузить свою карту. У меня есть файл csv с различными столбцами данных, а также файл json с координатами широты и долготы. Я знаю, что мои пути к файлам верны, но когда я запускаю свое приложение, я нигде не вижу карту. Любая помощь будет принята с благодарностью.

Вот некоторые из моих тегов сценария вверху:

<script src = "https://d3js.org/d3.v3.min.js"></script>
<script src = "https://unpkg.com/d3-geo@1"></script> 
<script src = "https://unpkg.com/d3-geo-polygon@1"></script>
<script src = "https://unpkg.com/topojson@3"></script>
<script src = "https://unpkg.com/topojson-client@3"></script>

<div id = "chart"></div>

Вот мои элементы svg:

var width = 1000, height = 750;

var svg = d3.select("#chart").append("svg")
                        .attr("width", width)
                        .attr("height", height);

var modus = "Map", counter = 0;

var map = svg.append("g");

var cities = svg.append("g"); 

var projection = d3.geo.mercator()
                .scale(500)
                .translate([-500, 475]);

var path = d3.geo.path().projection(projection);

Вот мой CSV-файл:

var data = d3.csv("../static/data/serial_killers/info_v6.csv", 
function(data) {
    data.forEach(function(d) {
        d.DateOfBirth = +d.DateOfBirth;
        d.Latitude = +d.Latitude;
        d.Longitude = +d.Longitude;
        d.NumberOfVictims = +d.NumberOfVictims;
        d.DateOfMurderRevised = +d.DateOfMurderRevised;
        d.DateAtMurder = +d.DateAtMurder;
        //d_id = +d_id;

    });
    console.info(data[0]);
});

Вот мой файл json:

d3.json("../static/data/serial_killers/location.json", function(data) {
console.info("hello i am in the loading function")
    map.selectAll('.geo-path')
    .data(data)
    .enter()
    .append('path')
    .attr('class', 'geo-path')
    .attr('d', path)
    .attr("visibility", "visible")
    .style("stroke-opacity", 1)
    .style("fill-opacity", 0.5);
});


cities.selectAll(".cities")
        .data(data)
        .enter()
        .append("circle")
        .attr("class", "city")
        .attr("id", function(d) { return "id" + d._id;})
        .style("fill-opacity", 0)
        .style("fill", "#ff0000")
        .attr("r", 0)
        .attr("cx", function(d) { return projection([d.Longitude, 
        d.Latitude])[0];})
        .attr("cy", function(d) { return projection([d.Longitude, 
        d.Latitude])[1];});

Вот фрагмент моего файла json:

[
  {
    "Latitude": 15.64624,
    "Longitude": 32.46113,
    "": ""
  },
  {
    "Latitude": 37.67971,
    "Longitude": -121.9076,
    "": ""
  },
  {
    "Latitude": 40.51361,
    "Longitude": -74.25005999999998,
    "": ""
  }
]

Я не уверен, что я путаю свои переменные «данных» или происходит что-то еще. Любая помощь будет принята с благодарностью.