P5JS Data Visualization Mapping

Question

I want to make a world population data visualization using ellipse but my code doesn't work, ellipses dont show up. What's wrong with my code? Im sure there is nothing wrong with json files stuff. Im not sure about my for loop but I cannot detect what is my error in this code

let popu;
let latlon;
const mappa = new Mappa("Leaflet");
let trainMap;
let canvas;

let data = [];

const options = {
  lat: 0,
  lng: 0,
  zoom: 1.5,
  style: "http://{s}.tile.osm.org/{z}/{x}/{y}.png",
};

function preload() {
  popu = loadJSON("vn.json");
  latlon = loadJSON("latlon.json");
}

function setup() {
  canvas = createCanvas(800, 600);
  trainMap = mappa.tileMap(options);
  trainMap.overlay(canvas);

  let maxSubs = 0;
  let minSubs = Infinity;
  for (let i = 0; i < popu.length; i++) {
    let country = popu[i].country;
    let address = latlon[country];
    if (address) {
      let lat = address[0];
      let lon = address[1];
      let count = Number(popu[i].population);
      data.push({
        lat,
        lon,
        count,
      });

      if (count > maxSubs) {
        maxSubs = count;
      }
      if (count < minSubs) {
        minSubs = count;
      }
    }
  }
  let minD = sqrt(minSubs);
  let maxD = sqrt(maxSubs);

  for (let coun of data) {
    coun.diameter = map(sqrt(coun.count), minD, maxD, 1, 20);
  }
}

function draw() {
  clear();
  for (let coun of data) {
    const pix = trainMap.latLngToPixel(coun.lat, coun.lon);
    fill(frameCount % 255, 0, 200, 100);
    const zoom = trainMap.zoom();
    const scl = pow(2, zoom);
    ellipse(pix.x, pix.y, coun.diameter * scl);
  }
}

This is a piece of my json file vn.json

[
    {
        "country": "Afghanistan",
        "population": 37172386
    },
    {
        "country": "Albania",
        "population": 2866376
    },
    {
        "country": "Algeria",
        "population": 42228429
    },
    {
        "country": "American Samoa",
        "population": 55465
    },
    {
        "country": "Andorra",
        "population": 77006
    }
]

latlon.json

{
    "ad": [
        "42.5000",
        "1.5000"
    ],
    "ae": [
        "24.0000",
        "54.0000"
    ],
    "af": [
        "33.0000",
        "65.0000"
    ],
    "ag": [
        "17.0500",
        "-61.8000"
    ],
    "ai": [
        "18.2500",
        "-63.1667"
    ]
}

I want to make the ellipse representing for population can show up

Answer 1

First of all in setup you need to change the popu.length to Object.keys(popu).length. The length was not acquired correctly, therefore the data was not generated correctly too.

The second thing is that you try to obtain the address from the latlon.json file by using the full name of the country as the key. The problem is that in vn.json the keys of the countries are just 2 letters, where the names of the countries in latlon.json are full names. You need to change the names in one of the files to make it work in this case, or find any other way to match the pupu with the latlon array.

let country = popu[i].country; // the name is 2 letters code, 'af' for example
let address = latlon[country]; // the keys in latlon are full names, so 'af' won't get any value from the array.

I changed the country parameters in the vn.json to the full names of the countries, and the visualization worked.