added a visualization for the website card to blogpost

OHI-Science · Aug 22, 2023 · 571e837 · 571e837
1 parent 4448990
commit 571e837
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 14 deletions.
diff --git a/content/images/layers_blog/layer_connections.html b/content/images/layers_blog/layer_connections.html
diff --git a/content/images/layers_blog/layer_visualization.jpeg b/content/images/layers_blog/layer_visualization.jpeg
diff --git a/content/images/layers_blog/mar_connections.html b/content/images/layers_blog/mar_connections.html
@@ -5315,11 +5315,11 @@
 </head>
 <body style="background-color: white;">
 <div id="htmlwidget_container">
-<div id="htmlwidget-dfdcf95f6a391bd66353" class="visNetwork html-widget" style="width:960px;height:500px;">
+<div id="htmlwidget-b4f368693ee665c6edf7" class="visNetwork html-widget" style="width:960px;height:500px;">
 
 </div>
 </div>
-<script type="application/json" data-for="htmlwidget-dfdcf95f6a391bd66353">{"x":{"nodes":{"label":["Monterey Bay Aquarium Seafood Watch Recommendations","FAO Global Aquaculture Production","Mar_dataprep.RMD","Mariculture harvest","Mariculture sustainability score","Genetic escapes","Mariculture","Economies","Fisheries","Livelihoods","Species Condition"],"id":[8,9,10,0,1,2,3,4,5,6,7],"group":["Raw Data","Raw Data","Data Prep","Data Layer","Data Layer","Data Layer","Goal","Goal","Goal","Goal","Goal"]},"edges":{"from":[8,9,10,10,10,0,1,2,2,2,2],"to":[10,10,0,1,2,3,3,4,5,6,7],"weight":[1,1,1,1,1,1,1,1,1,1,1]},"nodesToDataframe":true,"edgesToDataframe":true,"options":{"nodes":{"shape":"dot","font":{"size":13}},"manipulation":{"enabled":false},"layout":{"hierarchical":{"enabled":true,"direction":"LR","sortMethod":"directed"}},"edges":{"arrows":"to"},"groups":{"Raw Data":{"color":"#fcbc6c","size":22,"shape":"dot"},"Data Prep":{"color":"#f07446","size":22,"shape":"dot"},"Data Layer":{"color":"#377cbf","size":22,"shape":"dot"},"useDefaultGroups":true,"Goal":{"color":"#a7354e","size":22,"shape":"dot"}},"height":"84%","width":"145%","physics":{"solver":"hierarchicalRepulsion","hierarchicalRepulsion":{"nodeDistance":150,"springLength":150}},"interaction":{"zoomView":false,"zoomSpeed":1}},"groups":["Raw Data","Data Prep","Data Layer","Goal"],"width":null,"height":null,"idselection":{"enabled":false,"style":"width: 150px; height: 26px","useLabels":true,"main":"Select by id"},"byselection":{"enabled":false,"style":"width: 150px; height: 26px","multiple":false,"hideColor":"rgba(200,200,200,0.5)","highlight":false},"main":null,"submain":null,"footer":null,"background":"rgba(0, 0, 0, 0)","legend":{"width":0.3,"useGroups":true,"position":"right","ncol":1,"stepX":100,"stepY":100,"zoom":false},"highlight":{"enabled":false,"hoverNearest":false,"degree":1,"algorithm":"all","hideColor":"rgba(200,200,200,0.5)","labelOnly":true},"collapse":{"enabled":false,"fit":false,"resetHighlight":true,"clusterOptions":null,"keepCoord":true,"labelSuffix":"(cluster)"},"tooltipStay":300,"tooltipStyle":"position: fixed;visibility:hidden;padding: 5px;white-space: nowrap;font-family: verdana;font-size:14px;font-color:#000000;background-color: #f5f4ed;-moz-border-radius: 3px;-webkit-border-radius: 3px;border-radius: 3px;border: 1px solid #808074;box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);"},"evals":[],"jsHooks":[]}</script>
-<script type="application/htmlwidget-sizing" data-for="htmlwidget-dfdcf95f6a391bd66353">{"viewer":{"width":450,"height":350,"padding":15,"fill":true},"browser":{"width":960,"height":500,"padding":40,"fill":false}}</script>
+<script type="application/json" data-for="htmlwidget-b4f368693ee665c6edf7">{"x":{"nodes":{"label":["Monterey Bay Aquarium Seafood Watch Recommendations","FAO Global Aquaculture Production","Mar_dataprep.RMD","Mariculture harvest","Mariculture sustainability score","Genetic escapes","Mariculture","Economies","Fisheries","Livelihoods","Species Condition"],"id":[8,9,10,0,1,2,3,4,5,6,7],"group":["Raw Data","Raw Data","Data Prep","Data Layer","Data Layer","Data Layer","Goal","Goal","Goal","Goal","Goal"]},"edges":{"from":[8,9,10,10,10,0,1,2,2,2,2],"to":[10,10,0,1,2,3,3,4,5,6,7],"weight":[1,1,1,1,1,1,1,1,1,1,1]},"nodesToDataframe":true,"edgesToDataframe":true,"options":{"nodes":{"shape":"dot","font":{"size":13}},"manipulation":{"enabled":false},"layout":{"hierarchical":{"enabled":true,"direction":"LR","sortMethod":"directed"}},"edges":{"arrows":"to"},"groups":{"Raw Data":{"color":"#fcbc6c","size":22,"shape":"dot"},"Data Prep":{"color":"#f07446","size":22,"shape":"dot"},"Data Layer":{"color":"#377cbf","size":22,"shape":"dot"},"useDefaultGroups":true,"Goal":{"color":"#a7354e","size":22,"shape":"dot"}},"height":"84%","width":"145%","physics":{"solver":"hierarchicalRepulsion","hierarchicalRepulsion":{"nodeDistance":150,"springLength":150}},"interaction":{"zoomView":false,"zoomSpeed":1}},"groups":["Raw Data","Data Prep","Data Layer","Goal"],"width":null,"height":null,"idselection":{"enabled":false,"style":"width: 150px; height: 26px","useLabels":true,"main":"Select by id"},"byselection":{"enabled":false,"style":"width: 150px; height: 26px","multiple":false,"hideColor":"rgba(200,200,200,0.5)","highlight":false},"main":null,"submain":null,"footer":null,"background":"rgba(0, 0, 0, 0)","legend":{"width":0.3,"useGroups":true,"position":"right","ncol":1,"stepX":100,"stepY":100,"zoom":false},"highlight":{"enabled":false,"hoverNearest":false,"degree":1,"algorithm":"all","hideColor":"rgba(200,200,200,0.5)","labelOnly":true},"collapse":{"enabled":false,"fit":false,"resetHighlight":true,"clusterOptions":null,"keepCoord":true,"labelSuffix":"(cluster)"},"tooltipStay":300,"tooltipStyle":"position: fixed;visibility:hidden;padding: 5px;white-space: nowrap;font-family: verdana;font-size:14px;font-color:#000000;background-color: #f5f4ed;-moz-border-radius: 3px;-webkit-border-radius: 3px;border-radius: 3px;border: 1px solid #808074;box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);"},"evals":[],"jsHooks":[]}</script>
+<script type="application/htmlwidget-sizing" data-for="htmlwidget-b4f368693ee665c6edf7">{"viewer":{"width":450,"height":350,"padding":15,"fill":true},"browser":{"width":960,"height":500,"padding":40,"fill":false}}</script>
 </body>
 </html>
diff --git a/content/news/data_layers.md b/content/news/data_layers.md
@@ -1,8 +1,8 @@
 ---
 title: "Exploring OHI Data Layers"
 name: "A deep dive into how data is incorporated into the OHI framework"
-bg_image: "/images/banners/tidal_zone.jpg"
-card_image: "/images/tidal_flat.jpg"
+bg_image: "/images/banners/tidal_zone.jpeg"
+card_image: "/images/layers_blog/layer_visualization.jpeg"
 preview_text: ""
 Date: 2023-08-10
 author: Adelaide Robinson
@@ -36,17 +36,17 @@ The mariculture data prep is contained within a single R script: [Mar_dataprep.R
 
 ### Exploring the Connections Between Layers
 
-As OHI fellows we spend a large proportion of our time creating data layers. Data layers are the foundational components used to calculate OHI scores. As a reminder: each data layer is a new data set created from one or more raw data sources.
+As OHI fellows we spend a large proportion of our time creating data layers. Data layers are the foundational components used to calculate OHI scores. As a reminder: each data layer is a new dataset created from one or more raw data sources.
 
 Now that we have a better idea of what a data layer is, we can take a deeper look at how they fit into the OHI model. Below you'll find an interactive visualization that shows the relationships between all layers included in OHI and the goals that they are incorporated into.
 
 *Click on a goal or data layer icon, or select a goal from the dropdown list to see which data layers impact each goal score. Hover over the goal and data layer icons to see their titles.*
 
-<div style="width: 950px; overflow: hidden; border: 1px solid #000;">
+<div style="width: 930px; overflow: hidden; border: 1px solid #000;">
   <iframe seamless src="/images/layers_blog/layer_connections.html" width="1000" height="570" style="margin-left: -20px; margin-right: -500px; margin-top: -60px; margin-bottom: 10px; border: none;" scrolling="no"></iframe>
 </div>
 
-------------------------------------------------------------------------
+Code for visualizations in this blogpost can be found in the [website GitHub repospitory](https://github.com/OHI-Science/OHI-website/blob/dev/scripts/layers_blogpost_visualizations.Rmd).
 
 This post was created by the [2023 OHI Fellows](https://oceanhealthindex.org/about/ohifellows/).
 

diff --git a/scripts/layers_blogpost_visualizations.Rmd b/scripts/layers_blogpost_visualizations.Rmd
@@ -71,6 +71,39 @@ goal_id <- layers_clean |>
   select(label = goals, id = goal_id)
 ```
 
+# Card Visualization
+
+Creating a simple visualization for the card on the website.
+
+```{r}
+#crate a data frame with all the elements we need
+nodes <- data.frame(label = c("Raw Data", "Data Prep", "Data Layer", "Goal"),
+                       id = c(0,1,2,3), 
+                       group = c("Raw Data", "Data Prep", "Data Layer", "Goal"))
+#define the connections
+edges <- data.frame(from = c(0, 1,2),
+                    to = c(1,2,3)) |> mutate(weight = 1)
+
+visNetwork(nodes,edges) |>
+  visHierarchicalLayout(
+  direction = "LR", sortMethod = "directed"
+) |> 
+  visEdges(arrows = 'to') |> #add arrows
+  visGroups(groupname = "Raw Data",
+            color = "#fcbc6c",
+            size =40,
+            borders = 0) |> 
+  visGroups(groupname = "Data Prep",
+            color = "#f07446",
+            size = 40) |> 
+  visGroups(groupname = "Data Layer",
+            color = "#377cbf",
+            size = 40) |> 
+  visGroups(groupname = "Goal",
+            color = "#a7354e",
+            size = 40)
+```
+
 # Mariculture Visualization
 
 This code is used to make a visualization that shows the data preparation and incorporation process for the mariculture data prep.
@@ -138,7 +171,7 @@ edges_new <- data.frame(from = c(8,9, 10, 10, 10), to = c(10,10, 0, 1, 2)) |>
 edges_final <- edges_new |> rbind(edges_mar) 
 
 #create the visualization
-mar_plot <- visNetwork(nodes_mar, edges_final) |> 
+visNetwork(nodes_mar, edges_final) |> 
    visHierarchicalLayout(
   direction = "LR", sortMethod = "directed"
 ) |> #make it a hierarchical layour
@@ -195,7 +228,7 @@ nodes <- rbind(layer_ids, goal_id) |>
                            label == "HAB" ~ "Habitat",
                            label == "ICO"~ "Iconic species",
                            label == "NP"~ "Natural Products",
-                           label == "SPP" ~"Species condition",
+                           label == "SPP" ~"Species Condition",
                            label == "LIV"~ "Livelihoods",
                            label == "LSP" ~ "Lasting Special Places",
                            label == "MAR" ~ "Mariculture",
@@ -244,7 +277,7 @@ nodes <- nodes %>%
 
 #create the plot
 
-layers_plot <-visNetwork(nodes=nodes, edges=edges) %>% 
+layers_plot <- visNetwork(nodes=nodes, edges=edges) %>% 
   visEdges(
     hoverWidth = 10,
     selectionWidth = 10,