Search code examples
javascriptd3.jsgithubpromisegist

Local D3 Not working Online

I recently tried moving a D3 project that I'm working on locally to github, but am running into a problem. Here's what it looks like locally:

enter image description here

The gist is online here: https://gist.github.com/KingOfCramers/6057411e8c55d87a5894291aefbe0b6d

I'm using a promise wrapper to load the resources, and then when it resolves, using a .all function to fire my visualization. The relevant bit of code looks like this:

var promiseWrapper = (xhr, d) => new Promise(resolve => xhr(d, (p) => resolve(p)))    
Promise.all([promiseWrapper(d3.json,"yemen.json"),promiseWrapper(d3.csv,"droneData.csv")]).then(resolve =>{
    createMap(resolve[0],resolve[1])
})

function createMap(districts,drones){...visualization code...

When I uploaded the visualization to github, the blocks page tells me that it cannot access the features array of my json data. I don't get this error when I am working locally. I logs this error message to the console: "Uncaught (in promise) TypeError: Cannot read property 'features' of null." What am I doing wrong?

Solution

  • I'm going to provide an alternative, but I'm not sure this will answer your question.

    d3 provides its own queuing mechanism that does what you are doing with the pomiseWrapper.

    See https://github.com/d3/d3-queue

    d3.queue()
  .defer(d3.json, "yemen.json")
  .defer(d3.csv, "droneData.csv")
  .await(createMap);

function createMap(error, districts, drones) {....

    Do you have a working fiddle?