UC HerbarIum

Overview

The University of Cincinnati has a unique collection of preserved plant, fungi and lichen (moss) specimens and more. It is housed in the building right across from Rhodes Hall. Some of these specimens date back hundreds of years and many were collected from sites around the world. Here are some images from the collection, taken from the herbarium website: https://herbariumcinc.com/

In this project the objective was to build a website where you could visualize all this data on bar-charts, pie-charts, and a map to ulitize the geographic information we have.

The data

For this project, we focused on the fungi, because they have the most recorded GPS coordinates and collection dates recorded. Download the data here: Fungi_UC_Herbarium.zip

This data was extracted from the online database, without any modification. It contains 8,000 entries, most of which have a GPS coordinate for where the sample was isolated.

The data is a CSV file and it contains a number of columns- the data attributes of our dataset. Some data attributes are sparsely populated with data value entries- which means many of the specimens did not record an entry for that data attribute. Others are more complete. Sparsely populated data fields may need to be filled in with 'NA' or other values, to ensure the data is properly formatted and loaded.

The fields we are interested in are with:

- where the sample was collected (GPS location, and scores of confidence in the location)

- when the sample was collected

- who collected the sample

- what kind of specimen is it? (classification)

- what notes were collected about the habitat and substrate (Growing location) of the collected sample

Libraries Used:

D3.js (also known as D3, short for Data-Driven Documents) is a JavaScript library for producing dynamic, interactive data visualizations in web browsers. It makes use of Scalable Vector Graphics (SVG), HTML5, and Cascading Style Sheets (CSS) standards.

Leaflet is an open source JavaScript library used to build web mapping applications. First released in 2011,^[2] it supports most mobile and desktop platforms, supporting HTML5 and CSS3. Among its users are FourSquare, Pinterest and Flickr.

Leaflet allows developers without a GIS background to very easily display tiled web maps hosted on a public server, with optional tiled overlays. It can load feature data from GeoJSON files, style it and create interactive layers, such as markers with popups when clicked.

Charts used

Timeline

Pie chart

Bar chart

Leaflet Map

Using the website

There is a dropdown just above the map. Which has 3 filters namely Year, Start Day of the Year and Class. Selecting either one of the options will render the data coloured according to that particular parameter.

2. The timeline on the top of the page has a draggable horizontal d3 brush which can be used to select values from a given year interval. All the other charts on the page get updated when we select the particular interval from the timeline chart.

3. There is also a brush on the map where we can select the points we want on the map and those points will get displayed on the map and all the other visualizations will get updated according to our selection. Inorder to use the leaflet brush press the Ctrl key and drag the chart that appears on the screen.

Live website - https://tinyurl.com/UC-herbarium

Here's a video demo of the project working

Page updated

Google Sites

Report abuse