Annie is a designer who grew up drawing, fell in love with branding, ventured into data visualization, and now bridges all her skills through crafting visuals that tell a story ... ->
Data Visualization | d3.js | Generous Interface | Python
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 taxonomies that mean nothing to me, and digging through the pages to find single pieces of information.
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 that I am working on and hoping to incorporate soon is introducing an AI component to imagine how the “ultimate orchid” might look like by feeding the algorithm the data point we extracted from the filters.
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.", }
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.
ITERATION I: VISUALIZING BLOOM TIMES 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.
I envision 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.
There is a lag from loading large images as well as some positioning difficulties.
I later figured out how to fetch a smaller image size by setting image parameters to avoid the lag. I also implemented the individual orchid modal that links to the Smithsonian records in my final design.
ITERATION II: VISUALIZING FRAGRANCES 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.
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.