Well, holy cow. Can't believe it's the end of 2019. I've defended my proposal successfully, been published (and as first-author), had my abstract to a major international conference accepted for an oral talk, and many other milestones were met. I've been reflecting on this last year/the second year of my PhD program, and so many things feel wildly different from last year or even two years ago when I was working as a contractor lab technician/manager. Well, anyways, I'm here today to recap on the progress I've made for my data visualization class and that coral project I mentioned several months ago (oops). It's not quite at where I want it to be, but I still feel really proud of it. As with all languages, not just coding ones, learning a language and knowing it are very different - and this was the main challenge for me. I breezed through the CSS and HTML tutorials I initially took, but when it came to designing the actual website, it was a giant roadblock. Nothing, literally nothing, worked. I have no idea why the background is blue, but this is literally what the opening page looked like at the not-so-beginning. Ouch. Then came the nightmare of the coral drawings. I recall spending 30 minutes in Michael's store searching top to bottom for a tracing pad to make those hand drawn corals, which I ended up abandoning in the final product for the class. Ugh. Then came the nightmare of replacing local png's from my computer with embedded svg's (I wanted to stop relying on local files and to have the end result consist of a single file, and I didn't want to have to upload the files to a hosting site online). Every single time you copy and paste a file from Adobe Illustrator into the html file, the tags assigned to each element are the same, but since I have more than 5 different svg files, the css keeps getting re-written for the first css elements, resulting in a bunch of color and line changes in the existing svgs. Grr. But not to worry, some simple search and replace moves fixed that issue, but had to be done every single time I updated an illustration, which, before the fading borders were removed, were at least 2,000 lines of code long. The next challenge was the interactive map of major reefs across the world and a tooltip trick that would ~just ~not~ work~. I'll go ahead and spoil it for you, at the request of my professor, I wound up removing the interactivity of it after two weeks of tinkering/smashing my head on the code (including the Thanksgiving break) since there were so little data points in the working version. However, not all is wasted, because I still have plans after the semester to go ahead and add +300 reefs that are of lesser importance (the points will be smaller in size) and at that point, the interactivity will be necessary. You know what would be awesome? To polish up the D3 tricks I've learned throughout the semester (but have not implemented) and insert the option of switching back and forth between the major reefs map and the more detailed one. Just sayin'. Another huge accomplishment that I made, which now seems really small, but took a least a week and help from some wonderful geniuses to get done, was adding text to those svg's. When you try to copy and paste a file with text in Adobe Illustrator into an html file, only the text in the file will paste over. So like Edison's attempts at making a lightbulb, I learned many, many ways how NOT to do this (I realize there is a lot of heated debate over Edison's true role in the invention/improvement of a lightbulb, but you get my point). In the end, I had to embed a text element within the a circle tag in each svg, which was easy enough for the map and timelines (more on that later), as I just needed text for each circle, but I had to go and add invisible circles within those svg's that didn't already have a circle element, such as in the one with a bunch of sea critters. My recommendation to my future self and others, when it comes to images, just host it somewhere on the internet, like a private repository in Github, it's definitely not worth the pain of going through hundreds to thousands of lines of code trying to figure out where you can stick a text element without making the whole thing go blank. Finally, the last and most difficult challenge was the timeline. Oh, how ambitious I was. In theory, this timeline would have had a "scroll-telling" effect where the reader would start at the beginning, or surface of the reef, and as they scrolled, the reef would stay stationary, the timeline would advance further into the past. However, the way I designed it, the reef would also be slowly descending into deeper water, so there would be two speeds of scrolling. Unfortunately, I wasn't able to figure it out, and I had to stick with a static timeline. In the future, I think I'll stick with a static reef backdrop, and a scrollytelling style of text, that way only one part has to move and at a single speed. Some other changes I plan to make in iterating versions are playing with the removal of the blue backgrounds of the illustrations, I'm not a fan *at all* but some kind of background is definitely needed with a bland background color for the page as a whole. I wonder what giving a background color to the page will look like?... I also will be incorporating more illustrations, particularly for the bleaching and anatomy sections, as they are currently empty and need a dazzle in them. I will need to forget about embedding the svg codes if I want to retain my sanity....Finally, I am going to be giving the illustrations for the dinoflagellates and the sea critters an upgrade - I don't like how the dinoflagellates look, and the sea critters deserve a little more detail rather than just a silhouette. A final summarizing thought on my project: While it might not look like much, I'm very proud of this project, as it encompasses so many things I had to learn or really work on throughout the semester, particularly web design with html and css, as well as just pure creativity. I'm definitely an empirical mind, and feel really uncomfortable with anything of a creative nature. My best art at home is a paint-by-numbers for adults where the painting came as a canvas filled with smaller shapes that make up the whole image and each one has a number indicating what color to paint it, and I could barely handle that. Because of this weakness, I decided to work on a project that not only had great importance for me and fills a gap on the internet, but also required skills that I didn't already have, and I stayed away from programs I'm more fluent in, like R (I use that program for work almost every day, definitely every week). After all, corals truly are vital animals, and yet are in danger of extinction due to climate change, but could be saved if we were able to reduce our CO2 emissions, reduce our plastic consumption, and stop polluting the coastlines with our waste.
0 Comments
Leave a Reply. |
Don't mind me...Just a collection of thoughts and rants I've created as I stumble through graduate school... Archives
December 2019
Categories |