get all icons to highlight

[bbest]

Originally tried loading infographic (svg, csv of links, modals/*) here:

• infographic.html

But then had to strip of existing webpage JS/CSS for simple Rmd to render here to get working:

• infographic_r.html

But even that seems to not actual work now for some reason.

[bbest]

Actually, it seems to be mostly working (was a Google Chrome cache problem), except for some icons not showing up?

eg red-grouper:

• icons to data | fk-esr-info - Google Sheets: data got matched to icon
• but the icon does not highlight on mouseover in infographic_r.html

So is there a problem in the Adobe Illustrator file (.ai) with the id or some sort of masking, or in the export from (.ai) to (*.svg)?

• assets/svg
  • FKIEA_Ecosystem.ai
  • FKIEA_Ecosystem.svg

[bbest]

To get this R-based version of the infographic working, marinebon.org/fk-esr-info/infographic_r.html (NOTE the _r version):

• svg: assets/svg/FKIEA_Ecosystem.svg
• Adobe Illustrator: assets/svg/FKIEA_Ecosystem.ai
  • Export as SVG

[superjai]

Hey @bbest - progress! Infographic_r.html is fully working and infographic.html is almost entirely working. There were multiple issues that I worked through.

1. The dependencies of infographiq.js in Infographic_r.html were contained within a folder (libs) that no longer existed. The required js and css files were still around, just rearranged into a different folder structure - I updated infographic_r.html so that the required js and css files could be located.
2. The infographiq function link_svg used at the very end of infographiq.html called a local version of the csv file that didn't work. Using the google spreadsheets version of the csv (which has a very different column structure) did work.
3. As you surmised, there was a masking problem with the svg. Let's take a look at the image in Illustrator:

Let's zoom in on the Layer panel:

The problem lay in the SURFACE-WAVES layer. This layer contained a rectangle that overlaid the entire image. As a result, all clickable elements below this rectangle in the layer order were not able to be clicked. I solved the issue by moving SURFACE-WAVES down in the layer order:

The bottom line is that clickable elements can't have anything overlaying them in the layer order. I have updated the instructions for image creation in the nms4r documentation to clearly state this. In the future, as you have said, this should be sitting in the documentation for infographiq - but since that doesn't exist at the moment, I figure nms4r is a good placeholder.

4. Resaving the image, after solving the layer problem, somehow fixed the cross-browser display problem. The infographic now displays correctly on my iMac (Chrome, FireFox, and Safari) and iPhone (Chrome and Safari).
5. One last issue to be solved! The bullet list of links in infographic.html only shows below the image and the color isn't quite right. There is some css conflict going on here that I couldn't quite resolve yet.

[bbest]

This is wonderful @superjai! Great work fixing and detailing the aspects of this.

There are still a few layers like "Percent cover of reef building corals" in infographic_r.html for which I can see the highlighted elements (as yellow outlines) show up when rolling over the Table of Contents (toc), but not when rolling over the svg.

This layer in the FKIEA_Ecosystem.ai has some masking of elements that is probably impacting its ability to be highlighted.

It'd be great if you could systematically visit each to confirm highlight functionality in both the toc and svg to confirm functionality. Towards this aim, I started a new column highlight_workingsvg&_toc in icons to data | fk-esr-info - Google Sheets.

Rock on 🤘

[superjai]

Hey @bbest. You are on the email I sent around about this, but I thought it would be good to repeat the message here so we have a full record of this exchange here.

For several of the icons, the lack of highlighting was due to a layer ordering problem that I have fixed. For the remaining non-highlighting icons, the problem is that they are not named in the svg.

So, I am going to need input from the group to fix this one. Either an existing unnamed element in the svg needs to be named or some new art elements need to be added to the svg. In the google doc that I sent around, I included a table to get input on this issue.

Here is the list of the missing icons:

• brain-corals
• chlorophyll
• coral-living-tissue
• coral-species-richness
• housing-disruption
• maritime-heritage
• phytoplankton-taxonomy

In the svg below, I show the multiple non-background elements that are currently unnamed as red boxes:

[bbest]

Hi Jai,

Please see Issues with infographic image https://docs.google.com/document/d/10GDNT6mVmQT41rS-D5GCk60yqQfAL5fDDRaLperxv_w/edit#

BB’s comments/fixes

I went through each of the missing icons and described their status in relating icons to data https://docs.google.com/spreadsheets/d/1_o8HOiZ_35uajupEsw6xLSsneTBTeLh0bqvFQvMpBNY/edit#gid=0 :icon to FKIEA_Ecosystem.ai https://github.com/marinebon/fk-esr-info/blob/main/assets/svg/FKIEA_Ecosystem.ai :layer name:

brain-corals https://docs.google.com/document/d/10GDNT6mVmQT41rS-D5GCk60yqQfAL5fDDRaLperxv_w/edit#heading=h.m9w9xz11h4oz

chlorophyll-a https://docs.google.com/document/d/10GDNT6mVmQT41rS-D5GCk60yqQfAL5fDDRaLperxv_w/edit#heading=h.g4bzjivcho6s

coral-living-tissue https://docs.google.com/document/d/10GDNT6mVmQT41rS-D5GCk60yqQfAL5fDDRaLperxv_w/edit#heading=h.bf610ujoefct

coral-species-richness https://docs.google.com/document/d/10GDNT6mVmQT41rS-D5GCk60yqQfAL5fDDRaLperxv_w/edit#heading=h.lblakn4sfrd5

housing-disruption https://docs.google.com/document/d/10GDNT6mVmQT41rS-D5GCk60yqQfAL5fDDRaLperxv_w/edit#heading=h.90dtme9ewls

maritime-heritage https://docs.google.com/document/d/10GDNT6mVmQT41rS-D5GCk60yqQfAL5fDDRaLperxv_w/edit#heading=h.v2879gjc32rn

phytoplankton-taxonomy https://docs.google.com/document/d/10GDNT6mVmQT41rS-D5GCk60yqQfAL5fDDRaLperxv_w/edit#heading=h.pm5e2s386x3n

On Tue, Feb 23, 2021 at 6:36 AM Jai Ranganathan notifications@github.com wrote:

Hey @bbest https://github.com/bbest. You are on the email I sent around about this, but I thought it would be good to repeat the message here so we have a full record of this exchange here.

For one of the icons (harmful-algal-blooms), the lack of highlighting was due to a layer ordering problem that I have fixed. For the remaining non-highlighting icons, the problem is that they are not named in the svg.

So, I am going to need input from the group to fix this one. Either an existing unnamed element in the svg needs to be named or some new art elements need to be added to the svg. In the google doc that I sent around, I included a table to get input on this issue.

Here is the list of the missing icons:

• brain-corals
• chlorophyll
• coral-living-tissue
• coral-species-richness
• housing-disruption
• macroalgae
• maritime-heritage
• phytoplankton-taxonomy
• reef-builders
• sponges-soft-corals

In the svg below, I show the multiple non-background elements that are currently unnamed as red boxes: [image: blank_layers] https://user-images.githubusercontent.com/1744300/108837939-d0db4d80-7587-11eb-93a2-2d2107327b96.png

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/marinebon/fk-esr-info/issues/1#issuecomment-784138209, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAVUWCPN4XQYSLU6LUHUQ5TTAOHKFANCNFSM4WT7JUOQ .

-- Ben Best, PhD Environmental Data Scientist EcoQuants.com http://ecoquants.com/ calendar: LA (PDT) https://calendar.google.com/calendar/embed?src=ben@ecoquants.com&ctz=America/Los_Angeles , NY (EDT) https://calendar.google.com/calendar/embed?src=ben@ecoquants.com&ctz=America/New_York +1.805.705.9770 <(805)%20705-9770>

[superjai]

Hey @bbest. I hadn't noticed the image links in the icon column before - that was helpful to see.

The trouble nonetheless was the same - the unhoverable icons weren't named in the svg. However, with the use of those image links, I was able to go into the illustrator file and label the appropriate polygons. Because of the complex layering in the background of the image (which is where most of the elements to be dealt with live), it was a little tricky to get this to work right. In particular, the housing-disruption elements are now a little darker than they were before (since I also had to do a lot of layer reorganization to make this all work). Take a look.

Before:

After:

So everything is now taken care of in this image, with the following exception:

• chlorophyll

The trouble here is the image element to be used is already being used by phytoplankton-taxonomy.

As a further issue infographic.html, still doesn't work properly. There is the issue I mentioned earlier that the color of the list items is off and that they only show below the image. I just noticed though that the text on hover doesn't appear.

[superjai]

Notes from Kelly:

I've addressed lots of our needs from our last meeting. Here's a few comments on updates and fixes needed prior to our next meeting, just so I don't forget:

• [x] There's no graph or data provider link showing up in the modal window, nor is the hurricane icon highlighting for the indicator "Value of coastal protection of coral reefs and mangroves", though I've added the data to the folder.
• [x] The data provider line and links on a few indicators are missing/not showing up in the modal windows (the links are included on the icons to data sheet):
  • yellowtail abundance
  • total tourism value
  • housing units connected to wastewater treatment
  • stone crab commercial fishing trips
  • Tourism population via tax revenue
  • Number of participants in Sanctuary maritime heritage stewardship events
• [x] We need to remove the indicator "brain-corals" listed under living resources, that one doesn't have a 1:1 selected indicator matching, we just wanted to include a brain coral illustration in the ecosystem conceptual model as a "spare". We also need to remove the indicator "phytoplankton-taxonomy" listed under Sanctuary Waters - that was selected indicators but there's no data available, so we had made the illustration as a placeholder in case data becomes available.
• [x] Change listed indicator in menu under Sanctuary Waters from "harmful-algal-blooms" to Harmful Algal Blooms- red tide current status. Modal window won't show a trendline but rather the link to the FWC FWRI current status map.
• [x] I know this is picky, but I just noticed that the sea fan silhouette highlights as well as the mounding coral for the indicator "Percent cover of reef building corals", and sea fans aren't reef building corals, but rather soft corals. Can we remove the highlight for the sea fan for that layer?
• [x] The graph isn't showing up in the modal pop up window for "Reef fish species diversity", not sure why.
• [x] The label that pops up for the trendline (axis label) for "Beach closures due to presence of fecal indicator" needs to be changed to Number of Fecal Advisories at Keys public beaches (currently incorrectly says Lower Keys but this is data for all Keys beaches now)- sorry, I don't see where those read from, it doesn't seem to be a column in the icons to data sheet.
• [x] The chlorophyll a graph isn't displaying for some reason.
• [x] Sea Surface Temperature isn't graphing in the modal pop up window, and the axis labels, trend line label and data provider aren't showing up, but this may be under construction after our last talk (we had discussed whether we wanted this to be yearly averages, but no, we still want it to be daily).

I've updated all the caption blurbs and labels field in the icons to data sheet. This reminds me that we need to give credit and include a link for all of this work and these summaries (and their references) to our full ESR technical report, somewhere on this page. The report is entitled Florida Keys Integrated Ecosystem Assessment Ecosystem Status Report, authored by K.A. Montenero, C.R. Kelble and E. Spooner (2020). Florida Keys integrated ecosystem assessment ecosystem status report (noaa.gov) https://doi.org/10.25923/f7ce-st38

I've added the stationary images needed for the modal windows for housing disruption and mangrove shoreline spatial distribution to the folder. Please be sure to remove the note and link that currently displays in the modal pop up windows that directly allows edits to the data folder.

[superjai]

Everything in Kelly's list is fixed, except the following two items as it requires input from them. I have asked for input via email:

• [ ] Credits and links to full ESR technical report need to be added. I couldn't quite tell where credits and links should be placed.

• [x] The modal windows for housing disruption and mangrove shoreline spatial distribution. I am not 100% certain, but I think it is wanted for these currently-blank modal windows to show some information. I searched through the icons to data spreadsheet as well as the fknms_esr_indicator_data Google Drive folder and couldn't quite figure out what was wanted to be shown in the modal windows.

[bbest]

Per:

• [x] The modal windows for housing disruption and mangrove shoreline spatial distribution.

From Kelly M:

I've added the stationary images needed for the modal windows for housing disruption and mangrove shoreline spatial distribution to the folder. Please be sure to remove the note and link that currently displays in the modal pop up windows that directly allows edits to the data folder.

[bbest]

From Kelly M:

I've updated all the caption blurbs and labels field in the icons to data sheet. This reminds me that we need to give credit and include a link for all of this work and these summaries (and their references) to our full ESR technical report, somewhere on this page. The report is entitled Florida Keys Integrated Ecosystem Assessment Ecosystem Status Report, authored by K.A. Montenero, C.R. Kelble and E. Spooner (2020). Florida Keys integrated ecosystem assessment ecosystem status report (noaa.gov

Currently, the website links in the Menu "DOWNLOAD THE REPORT" to Florida Keys integrated ecosystem assessment ecosystem status report at library.noaa.gov. Should we do something more?

[bbest]

Hi @superjai,

Similar to housing disruption and mangrove shoreline, there are two remaining manual_modal = TRUE to deal with in icons to data | fk-esr-info. Might you have the time before our meeting tomorrow to drop in screenshots or similar for these icons (notes): provider_link?

• [ ] DO (map image or jump to MBON Seascapes): Data – NOAA's Atlantic Oceanographic and Meteorological Laboratory
• [x] harmful-algal-blooms-red-tide-current-status (not data- jump to FWC FWRI link): Red Tide Current Status

[superjai]

Notes from Kelly:

• Sorry, there is no MBON seascape for oxygen, I thought there was. I'm working on cleaning and summarizing some raw DO data I just got.

[superjai]

I am closing this issue because it is wrapped up except for two small components that were transferred to their own issues #20 #21