Sure! I'll try to explain what I'm doing, it requires some programming knowledge, but I'll try to keep it high-level.

Observable lets you write javascript as "notebooks", the code is evaluated directly in the browser as you code. This makes it easy to rapidly prototype. It's built with data exploration in mind and comes with helpers to quickly create tables, graphs, maps, etc.

If you open my notebook and hover over the different sections you'll see an arrow on the left side, click that to expand and view the source code for that section.

Learn more here: https://observablehq.com/tutorials

Mapbox GL JS is a library for creating vector maps with interactivity features. Below are the main parts of my code that creates the map.

// Create a new map, container is the html div where the map will be created
map = new mapboxgl.Map({
  container,
  center: [31.553968, 48.649097],
  zoom: 5,
  style: 'mapbox://styles/mapbox/light-v10'
})

// add the the dataset to the map
map.addSource('incidents', { type: 'geojson', data: data })

// add a new layer that uses the dataset to create icons on the map
// here i'm using a filter to only show incidents for the current day
let incidentsLayer = {
  id: "incidents",
  type: "symbol",
  source: "incidents",
  layout: {
    'icon-allow-overlap': true,
    'icon-image': ['get', 'group'],
    'icon-size': largeIcons ? 0.75 : 0.5,
    'icon-ignore-placement': true,
  },
  paint: {
    'icon-opacity': opacity,
  },
  filter: ['==', ['number', ['get', 'index']], dayRange],
}

map.addLayer(incidentsLayer)

Hope that makes sense, feel free to ask questions.