Pockets of Familiarity
Gráinne Beltramo-Dolan
When we were looking at phylogenies in class, it struck me that the organisms that most people are most familiar with tend to come from very particular lineages. As we look at organisms that are more closely related to ourselves and to the organisms we think about in our daily lives, it seems like we can differentiate between taxa more easily: We can recognize a great deal more diversity in mammals and in flowering plants than in, for example, mosses or nematodes. In the phylogenetic tree of all organisms, there are a few pockets of familiarity amidst great swaths of taxa we don't give much attention to, despite many of them being important to the biosphere. We often group together organisms that are simply not part of the lineages we easily recognize, even if they are not monophyletic and not evolutionarily very closely related (such as "protists"). I remember learning some plant taxonomy for the first time in a college botany class two years ago and having somewhat of a similar feeling as I got from looking at phylogenies in this class, but even then we were just looking at the diversity in one lineage out of many in Eukarya.
I decided to create this visualization as an attempt to communicate this sense of scale. Instead of making a normal phylogenetic tree, I thought I could represent clades at different levels more effectively using nested circles. I also color coded each circle roughly by its height. Although the height doesn't really convey any information, the lack of change in color as you zoom in helps convey the scale. One detail to note is that the phylogeny featured here is not perfect, as many branches from the source phylogenetic trees were trimmed and a few were merged to better highlight the lineages that people tend to be familiar with, as well as in the interest of simplicity and space. I hope you find this to be an interesting visualization!
abeyaz. (2016, Dec. 19). You can use scrollLeft and scrollTop properties. Ex: document.getElementById("yourScrollElementId").scrollTop = 100 Or you can use jquery methods to [Comment on the online forum post How to set x and y scroll position on a div with overflow: scroll?]. Stack Overflow. https://stackoverflow.com/a/41218995
Amadan. (2010, June 25). Open your .svg file with a text editor (it's just XML), and look for something like this at the top [Comment on the online forum post Resizing SVG in HTML?]. Stack Overflow. https://stackoverflow.com/a/3120785
Borgar. (2009, July 18). Document sizes are a browser compatibility nightmare because, although all browsers expose clientHeight and scrollHeight properties, they don't all agree [Comment on the online forum post How to get height of entire document with JavaScript?]. Stack Overflow. https://stackoverflow.com/a/1147768
concentricpuddle. (2013, Nov. 28). This works for me. (Only tested on Opera so YMMV). <input type="submit" style="background:transparent; border:none; color:transparent;"> [Comment on the online forum post Totally invisible html buttons]. Stack Overflow. https://stackoverflow.com/a/20267884
CSS tutorial. (n.d.). W3Schools. Retrieved 1 Dec. 2023 from https://www.w3schools.com/css/
Fruhling, Z.. (2019, Mar. 29). Hanging indents in HTML and CSS for instructional designers. Resilient Educator. Retrieved 1 Dec. 2023 from https://resilienteducator.com/instructional-design/hanging-indents-in-html-and-css-for-instructional-designers/
How to indent paragraph text in HTML/CSS. (2020, Feb. 27). Coder Coder. Retrieved 1 Dec. 2023 from https://coder-coder.com/how-to-indent-paragraph-text-in-html-css/
HTML element reference. (n.d.). W3Schools. Retrieved 1 Dec. 2023 from https://www.w3schools.com/tags/
Paolo. (2010, Jan. 7). Try being explicit about all the border properties. For example: border:1px solid black; See Border shorthand property. Although the [Comment on the online forum post How to set a border for an HTML div tag]. Stack Overflow. https://stackoverflow.com/a/2020515
Pat. (2009, Aug. 19). Once you have a reference to your image, you can set its height and width like so [Comment on the online forum post Change image size with JavaScript]. Stack Overflow. https://stackoverflow.com/a/1297456
Urry, L. A., Cain, M. L., Wasserman, S. A., Minorsky, P. V., & Orr, R. B. (2019). Campbell Biology in Focus (3rd ed.). Pearson.
Zword. (2014, Jan. 20). Use overflow-y:auto for displaying scroll automatically when the content exceeds the divs set height. [Comment on the online forum post Make div scrollable]. Stack Overflow. https://stackoverflow.com/a/21227352
I affirm that I am submitting my own work with sources cited where appropriate.
Gráinne Beltramo-Dolan