Serengeti Case Study

import {aq, op} from "@uwdata/arquero" // JavaScript dplyr
import {vl} from "@vega/vega-lite-api-v5" // JavaScript ggplot2

// Inputs
import {multiAutoSelect} from "@mdlama/multi-auto-select"

// Loading
import {loading} from "@mateh/loading"

proj4 = require('proj4@2.8.0/dist/proj4-src.js')

// https://observablehq.com/@observablehq/hello-leaflet
L = {
  const L = await require("leaflet@1/dist/leaflet.js");
  if (!L._style) {
    const href = await require.resolve("leaflet@1/dist/leaflet.css");
    document.head.appendChild(L._style = html`<link href=${href} rel=stylesheet>`);
  }
  return L;
}

spinner = (height = 400) => html`
<div style="display: flex; justify-content: center; align-items: center; max-width: 640px; height: ${height}px;">
${loading({
  style: "color: #3b5fc0",
  size: 160
})}
</div>
`;

This is an online application designed to let you explore and analyze data from the Snapshot Serengeti research site for your own lab project.

The application uses real data from the Snapshot Serengeti camera trap site. The data you will be analyzing represents nearly 900,000 photos taken over 3 years (2010-2013).

The application analyzes these data using the R, a powerful, statistical programming language that is one of the most commonly used research tools in biology (and elsewhere!).

Fortunately, you won’t have to do any programming yourself! We have designed a collection of graphing tools that allow you to manipulate and analyze the data without having to modify the underlying code itself.

The different graphing tools are listed on the left-hand menu. Each graph presents and summarizes the data in different ways. It is up to you to decide which graph or set of graphs are best suited to answering your research question. Click one to start your analytical exploration of the Snapshot Serengeti data!

We recommend you have the list of variable descriptions for the Snapshot Serengeti dataset handy when working with these graphs. This will help you decide which variables and graphs will be useful for answering your question.

Environment at Sites of Wildebeest Observation, by Season

Environmental values at cameras where wildebeest were recorded by month. Boxes show the interquartile range, horizontal line is the median, diamond is the mean value. Whiskers show the values of points included within 1.5 times the intnerquartile range, values outside of this range (outliers) are represented by open circles.

viewof inputs_wov = Inputs.radio(
  ["Amount of Shade", 
   "Distance to Confluence (m)",
   "Distance to Kopje (m)",
   "Distance to River (m)",
   "Seasonal Greenness"],
  { 
    value: "Amount of Shade",
    label: "Variable"
  }
)

filtered_wov = aq.table(serengeti)
  .filter(aq.escape(r => r.Species == 'wildebeest'))

{
  yield spinner();
  yield vl.markBoxplot({size: 30})
  .data(filtered_wov)
  .encode(
    vl.x().fieldN('Month (1=Jan)'),
    vl.y().fieldQ(inputs_wov),
    vl.color().fieldN('Month (1=Jan)').legend(null)
  )
  .width(600)
  .height(400)
  .render();
}

Observations

The following graphs and map will allow you to explore the overall observation frequency of each species.

input = await viewof species_freq;

Inputs.button([
  ["Predators", () => input.update(species_predators)],
  ["Prey", () => input.update(species_prey)],
  ["Other", () => input.update(species_other)],
  ["All Species", () => input.update(species_all)],
  ["Clear Species", () => input.update([])]
])

viewof species_freq = multiAutoSelect({
  options: species_all,
  value: species_all,
  placeholder: "Select Values"
})

frequency_observations = {
  const fromproj = '+proj=utm +zone=36 +south +a=6378249.145 +rf=293.465 +units=m +no_defs';
  const toproj = '+proj=longlat +datum=WGS84 +no_defs';
  
  const frequency_observations = aq.table(serengeti)
    .filter(aq.escape(r => !isNaN(r['Latitude (m)']) && !isNaN(r['Longitude (m)'])))
    .derive({
      latlon: aq.escape(r => proj4(fromproj, toproj, [+r['Longitude (m)'], +r['Latitude (m)']]))
    });
    
  return frequency_observations;
}

frequency_filter = frequency_observations
  .filter(aq.escape(r => op.includes(species_freq, r.Species)))

{
  yield spinner();
  yield vl.markBar({ tooltip: true })
    .data(frequency_filter)
    .transform(
      vl.aggregate({op: "count", as: "Freq"}).groupby("Species")
    )
    .encode(
      vl.x().fieldN('Species'),
      vl.y().fieldQ('Freq')
    )
  .width(900)
  .height(400)
  .render()
}

{
  yield spinner();
  yield vl.markBar({ tooltip: true })
    .data(frequency_filter)
    .transform(
      vl.aggregate({op: "count", as: "Freq"}).groupby("Camera Site")
    )
    .encode(
      vl.x().fieldN('Camera Site').axis({labelOverlap: true}),
      vl.y().fieldQ('Freq')
    )
  .width(900)
  .height(400)
  .render()
}

container = html`<div style="height:600px;">`;

obsLayer = {
  const map = L.map(container).setView([-2.5, 34.9], 11);
  L.tileLayer('https://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}', {
    maxZoom: 20,
    subdomains:['mt0','mt1','mt2','mt3']
  }).addTo(map);
  
  const obsLayer = L.layerGroup();
  obsLayer.addTo(map);
  
  setInterval(function() { map.invalidateSize(); }, 100);
  
  yield obsLayer;
}

markers = frequency_filter
  .groupby('Camera Site')
  .rollup({'Image Count': op.count(), 
           latlon: op.array_agg_distinct('latlon')
   })
  .derive({latlon: r => r.latlon[0],
           radius: r => 1500*r['Image Count']/op.max(r['Image Count'])})
  .filter(aq.escape(r => r['Image Count'] > 0))
  .derive({marker: aq.escape(d => L.circle([d.latlon[1], d.latlon[0]], {radius: d.radius, color: 'red', weight: 2})
                                   .bindPopup(`Camera Site: ${d['Camera Site']}<br/><br/>Image Count: ${d['Image Count']} `, {
                                      closeButton: true
                                    })
                            )
         })

{
  obsLayer.clearLayers();
  for (const marker of markers.array('marker')) {
    obsLayer.addLayer(marker);
  }
}