Scatter Plots on Maps in JavaScript

How to make D3.js-based scatter plots on maps in JavaScript. Scatter plots on maps highlight geographic areas and can be colored by value.

Plotly Studio: Transform any dataset into an interactive data application in minutes with AI. Sign up for early access now.

Canadian Cities Map

var data = [{
    type: 'scattergeo',
    mode: 'markers+text',
    text: [
        'Montreal', 'Toronto', 'Vancouver', 'Calgary', 'Edmonton',
        'Ottawa', 'Halifax', 'Victoria', 'Winnepeg', 'Regina'
    ],
    lon: [
        -73.57, -79.24, -123.06, -114.1, -113.28,
        -75.43, -63.57, -123.21, -97.13, -104.6
    ],
    lat: [
        45.5, 43.4, 49.13, 51.1, 53.34, 45.24,
        44.64, 48.25, 49.89, 50.45
    ],
    marker: {
        size: 7,
        color: [
            '#bebada', '#fdb462', '#fb8072', '#d9d9d9', '#bc80bd',
            '#b3de69', '#8dd3c7', '#80b1d3', '#fccde5', '#ffffb3'
        ],
        line: {
            width: 1
        }
    },
    name: 'Canadian cities',
    textposition: [
        'top right', 'top left', 'top center', 'bottom right', 'top right',
        'top left', 'bottom right', 'bottom left', 'top right', 'top right'
    ],
}];

var layout = {
    title: {
        text: 'Canadian cities',
        font: {
            family: 'Droid Serif, serif',
            size: 16
        }
    },
    geo: {
        scope: 'north america',
        resolution: 50,
        lonaxis: {
            'range': [-130, -55]
        },
        lataxis: {
            'range': [40, 70]
        },
        showrivers: true,
        rivercolor: '#fff',
        showlakes: true,
        lakecolor: '#fff',
        showland: true,
        landcolor: '#EAEAAE',
        countrycolor: '#d3d3d3',
        countrywidth: 1.5,
        subunitcolor: '#d3d3d3'
    }
};

Plotly.newPlot('myDiv', data, layout);

 Click to copy

US Airports Map

d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/2011_february_us_airport_traffic.csv', function(err, rows){

    function unpack(rows, key) {
        return rows.map(function(row) { return row[key]; });
    }

    var scl = [[0,'rgb(5, 10, 172)'],[0.35,'rgb(40, 60, 190)'],[0.5,'rgb(70, 100, 245)'], [0.6,'rgb(90, 120, 245)'],[0.7,'rgb(106, 137, 247)'],[1,'rgb(220, 220, 220)']];

    var data = [{
        type:'scattergeo',
        locationmode: 'USA-states',
        lon: unpack(rows, 'long'),
        lat: unpack(rows, 'lat'),
        hoverinfor:  unpack(rows, 'airport'),
        text:  unpack(rows, 'airport'),
        mode: 'markers',
        marker: {
            size: 8,
            opacity: 0.8,
            reversescale: true,
            autocolorscale: false,
            symbol: 'square',
            line: {
                width: 1,
                color: 'rgb(102,102,102)'
            },
            colorscale: scl,
            cmin: 0,
            color: unpack(rows, 'cnt'),
            colorbar: {
                title: {text: 'Incoming Flights February 2011'}
            }
        }
    }];


    var layout = {
        title: {text: 'Most Trafficked US airports'},
        colorbar: true,
        geo: {
            scope: 'usa',
            projection: {
                type: 'albers usa'
            },
            showland: true,
            landcolor: 'rgb(250,250,250)',
            subunitcolor: 'rgb(217,217,217)',
            countrycolor: 'rgb(217,217,217)',
            countrywidth: 0.5,
            subunitwidth: 0.5
        }
    };

    Plotly.newPlot("myDiv", data, layout, {showLink: false});

});
 Click to copy

North America Precipitation Map

d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/2015_06_30_precipitation.csv', function(err, rows){
      function unpack(rows, key) {
          return rows.map(function(row) { return row[key]; });
      }

 scl = [[0, 'rgb(150,0,90)'],[0.125, 'rgb(0, 0, 200)'],[0.25,'rgb(0, 25, 255)'],[0.375,'rgb(0, 152, 255)'],[0.5,'rgb(44, 255, 150)'],[0.625,'rgb(151, 255, 0)'],[0.75,'rgb(255, 234, 0)'],[0.875,'rgb(255, 111, 0)'],[1,'rgb(255, 0, 0)']];

    var data = [{
        type: 'scattergeo',
        mode: 'markers',
        text: unpack(rows, 'Globvalue'),
        lon: unpack(rows, 'Lon'),
        lat: unpack(rows, 'Lat'),
        marker: {
          color: unpack(rows, 'Globvalue'),
          colorscale: scl,
          cmin: 0,
          cmax: 1.4,
          reversescale: true,
          opacity: 0.2,
          size: 2,
          colorbar:{
            thickness: 10,
            title: {side:
              'right'
            },
            outlinecolor: 'rgba(68,68,68,0)',
            ticks: 'outside',
            ticklen: 3,
            shoticksuffix: 'last',
            ticksuffix: 'inches',
            dtick: 0.1
          }
        },
        name: 'NA Precipitation'
    }];

    var layout = {
      geo:{
        scope: 'north america',
        showland: true,
        landcolor: 'rgb(212,212,212)',
        subunitcolor: 'rgb(255,255,255)',
        countrycolor: 'rgb(255,255,255)',
        showlakes: true,
        lakecolor: 'rgb(255,255,255)',
        showsubunits: true,
        showcountries: true,
        resolution: 50,
        projection: {
          type: 'conic conformal',
          rotation: {
            long: -100
          }
        },
      },
      longaxis: {
        showgrid: true,
        gridwidth: 0.5,
        range: [ -140.0, -55.0 ],
        dtick: 5
      },
      lataxis: {
        showgrid: true,
        gridwidth: 0.5,
        range: [ 20.0, 60.0 ],
        dtick: 5
      },
      title: {text: 'North America Precipitation'},
      width: 600,
      height: 600
    };

    Plotly.newPlot('myDiv', data, layout);
  });
 Click to copy