Hi, I’m Annie -
I’m tech-driven designer specialized in data visualization and branding ->

Blooming Orchidaceaes

Data Visualization | d3.js | Generous Interface

Working with the Smithsonian Institution, this project is a generous interface designed to highlight the biodiversity of the orchidaceaes and visualize the relationship between pollinators and bloom characteristics.

Live Site

Github

The Smithsonian Gardens Orchid Collection has over 3000 records of orchidaceaes with varying accounts of information. However, I experienced friction right away trying to learn about orchids while not knowing what to search, browsing through foreign taxonomies , and digging through the pages.

To address the issue, I developed a data-driven generous interface that offer rich, browsable views as oppose to the traditional pervasive search interface. As audience who have little prior knowledge of the topic, a generous interface encourages interaction which drives discovery.

For instance, did you know some orchids only smell at night to attract their nocturnal pollinators? Or that some smell like rotten meat to attract flies? Are you curious which orchid can grow up to two times, if not more, your height?

THE DESIGN

A major challenge is packing all the information in one screen without overwhelming the user. Luckily, the images have a dark backdrop and is able to blend seamlessly with the dark theme, allowing the flowers and information to pop.

A feature I am working on and hoping to incorporate soon is introducing an AI component to imagine how the “ideal orchid” for each pollinator might look and smell like by feeding the algorithm the data point we extracted from the filters.

Figma Prototype

Iteration I: Visualizing Bloom Time

Version I: Visualizing Bloom Time

This visualization populates the "northern hemisphere" with bubble thumbnails of the orchids by different months and life forms (epiphytic, terrestrial, and lithophytic). You can toggle between the different life forms and see them comparatively, hover over the thumbnails to learn more and add those you want to see in a separate, exportable list.

This as a tool for visitors to explore the different kinds of orchids they would be able to see at different times. There's also an "on-exhibit" tag that could be helpful for those visiting the Smithsonian Gardens.

Live Site

Github

Iteration II: Visualizing Pollinator and Fragrance Relationship

The data entries for orchid fragrance such as “Sweet citrus (at night)” intrigued me: what determines how and when an orchid smells? With quick googling, I learned that the purpose of an orchid's fragrance is to attract pollinators, which led me to the research question is “How does the orchid fragrance correlate with their pollinators?”.

To uncover the relationship, I spent a lot of time binning the frangrance and pollinator descriptors to create the circular bar chart. By toggling across different pollinators, we can watch the circular bar charts shrink and grow while the photo strips on the two sides get populated with matching orchids.

Live Site

Github

Circular Fragrance Profile chart incorporated in the final design.

The individual orchid pop ups show the original data and links out to the Smithsonian records. I had a lot of fun exploring the connection among the records and is a significant step towards my final interface design.

SMITHSONIAN API AND DATA CLEANING

1. Fetch data using the Smithsonian API: Identify the query and breakdown the complex data structure to extract the relevant data.
2. Identifying the inconsistencies and parsing with python.
3. Documentation in Github.

Holy Ghost Orchid: Before

{
"bloom_time": "June to October" "pollination_syndrome": "Bee (male Euglossa)",
"fragrance": "Fragrant (strong). Sweet and fruity from afar, but spicy up close.",
"bloom_characteristics": "Erect inflorescence is 3-4.5 feet (89-140 cm) long 10-20 waxy, white flowers that open in succession. Flowers are 2\" (5 cm) across.",
}

Holy Ghost Orchid: Cleaned

{
"cleaned_bloom_months": [ 6, 7, 8, 9, 10 ],
"cleaned_peak_months": [ "Unknown" ],
"pollinator_types": "Euglossine Bees",
“fragrance_strength": "Strong",
"fragrance_types": "pleasant, sweet, fruity, spicy", "fragrance_notes": "fragrant, sweet, fruity, spicy", "fragrant_time": "day_and_night",
}

I parsed the bloom_time into months by defining a month_map and seasons_map. I also printed out all the fragrance descriptors to bin them into fragrance types, which determines the grouping of all the more specific fragrance note descriptions. The information with pollinator syndrome vary in complexity, so I parsed the data with key words like “euglossine bees”, “moths”, and “flies” and the rest as “others”.

Another challenge is identifying the inflorescence length and number of flowers from the “bloom characteristics” since the wording and units were inconsistent. After multiple rounds of python, I went back in to manually input the outliers that were not caught in the code. This was then followed by code to unify the length units to inches.