Binary data Scatterplot

by felixp

HTML

<!DOCTYPE html>
<html>

  <head>
    <title>Binary data Scatterplot</title>
    
    <!-- Maplibre & deck.gl imports -->
    <script src="https://unpkg.com/[email protected]/dist/maplibre-gl.js"></script>
    <link href="https://unpkg.com/[email protected]/dist/maplibre-gl.css" rel="stylesheet" />
    <script src="https://unpkg.com/@deck.gl/core@beta/dist.min.js"></script>
    <script src="https://unpkg.com/@deck.gl/layers@beta/dist.min.js"></script>

  </head>

  <body>
    <div id="map"></div>
  </body>
</html>

CSS

body {
  margin: 0;
  padding: 0; 
}
#map{
  width: 100vw;
  height: 100vh;
}

JavaScript

const AIRPORTS = 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/examples/line/airports.json'

async function init() {
  const response = await fetch(AIRPORTS);
  const data = await response.json();
  const positions = new Float64Array(data.map(d => d.coordinates).flat(2));

  const deckgl = new deck.DeckGL({
    container: 'map',
    mapStyle: "https://basemaps.cartocdn.com/gl/voyager-nolabels-gl-style/style.json",
    initialViewState: {latitude: 50, longitude: 10, zoom: 3},
    controller: true,

    layers: [
      new deck.ScatterplotLayer({
        data: {
          length: data.length,
			    attributes: {getPosition: {value: positions, size: 2}}
        },
        radiusMinPixels: 4
      })
    ]
  });
}

init();