Project Loon

Welcome to the Datapages site for Project Loon data! Loon balloons were what is referred to as “superpressure” balloons: the pressure inside their envelopes was larger than the ambient pressure, so they drifted approximately on surfaces of constant density. In this dataset, there are 385 balloon flights, split into 938 data segments, all at least two days long and corresponding to intervals when the balloons were passively drifting in the lower stratosphere. For more details on the dataset, please see the About tab. The full dataset can be downloaded from the Data tab, and the Analysis tab offers other data access and analysis tools.

On this page, we offer several tools to select, visualize, and download data from individual balloons and groups of balloons. Immediately below you will find a tool that allows you to select and plot the trajectories of a subset of data segments, based on the time of year the data were collected and where the balloons flew. You can download a downsampled (10x, or one data point every 20 minutes) version of the dataset that includes just the selected segments, or generate a code snippet in R or Python that downloads the full dataset for those segments.

Below that we offer an additional set of plotting tools for individual data segments, drawn from the subset of segments selected earlier. Time series of the balloon’s altitude, horizontal velocities, and analyzed gravity wave momentum flux are plotted from the downsampled data, which are shown in a table at the bottom. There is an option to download the segment’s complete data.

Image from Wikipedia by Flickr user Wasting Frames, license CC BY 2.0.

---

function interval(range = [], options = {}) {
  const [min = 0, max = 1] = range;
  const {
    step = .001,
    label = null,
    value = [min, max],
    format = ([start, end]) => `${start} … ${end}`,
    color,
    width,
    theme,
    __ns__ = randomScope(),
  } = options;

  const css = `
#${__ns__} {
  font: 13px/1.2 var(--sans-serif);
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  max-width: 100%;
  width: auto;
}
@media only screen and (min-width: 30em) {
  #${__ns__} {
    flex-wrap: nowrap;
    width: 360px;
  }
}
#${__ns__} .label {
  width: 120px;
  padding: 5px 0 4px 0;
  margin-right: 6.5px;
  flex-shrink: 0;
}
#${__ns__} .form {
  display: flex;
  width: 100%;
}
#${__ns__} .range {
  flex-shrink: 1;
  width: 100%;
}
#${__ns__} .range-slider {
  width: 100%;
}
  `;
  
  const $range = rangeInput({min, max, value: [value[0], value[1]], step, color, width, theme});
  const $output = html`<output>`;
  const $view = html`<div id=${__ns__}>
${label == null ? '' : html`<div class="label">${label}`}
<div class=form>
  <div class=range>
    ${$range}<div class=range-output>${$output}</div>
  </div>
</div>
${html`<style>${css}`}
  `;

  const update = () => {
    const content = format([$range.value[0], $range.value[1]]);
    if(typeof content === 'string') $output.value = content;
    else {
      while($output.lastChild) $output.lastChild.remove();
      $output.appendChild(content);
    }
  };
  $range.oninput = update;
  update();
  
  return Object.defineProperty($view, 'value', {
    get: () => $range.value,
    set: ([a, b]) => {
      $range.value = [a, b];
      update();
    },
  });
}

function rangeInput(options = {}) {
  const {
    min = 0,
    max = 100,
    step = 'any',
    value: defaultValue = [min, max],
    color,
    width,
    theme = theme_Flat,
  } = options;
  
  const controls = {};
  const scope = randomScope();
  const clamp = (a, b, v) => v < a ? a : v > b ? b : v;

  // Will be used to sanitize values while avoiding floating point issues.
  const input = html`<input type=range ${{min, max, step}}>`;
  
  const dom = html`<div class=${`${scope} range-slider`} style=${{
    color,
    width: cssLength(width),
  }}>
  ${controls.track = html`<div class="range-track">
    ${controls.zone = html`<div class="range-track-zone">
      ${controls.range = html`<div class="range-select" tabindex=0>
        ${controls.min = html`<div class="thumb thumb-min" tabindex=0>`}
        ${controls.max = html`<div class="thumb thumb-max" tabindex=0>`}
      `}
    `}
  `}
  ${html`<style>${theme.replace(/:scope\b/g, '.'+scope)}`}
</div>`;

  let value = [], changed = false;
  Object.defineProperty(dom, 'value', {
    get: () => [...value],
    set: ([a, b]) => {
      value = sanitize(a, b);
      updateRange();
    },
  });

  const sanitize = (a, b) => {
    a = isNaN(a) ? min : ((input.value = a), input.valueAsNumber);
    b = isNaN(b) ? max : ((input.value = b), input.valueAsNumber);
    return [Math.min(a, b), Math.max(a, b)];
  }
  
  const updateRange = () => {
    const ratio = v => (v - min) / (max - min);
    dom.style.setProperty('--range-min', `${ratio(value[0]) * 100}%`);
    dom.style.setProperty('--range-max', `${ratio(value[1]) * 100}%`);
  };

  const dispatch = name => {
    dom.dispatchEvent(new Event(name, {bubbles: true}));
  };
  const setValue = (vmin, vmax) => {
    const [pmin, pmax] = value;
    value = sanitize(vmin, vmax);
    updateRange();
    // Only dispatch if values have changed.
    if(pmin === value[0] && pmax === value[1]) return;
    dispatch('input');
    changed = true;
  };
  
  setValue(...defaultValue);
  
  // Mousemove handlers.
  const handlers = new Map([
    [controls.min, (dt, ov) => {
      const v = clamp(min, ov[1], ov[0] + dt * (max - min));
      setValue(v, ov[1]);
    }],
    [controls.max, (dt, ov) => {
      const v = clamp(ov[0], max, ov[1] + dt * (max - min));
      setValue(ov[0], v);
    }],
    [controls.range, (dt, ov) => {
      const d = ov[1] - ov[0];
      const v = clamp(min, max - d, ov[0] + dt * (max - min));
      setValue(v, v + d);
    }],
  ]);
  
  // Returns client offset object.
  const pointer = e => e.touches ? e.touches[0] : e;
  // Note: Chrome defaults "passive" for touch events to true.
  const on  = (e, fn) => e.split(' ').map(e => document.addEventListener(e, fn, {passive: false}));
  const off = (e, fn) => e.split(' ').map(e => document.removeEventListener(e, fn, {passive: false}));
  
  let initialX, initialV, target, dragging = false;
  function handleDrag(e) {
    // Gracefully handle exit and reentry of the viewport.
    if(!e.buttons && !e.touches) {
      handleDragStop();
      return;
    }
    dragging = true;
    const w = controls.zone.getBoundingClientRect().width;
    e.preventDefault();
    handlers.get(target)((pointer(e).clientX - initialX) / w, initialV);
  }
  
  
  function handleDragStop(e) {
    off('mousemove touchmove', handleDrag);
    off('mouseup touchend', handleDragStop);
    if(changed) dispatch('change');
  }
  
  invalidation.then(handleDragStop);
  
  dom.ontouchstart = dom.onmousedown = e => {
    dragging = false;
    changed = false;
    if(!handlers.has(e.target)) return;
    on('mousemove touchmove', handleDrag);
    on('mouseup touchend', handleDragStop);
    e.preventDefault();
    e.stopPropagation();
    
    target = e.target;
    initialX = pointer(e).clientX;
    initialV = value.slice();
  };
  
  controls.track.onclick = e => {
    if(dragging) return;
    changed = false;
    const r = controls.zone.getBoundingClientRect();
    const t = clamp(0, 1, (pointer(e).clientX - r.left) / r.width);
    const v = min + t * (max - min);
    const [vmin, vmax] = value, d = vmax - vmin;
    if(v < vmin) setValue(v, v + d);
    else if(v > vmax) setValue(v - d, v);
    if(changed) dispatch('change');
  };
  
  return dom;
}

function randomScope(prefix = 'scope-') {
  return prefix + (performance.now() + Math.random()).toString(32).replace('.', '-');
}

cssLength = v => v == null ? null : typeof v === 'number' ? `${v}px` : `${v}`

html = htl.html

theme_Flat = `
/* Options */
:scope {
  color: #3b99fc;
  width: 240px;
}

:scope {
  position: relative;
  display: inline-block;
  --thumb-size: 15px;
  --thumb-radius: calc(var(--thumb-size) / 2);
  padding: var(--thumb-radius) 0;
  margin: 2px;
  vertical-align: middle;
}
:scope .range-track {
  box-sizing: border-box;
  position: relative;
  height: 7px;
  background-color: hsl(0, 0%, 80%);
  overflow: visible;
  border-radius: 4px;
  padding: 0 var(--thumb-radius);
}
:scope .range-track-zone {
  box-sizing: border-box;
  position: relative;
}
:scope .range-select {
  box-sizing: border-box;
  position: relative;
  left: var(--range-min);
  width: calc(var(--range-max) - var(--range-min));
  cursor: ew-resize;
  background: currentColor;
  height: 7px;
  border: inherit;
}
/* Expands the hotspot area. */
:scope .range-select:before {
  content: "";
  position: absolute;
  width: 100%;
  height: var(--thumb-size);
  left: 0;
  top: calc(2px - var(--thumb-radius));
}
:scope .range-select:focus,
:scope .thumb:focus {
  outline: none;
}
:scope .thumb {
  box-sizing: border-box;
  position: absolute;
  width: var(--thumb-size);
  height: var(--thumb-size);

  background: #fcfcfc;
  top: -4px;
  border-radius: 100%;
  border: 1px solid hsl(0,0%,55%);
  cursor: default;
  margin: 0;
}
:scope .thumb:active {
  box-shadow: inset 0 var(--thumb-size) #0002;
}
:scope .thumb-min {
  left: calc(-1px - var(--thumb-radius));
}
:scope .thumb-max {
  right: calc(-1px - var(--thumb-radius));
}
`

Plot = import("https://cdn.jsdelivr.net/npm/@observablehq/plot@0.6/+esm")

// load and authorize redivis
redivis = require("redivis")
//auth = redivis.authorize({ apiToken: REDIVIS_API_TOKEN })

// formatting function for how two ended slider displays selected range
interval_format = ([start, end]) => `[${start}, ${end}]`

// array of seasons for season selector
seasons = ["spring", "summer", "fall", "winter"]

// all segments
s = transpose(segments)

// all segments' data
d = transpose(data).map(d => ({ ...d, time: new Date(d.time) }))

ns = Inputs.text().classList[0]

// custom css to override some ojs defaults for inputs
html`<style>

  .${ns} {
    --label-width: 70px;
  }

  .${ns} div label {
    background-color: #f4f4f4;
    padding: 0.25rem 0.5rem;
    border-radius: 0.5rem;
    margin-right: 0.25rem;
    width: auto;
  }
  
  .${ns} div label:hover,
  .${ns} div label:active,
  .${ns} div label:focus {
    background-color: #cdecff;
  }
  
  .${ns} div input[type="number"] {
    background-color: #f4f4f4;
    padding: 0.25rem 0.5rem;
    border-radius: 0.5rem;
    flex-shrink: 3;
    border: none;
  }
  
  .${ns} select {
    background-color: #f4f4f4;
    border: none;
    border-radius: 0.5rem;
    padding: 0.25rem 0.5rem;
    width: auto;
  }
  
}
</style>`

Use these filters to narrow down the list of segments, and then select an individual segment from this list below to visualize its trajectory and telemetry.

// filter by season(s)
viewof season = Inputs.checkbox(seasons, {value: seasons, label: "Season (astronomical, northern hemisphere)"})

// filter by range of longitudes
viewof longitude_range = interval([-180, 180], {
  step: 1, label: "Longitudes", width: "80%", format: interval_format
})

// filter by range of latitudes
viewof latitude_range = interval([-90, 90], {
  step: 1, label: "Latitudes", width: "80%", format: interval_format
})

// filter by range of durations
viewof duration_range = interval([0, 100], {
  step: 1, label: "Duration (days)", width: "80%", format: interval_format
})

function download(filename, text) {
  var element = document.createElement("a");
  element.setAttribute(
    "href",
    "data:text/csv;charset=utf-8," + encodeURIComponent(text)
  );
  element.setAttribute("download", filename);

  element.style.display = "none";
  document.body.appendChild(element);

  element.click();

  document.body.removeChild(element);
}

// callback helper -- array to csv
function convertToCSV(arr) {
  const array = [Object.keys(arr[0])].concat(arr);

  return array
    .map((it) => {
      return Object.values(it).toString();
    })
    .join("\n");
}

// download data button
download_button = {
  let button = Inputs.button(html`Download ${sf.length} segment${sf.length != 1 ? "s" : ""} (downsampled)`);
  button.addEventListener("click", function () {
    download("project_loon_filtered.csv", convertToCSV(df));
  });
  return button;
}

function fillTemplate(template, values) {
  return template.replace(/\{\{(\w+)\}\}/g, (match, key) => {
    return values[key] !== undefined ? values[key] : match;
  });
};

function generateSeasonCondition(seasons) {
  if (!seasons || seasons.length === 0) {
    return '';
  }
  return seasons.map(season => `segments.${season}`).join(' OR ');
}

// read in template files
sql_template = FileAttachment("resources/templates/query.sql").text();
r_template = FileAttachment("resources/templates/query_snippet.R").text();
py_template = FileAttachment("resources/templates/query_snippet.py").text();

// create sql query using input filter values, indent all lines
sql_query = fillTemplate(sql_template, {
  longitude_min: longitude_range[0],
  longitude_max: longitude_range[1],
  latitude_min: latitude_range[0],
  latitude_max: latitude_range[1],
  duration_min: duration_range[0],
  duration_max: duration_range[1],
  season_statement: generateSeasonCondition(season)
}).replace(/^/gm, '  ');


// create r and python code snippets with sql query
r_snippet = () => fillTemplate(r_template, { query: sql_query });
py_snippet = () => fillTemplate(py_template.trim(), { query: sql_query });

// modified from:
// https://github.com/jimjam-slam/quarto-experiments/tree/main/modal-dialog

html`
<a href="#" data-micromodal-trigger="mymodal" tabindex="0">
  <i class="bi bi-clipboard-data"></i>
  Generate code snippet
</a>
`

micro = require("micromodal@0.4.10");
m = micro.init({
  awaitOpenAnimation: true,
  awaitCloseAnimation: true
});

Data query code snippet

R

html`
<div class="sourceCode">
<pre class="sourceCode r code-with-copy">
<code class="sourceCode r">
<span>${r_snippet()}</span>
</code>
<button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button>
</pre>
</div>
`

Python

html`
<div class="sourceCode">
<pre class="sourceCode python code-with-copy">
<code class="sourceCode python">
<span>${py_snippet()}</span>
</code>
<button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button>
</pre>
</div>
`

sf = s.filter(d => season.some(se => d.season.includes(se))) // by season
      .filter(d => d.longitude_min >= longitude_range[0] & // by longitude
                   d.longitude_max <= longitude_range[1])
      .filter(d => d.latitude_min >= latitude_range[0] & // by latitude
                   d.latitude_max <= latitude_range[1])
      .filter(d => d.duration >= duration_range[0] & // by duration
                   d.duration <= duration_range[1])

// filtered segments' IDs
sf_id = sf.map(d => d.segment_id)

// filtered segments' data
df = d.filter(d => sf_id.includes(d.segment_id))

land = FileAttachment("resources/topo/ne_110m_land.json").json()
ocean = FileAttachment("resources/topo/ne_110m_ocean.json").json()

// fill colors for land and ocean on maps
land_color = "wheat"
ocean_color = "#8398aa"

// map -- globe
viewof map_globe = Plot.plot({
  width: 400,
  projection: {type: "orthographic", rotate: [-longitude, -latitude]},
  marks: [
    Plot.sphere(),
    Plot.graticule(),
    Plot.geo(ocean, {fill: ocean_color, opacity: 0.7}),
    Plot.geo(land, {fill: land_color}),
    Plot.line(df, {
      x: "longitude", y: "latitude", z: "segment_id",
      r: 0.7, stroke: "grey", strokeOpacity: 0.7,
    }),
    Plot.tip(df, Plot.pointer({
      x: "longitude", y: "latitude", title: (d) => d.segment_id,
      format: (d) => `${d}`, textPadding: 4,
    }))
  ]
})

viewof longitude = Inputs.range([-180, 180], {label: "Longitude", step: 1, value: -30})
viewof latitude = Inputs.range([-90, 90], {label: "Latitude", step: 1, value: 0})

---

d_found = sf.length > 0
// display error is no matches
d_found ? html`<div></div>` : html`<p class="filter-error"><i class="bi bi-exclamation-triangle"></i> No segments match selected filters</p>`
dg = d3.group(df, d => d.segment_id)
// selector for individual segment
viewof ds = Inputs.select(dg, {
  value: dg.get(112), // default segment
  format: ([k, v]) => `Segment ${k} (Flight ${v[0].flight_id})`
})

async function getSegment(seg_id) {
  const rows = await redivis
    .user('SDSS')
    .dataset('project_loon')
    .query(`
       SELECT *
       FROM loon
       WHERE segment_id = ${seg_id}
    `)
    .listRows()
  return rows;
}

viewof download_button_segment = {
  let button = Inputs.button("Download segment");
  button.addEventListener("click", async function () {
    const df_full = await getSegment(ds[0].segment_id);
    download("project_loon_filtered.csv", convertToCSV(df_full));
  });
  return button;
}

d_found ? html`<div class="segment-buttons">${viewof ds} ${viewof download_button_segment}</div>` : html`<div></div>`
start_color = "var(--bs-success)"
end_color = "var(--bs-danger)"

// function for how to format data on map
print_date = d => d.toISOString().split('T')[0]

// map -- whole world equirectangular
d_found ? Plot.plot({
  style: { fontFamily: "var(--sans-serif)" },
  projection: { type: "equirectangular" },
  marks: [
    Plot.frame(),
    Plot.graticule(),
    Plot.geo(ocean, {fill: ocean_color, opacity: 0.7}),
    Plot.geo(land, {fill: land_color}),
    // trajectory path
    Plot.line(ds, {
      x: "longitude", y: "latitude",
      r: 1, stroke: "black", strokeOpacity: 0.3,
    }),
    // start marker
    Plot.dot(ds.slice(0, 1), {
      x: "longitude", y: "latitude",
      r: 3, fill: start_color, symbol: "triangle"
    }),
    // start date text
    Plot.text(ds.slice(0, 1), {
      x: "longitude", y: "latitude",
      text: d => print_date(d.time), dy: -7, lineAnchor: "bottom", fontSize: 14
    }),
    // end marker
    Plot.dot(ds.slice(ds.length - 1, ds.length), {
      x: "longitude", y: "latitude",
      r: 3, fill: end_color, symbol: "square"
    }),
    // end date text
    Plot.text(ds.slice(ds.length - 1, ds.length), {
      x: "longitude", y: "latitude",
      text: d => print_date(d.time), dy: -7, lineAnchor: "bottom", fontSize: 14
    })
  ],
}) : html`<div></div>`
get_circle = (seg) => {
  // find min and max longitude and latitude
  const minLon = d3.min(seg.map(d => d.longitude))
  const maxLon = d3.max(seg.map(d => d.longitude))
  const minLat = d3.min(seg.map(d => d.latitude))
  const maxLat = d3.max(seg.map(d => d.latitude))
  // define rectangle with min/max long/lat corners
  const corners = [[minLon, minLat], [minLon, maxLat], [maxLon, minLat], [maxLon, maxLat]]
  // find rectangle's center
  const center = [(minLon + maxLon) / 2, (minLat + maxLat) / 2]
  // find max of geo distances from each corner to center
  const dist = d3.max(corners, corner => d3.geoDistance(center, corner))
  // turn geo distance into radius
  const radius = dist * (180 / Math.PI)
  // define geo circle with computed center and radius
  const circle = d3.geoCircle().center(center).radius(radius)()
  return circle
}

// find above circle
circle = d_found ? get_circle(ds) : null

// map -- zoomed in azimuthal
d_found ? Plot.plot({
  style: { fontFamily: "var(--sans-serif)" },
  projection: { type: "azimuthal-equidistant", domain: circle },
  marks: [
    Plot.frame(),
    Plot.graticule(),
    Plot.geo(ocean, {fill: ocean_color, opacity: 0.7}),
    Plot.geo(land, {fill: land_color}),
    // trajectory path
    Plot.line(ds, {
      x: "longitude", y: "latitude",
      r: 1, stroke: "black", strokeOpacity: 0.3,
    }),
    // start marker
    Plot.dot(ds.slice(0, 1), {
      x: "longitude", y: "latitude",
      r: 6, fill: start_color, symbol: "triangle"
    }),
    // start date text
    Plot.text(ds.slice(0, 1), {
      x: "longitude", y: "latitude",
      text: d => print_date(d.time), dy: -8, lineAnchor: "bottom", fontSize: 14
    }),
    // end marker
    Plot.dot(ds.slice(ds.length - 1, ds.length), {
      x: "longitude", y: "latitude",
      r: 6, fill: end_color, symbol: "square"
    }),
    // end date text
    Plot.text(ds.slice(ds.length - 1, ds.length), {
      x: "longitude", y: "latitude",
      text: d => print_date(d.time), dy: -8, lineAnchor: "bottom", fontSize: 14
    })
  ],
}) : html`<div></div>`
viewof scatter_altitude = Plot.plot({
  style: { fontFamily: "var(--sans-serif)" },
  width: 900,
  height: 200,
  inset: 8,
  grid: true,
  y: { label: "Altitude (meters)" },
  marks: [
    Plot.frame(),
    Plot.dot(ds, { x: "time", y: "altitude", r: 0.5 }),
  ]
})

d_found ? html`
  <form><label>Altitude</label></form>
  ${viewof scatter_altitude}
` : html`<div></div>`
winds = new Map([["Zonal (east-west)", "wind_u"],
                 ["Meridional (north-south)", "wind_v"]])
viewof y_wind = Inputs.select(winds, {label: "Wind"})

viewof scatter_wind = Plot.plot({
  style: { fontFamily: "var(--sans-serif)" },
  width: 900,
  height: 200,
  inset: 8,
  grid: true,
  y: { label: "Velocity (meters/second)" },
  marks: [
    Plot.frame(),
    Plot.dot(ds, { x: "time", y: y_wind, r: 0.5 }),
  ]
})

d_found ? html`
  ${viewof y_wind}
  ${viewof scatter_wind}
` : html`<div></div>`
fluxes = new Map([["Total", "flux_total"],
                  ["Eastward", "flux_east"],
                  ["Westward", "flux_west"],
                  ["Northward", "flux_north"],
                  ["Southward", "flux_south"]])
viewof y_flux = Inputs.select(fluxes, {label: "Flux"})

viewof scatter_flux = Plot.plot({
  style: { fontFamily: "var(--sans-serif)" },
  width: 900,
  height: 200,
  inset: 8,
  grid: true,
//  y: { label: "Flux (millipascals)", transform: (f) => Math.abs(f * 1000) },
  y: { label: "Flux (log mPa)", transform: (f) => Math.log(Math.abs(f * 1000)) },
  marks: [
    Plot.frame(),
    Plot.dot(ds, { x: "time", y: y_flux, r: 0.5 }),
  ]
})

d_found ? html`
  ${viewof y_flux}
  ${viewof scatter_flux}
` : html`<div></div>`
// data table for selected segment's data
d_found ? Inputs.table(ds) : html`<div></div>`