Interactive visual exploration tools for https://ecoengine.berkeley.edu/
HTML JavaScript CSS
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
build @ bc0d8b6
helpers
holos
js
photos
prototypes
static
templates
viewJS
.gitignore
.gitmodules
Gulpfile.js
LICENSE
README.md
bower.json
package.json

README.md

EcoEngine Explorer

Stamen built a search interface to explore the Berkeley Ecoengine API. Here's a screenshot:

EcoEngine

Prototypes

  • Explore
    • Faceted search, time filtering, bounding box search, raster layers, reserve polygons, observation markers
    • See Explore Features
  • Compare
    • Point, Polygon and Hexbinned observation layers
    • Accepts any EcoEngine GeoJSON observation query for comparison
  • Lizards and Woodrats
    • Spot spatially co-occuring observations by toggling layers
  • Taxa Sampling Distributions
    • Example of small mutiples to compare sampling distributions.
    • ColorBrewer palettes
  • Woodrats over Decades
    • Example of small multiples to compare temporal distributions
  • Quercus
    • Small multiples with search functionality (edit "quercus")
    • Split by search facet
    • Displays top 24 facets for a search
  • Photos
    • Simple photo-viewing app, accepts URLs in the same format as Explore
  • Bulk Download
    • A tool for generating CSV text from a query
    • Downloads multiple pages of data
  • Observations
    • An early version of Explore with search box, time filter, pagination and export options
    • Could be a good starting place for new EcoEngine applications, since the app is only about 250 lines long and uses only d3.js
  • Antarctic Chordata
    • A stress-test of loading all Chordata in a non-Mercator projection centered on Antarctica
  • Arctic Chordata
    • The same as the previous, but centered on the North Pole
  • Early version of Explore
    • An early version of explore with a preview of available photos and a "Detail" pane that lists out information about observations that are hovered over.
  • Sensors
    • A simple "hello world" of accessing and printing EcoEngine data with d3
    • Lists an index of available sensors
  • Scatterplot
    • A simple D3.js scatterplot showing observations by country over time.
  • Parallel Coordinates
    • A D3.js parallel coordinates plot showing a sample of 2000 observations.

Explore Features

Explore is a tool for browsing diverse parts of EcoEngine. Open the Queries tab to see what APIs are accessed.

  • Search box
  • Brushable time filter
  • Faceted search with histograms (filters only Observation queries)
  • Raster map with multiple layers
  • Marker map display of Observations, Sensors, Photos
  • Polygon map display of Regions
  • Advanced attribute search
  • Bounding box search
  • Footprint search

Configuration

Some parts of the interface can be configured in config.js. Those capabilities are detailed here.

Endpoints

ECO.endpoints sets which API endpoints are queried to receive particular datasets. The latest prototype points to the following links:

ECO.endpoints = {
  search: 'https://ecoengine.berkeley.edu/api/search/',
  observations: 'https://ecoengine.berkeley.edu/api/observations/',
  photos: 'https://ecoengine.berkeley.edu/api/photos/',
  sensors: 'https://ecoengine.berkeley.edu/api/sensors/?page_size=5000&format=geojson',
  layers: 'https://ecoengine.berkeley.edu/api/layers/',
  rasters: 'https://ecoengine.berkeley.edu/api/series/tasmin_ens-avg_amon_rcp85/rasters/',
  reserves: 'https://ecoengine.berkeley.edu/api/layers/reserves/features/?page_size=500',
  jepson: 'https://ecoengine.berkeley.edu/api/layers/jepson-regions/features/?page_size=500'
};

Basemaps

ECO.basemaps are tileset URLs that appear in the Basemap dropdown. Here is an example:

  'Stamen Terrain': {
    'url': 'http://{s}.tile.stamen.com/terrain-background/{z}/{x}/{y}.jpg',
    'attribution': 'Map tiles by <a href="http://stamen.com/">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org/">OpenStreetMap</a>, under <a href="http://creativecommons.org/licenses/by-sa/3.0">CC BY SA</a>.'
  }

The key is used as the name of the dropdown. URL and attribution values are both required for each tileset added to EcoEngine.

The four basemaps in the initial version of Explorer are Light, Dark, OpenStreetMap and Stamen Terrain (which currently only covers part of North America).

Advanced attribute search fields

ECO.advancedSearch fields show up in the "Advanced" tab. An alias can be provided to display as the label.

Currently only fields of type text are supported.

Technical Details

Dependencies

The interface does not require a backend to operate, aside from the EcoEngine APIs necessary to load the data Explorer exposes.

The following libraries are required to run the Explorer interface.

As well as these stylesheets.

Data

Raster Picker Configuration

The raster picker is configured in js/configure-explore.js as a data structure called ECO.rasterPicker.

The models show up in the Scenario dropdown in Explore. The metrics show up as Climate Models in Explore.

Only metrics with the value nex set to true will appear in the dropdown. The slugs from metrics and models are combined to create valid slugs for the Ecoengine Series API.

metrics can also take a palette to change the default color ramp. See available values in the colormap variable in js/color-ramp.js. These colors are passed as the API parameter style to Ecoengine to get tiles using that palette. The color ramp can also be configured in Explore using the dropdown below the color legend.

ECO.rasterPicker = {
  "models": [
    {
      "name": "modern",
      "slug": "historical"
    },
    {
      "name": "RCP 4.5",
      "slug": "rcp45"
    },
    {
      "name": "RCP 8.5",
      "slug": "rcp85"
    }
  ],
  "metrics": [
    {
      "name": "precipitation yearly average",
      "slug": "pr_yr_ens-avg_amon",
      "nex": true,
      "palette": "YlGnBu",
    },
    {
      "name": "maximum temperature ensemble average",
      "slug": "tasmax_ens-avg_amon",
      "nex": true,
      "palette": "YlOrRd",
    },

    /* ... */

  ]
};

Photos

A basic fullscreen photo viewer.

EcoEngine

How do I run the project locally?

Install the dependencies

npm install

Run the dev server

npm start

Holos integration

A django/ninja2 compatible template has been added to the root of the build directory. This can be used as a ninja2 include to bring in the markup needed to run this application without the header and footer. The following files need to be linked in the main document:

  • static/stamen.css (in the document head)
  • js/ecoengine.min.js (at the bottom of the document body)

FYI: There is now only one JS file with dependencies and application code combined