Scatter charts are great to reveal hidden patterns in large datasets. In the following example, we will use a huge file obtained from a public database (geonames.org) to plot a scatter chart showing the position of cities based on their latitude and longitude. The file contains a list of locations with populations above 15,000 (Data/cities_15000.csv). It contains over 100,000 entries (and because of this, it will take a few seconds to load). This is the general structure of the CSV file:

geonameid;asciiname;latitude;longitude;country_code;population;timezone14256;Azadshahr;34.79049;48.57011;IR;514102;Asia/Tehran
18918;Protaras;35.0125;34.05833;CY;20230;Asia/Nicosia
23814;Kahriz;34.3838;47.0553;IR;766706;Asia/Tehran
24851;Nurabad;34.0734;47.9725;IR;73528;Asia/Tehran
// + than 100 000 lines

To build the scatter chart, we need to process the file and convert latitudes and longitudes into the point data format. The axes also have to be configured to represent a cylindrical projection of the globe (limited by longitude: -180 to 180 and latitude: -90 to 90). The following code configures the scales, loads the files, parses the data, builds the point object for each coordinate pair, and draws the chart:

fetch('../Data/cities15000.csv')
    .then(response => response.text())
    .then(csv => drawData(Papa.parse(csv, {header: true}).data));
 
 function drawData(datasets) {
     const locations = [];
     datasets.forEach(city => {
         const obj = {
             x: city.longitude,
             y: city.latitude,
             name: city.asciiname
         }
         locations.push(obj);
     });
 
     const dataObj = {
         datasets: [
             {
                 label: "Label",
                 data: locations,
                 pointRadius: .25,
                 pointBackgroundColor: 'red'
             }
         ]
     }
 
     const chartObj = {
         type: "scatter",
         data: dataObj,
         options: {
             animation: { duration: 0 },
             title: { display: false },
             responsive: false,
             legend: { display: false },
             scales: {
                 xAxes: [ { ticks: { min: -180, max: 180 } } ],
                 yAxes: [ { ticks: { min: -90,  max: 90  } } ]
             },
             tooltips: {
                 callbacks: {
                     title: (items,data) => locations[items[0].index].name
                 }
             }
         }
     };
 
     new Chart("my-scatter-chart", chartObj);
 }

You can see the full code in ScatterBubble/scatter-6-world.html. The result reveals a surprising hidden pattern (and correlation between land and humans). You can move the mouse over the points and it will reveal the name and coordinates of the location (this was configured using tooltip callbacks):