0

I'm working on a d3 visualization (inside of a flask application) and I'm struggling with getting my map to load. I have a csv file with various data columns as well as a json file with latitude and longitude coordinates. I know my filepaths are correct, yet when I run my app I dont see the map anywhere. Any help would be greatly appreciated.

Here are some of my script tags at the top:

<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>

Here are my svg elements:

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);

Here is my csv file:

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.log(data[0]);
});

Here is my json file:

d3.json("../static/data/serial_killers/location.json", function(data) {
console.log("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];});

Here is a slice of my json file:

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

I'm not sure if i'm mixing up my 'data' variables or something else is going on. Any help would be greatly appreciated.

William Stevens
  • 1
  • 1
  • 1
    look in the d3 doc for the version you use v3/v4/v5 what the syntax is of the csv loader function and what each callback does (row callback or file callback) – rioV8 Nov 21 '18 at 14:20
  • Your json must be valid geojson. And unless your circles have a stroke in the css they will be invisible: r=0, fill is transparent – Andrew Reid Nov 21 '18 at 15:25
  • @AndrewReid thank you. is there a way I can convert my json to geojson without having to doit manually? – William Stevens Nov 21 '18 at 15:48
  • 1
    There are at least two major issues here: 1) like @rioV8 mentioned you should check your version(s). You are using D3 v3 which comes as a bundle including `d3.geo`. You are then mixing in various modules (like d3-geo) which were designed to work with v5. You have to decide to either upgrade to v5 or get rid of the separate modules. You have to clean up the mess. 2) From the code you provided you seem to have fallen into the async-trap. See: [*"How do I return the response from an asynchronous call?"*](/q/14220321) – altocumulus Nov 21 '18 at 15:59

0 Answers0