Redesigning Yield Map Plots for Comprehension and Usability

class:title-slide-custom

<style>

/* colors: #EEB422, #8B0000, #191970, #00a8cc */
/* define the new color palette here! */
a, a > code {
  color: #8B0000;
  text-decoration: none;
}

.title-slide h2::after, .mline h1::after {
  content: '';
  display: block;
  border: none;
  background-color: #8B0000;
  color: #8B0000;
  height: 2px;
}

.remark-slide-content {
  background-color: #FFFFFF;
  border-top: 80px solid #8B0000;
  font-size: 20px;
  font-weight: 300;
  line-height: 1.5;
  
  background-image: url(css/UNL.svg);
	background-position: 2% 98%;
	background-size: 10%;
	border-bottom: 0;
}

.inverse {
  background-color: #8B0000;
  
  
	
  
}

.remark-slide-content > h1 {
  font-family: 'Roboto';
  font-weight: 300;
  font-size: 45px;
  margin-top: -95px;
  margin-left: -00px;
  color: #FFFFFF;
}

.title-slide {
  background-color: #FFFFFF;
  
  background-image:  url(css/UNL.svg);
	background-position: 98% 98%;
	
	background-size: 20%;
	border-bottom: 0;
	border: 10px solid 	#8B0000;
	
}

.title-slide > h1  {
  color: #111111;
  font-size: 32px;
  text-shadow: none;
  font-weight: 500;
  text-align: left;
  margin-left: 15px;
  padding-top: 80px;
}
.title-slide > h2  {
  margin-top: -25px;
  padding-bottom: -20px;
  color: #111111;
  text-shadow: none;
  font-weight: 100;
  font-size: 28px;
  text-align: left;
  margin-left: 15px;
}
.title-slide > h3  {
  color: #111111;
  text-shadow: none;
  font-weight: 100;
  font-size: 28px;
  text-align: left;
  margin-left: 15px;
  margin-bottom: -20px;
}

body {
  font-family: 'Roboto';
  font-weight: 300;
}

.remark-slide-number {
  font-size: 13pt;
  font-family: 'Roboto';
  color: #272822;
  opacity: 1;
}

.inverse .remark-slide-number {
  font-size: 13pt;
  font-family: 'Roboto';
  color: #FAFAFA;
  opacity: 1;
}

.title-slide-custom .remark-slide-number {
  display: none;
}

.title-slide-custom h3::after, .mline h1::after {
  content: '';
  display: block;
  border: none;
  background-color: #8B0000;
  color: #8B0000;
  height: 2px;
}

.title-slide-custom {
  background-color: #FFFFFF;
  
  background-image:  url(css/UNL.svg);
	background-position: 98% 98%;
	
	background-size: 20%;
	border-bottom: 0;
	border: 10px solid 	#8B0000;
	
}

.title-slide-custom > h1  {
  color: #111111;
  font-size: 40px;
  text-shadow: none;
  font-weight: 500;
  text-align: left;
  margin-left: 15px;
  padding-top: 80px;
  padding-bottom: 10px;
}
.title-slide-custom > h2  {
  margin-top: -25px;
  padding-bottom: 30px;
  color: #111111;
  text-shadow: none;
  font-weight: 100;
  font-size: 32px;
  text-align: left;
  margin-left: 15px;
}
.title-slide-custom > h3  {
  margin-top: -25px;
  padding-bottom: -25px;
  color: #111111;
  text-shadow: none;
  font-weight: 100;
  font-size: 32px;
  text-align: left;
  margin-left: 15px;
}
.title-slide-custom > h4  {
  color: #111111;
  text-shadow: none;
  font-weight: 100;
  font-size: 28px;
  text-align: left;
  margin-left: 15px;
  margin-bottom: -30px;
  padding-bottom: -25px;
}
.title-slide-custom > h5  {
  color: #111111;
  text-shadow: none;
  font-weight: 100;
  font-size: 24px;
  text-align: left;
  margin-left: 15px;
  margin-bottom: -40px;
}

</style>

<br><br><br>
## Redesigning Yield Map Plots for Comprehension and Usability
### 2023 SDSS
#### Alison Kleffner, Susan Vanderplas
#### Department of Statistics, University of Nebraska - Lincoln
##### <svg aria-hidden="true" role="img" viewBox="0 0 512 512" style="height:1em;width:1em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:black;overflow:visible;position:relative;"><path d="M0 128C0 92.65 28.65 64 64 64H448C483.3 64 512 92.65 512 128V384C512 419.3 483.3 448 448 448H64C28.65 448 0 419.3 0 384V128zM48 128V150.1L220.5 291.7C241.1 308.7 270.9 308.7 291.5 291.7L464 150.1V127.1C464 119.2 456.8 111.1 448 111.1H64C55.16 111.1 48 119.2 48 127.1L48 128zM48 212.2V384C48 392.8 55.16 400 64 400H448C456.8 400 464 392.8 464 384V212.2L322 328.8C283.6 360.3 228.4 360.3 189.1 328.8L48 212.2z"/></svg> [akleffner@huskers.unl.edu](akleffner@huskers.unl.edu)
##### <svg aria-hidden="true" role="img" viewBox="0 0 576 512" style="height:1em;width:1.12em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:black;overflow:visible;position:relative;"><path d="M575.8 255.5c0 18-15 32.1-32 32.1h-32l.7 160.2c0 2.7-.2 5.4-.5 8.1V472c0 22.1-17.9 40-40 40H456c-1.1 0-2.2 0-3.3-.1c-1.4 .1-2.8 .1-4.2 .1H416 392c-22.1 0-40-17.9-40-40V448 384c0-17.7-14.3-32-32-32H256c-17.7 0-32 14.3-32 32v64 24c0 22.1-17.9 40-40 40H160 128.1c-1.5 0-3-.1-4.5-.2c-1.2 .1-2.4 .2-3.6 .2H104c-22.1 0-40-17.9-40-40V360c0-.9 0-1.9 .1-2.8V287.6H32c-18 0-32-14-32-32.1c0-9 3-17 10-24L266.4 8c7-7 15-8 22-8s15 2 21 7L564.8 231.5c8 7 12 15 11 24z"/></svg> [https://alison-kleffner.netlify.app/](https://alison-kleffner.netlify.app/)
##### <svg aria-hidden="true" role="img" viewBox="0 0 496 512" style="height:1em;width:0.97em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:black;overflow:visible;position:relative;"><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg> [alisonkleffner](https://github.com/alisonkleffner)
<br><br>
.medium[*Slides: https://alisonkleffner.github.io/presentations/SDSS_2023/index.html#1*]

---
class:primary
# Outline

.pull-left[

<i class="fab fa-envira" role="presentation" aria-label="envira icon"></i> Data Intensive Farm Management

<i class="far fa-map" role="presentation" aria-label="map icon"></i> Perceptual Issues with Current Maps

<i class="far fa-chart-bar" role="presentation" aria-label="chart-bar icon"></i> Redesign Process

<i class="fas fa-spinner" role="presentation" aria-label="spinner icon"></i> Future Work

]

---
class:inverse
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
.center[
# Data Intensive Farm Management 
]

---
class:primary
#Background

+ With a projected increase in future crop demand, researchers are conducting studies on crop input application to increase yield, focusing on sustainability (Tilman, Balzer, Hill, and Befort, 2011) 
+ Crop Input Example: Nitrogen Fertilizer
  - Nitrogen is an essential component of food production as allows plants to photosynthesize efficiently (Maheswari, Murthy, and Shanker, 2017)  
  - Nearly half of the nitrogen fertilizer supplied to the field is not used by the crops (Billen, Garnier, and Lassaletta, 2013) 
  - This excess nitrogen can be harmful
+ Hence, research needs to be conducted on determining input rates that increase crop yield, and are also more sustainable.

.center[

<img id='imgtractor' src='images/tractor.png' alt='Tractor' width='40%'>

<div id='modaltractor' class='modal'>
  
  <img class='modal-content' id='imgmodaltractor'>
  
  <div id='captiontractor' class='modal-caption'></div>
</div>

]

---
class:primary
# Data Intensive Farm Management (DIFM)

**Problem**: Address inefficient application of crop inputs to farm fields worldwide

**Methods**: On-Farm Precision Experimentation
- Conduct experiments using site-specific inputs 
- GPS-reliant technology

**Goals**
- Develop infrastructure to develop and analyze these experiments
- Find economically optimal application rate to increase profit while reducing environmental impacts.

[Project Website](http://difm-cig.org/)

.center[

<img id='imglogo' src='images/logo.png' alt='Data Intensive Farma Management (DIFM) Project' width='30%'>

<div id='modallogo' class='modal'>
  
  <img class='modal-content' id='imgmodallogo'>
  
  <div id='captionlogo' class='modal-caption'></div>
</div>

]

???

A common issue with farming practices across the world is the inefficient application of crop inputs, like nitrogen, on farm fields. This inefficient application of crop input impacts profit and the environment. For example nitrogen fertilizer input that is not used by crops can pollute water bodies by causing the overstimulation of growth of aquatic plants and algae, impacting light. Thus, research needs to be conducted to study this issue so steps can be taken to address it. The purpose of the data intensive farm management project, a grant funded by the USDA-NRCS, is to generate the data necessary to understand this effect of crop input application on yield, so a more optimal level can be chosen. The data is generated through the use of On-Farm precision experimentation (OFPE). In an OFPE experiments are conducted on a field using field specific inputs where the experiment is implemented using a tractor that has GPS-reliant technology. DIFM wants to develop infrastructure (including the development of apps) to easily develop and analyze these experiments, with the end goal of finding economically optimal application rate to increase profits while reducing environmental impacts.

---
class:primary
# Trial Design

**Step 1**: Develop infrastructure to develop experiments using site-specific inputs

[Trial Design Tool](http://trialdesign.difm-cig.org/)

.center[

<img id='imgwelcomepage' src='images/welcome-page.png' alt='Homepage of Trial Design Tool' width='45%'>

<img id='imgTrial_Design' src='images/Trial_Design.png' alt='Example of A Trial Design' width='45%'>

<div id='modalwelcomepage' class='modal'>
  
  <img class='modal-content' id='imgmodalwelcomepage'>
  
  <div id='captionwelcomepage' class='modal-caption'></div>
</div>

<div id='modalTrial_Design' class='modal'>
  
  <img class='modal-content' id='imgmodalTrial_Design'>
  
  <div id='captionTrial_Design' class='modal-caption'></div>
</div>
]

**Output**: shape files that can be put into a farmer's tractor that allows them to carry out the experiments

???

First step is to develop the infrastructure to develop the experiments using site specific inputs. This was a project that I worked on last spring, where I developed a R Shiny app that is used as a prototype. In this tool, farmers are able to create site-specific experiments, using their field boundaries, desired plot lengths, and desired treatment variations they wanted to test. After the trial is designed, they can download shape files that they can put into their tractor to implement the study. Note: I did not write the background code for the trial design, my work was more on the design and usability. I helped enough with the background code to get everything to work.

---
class:primary
# Data Collection

**Step 2**: Conduct experiments and collect data

.center[

<img id='imgdata_collection' src='images/data_collection.png' alt='How Data is collected' width='45%'>

<div id='modaldata_collection' class='modal'>
  
  <img class='modal-content' id='imgmodaldata_collection'>
  
  <div id='captiondata_collection' class='modal-caption'></div>
</div>
]

Examples of Data Collected:
- As-applied
- Yield
- Location of measurements

???

This picture is an example of how the data we are using is collected. The blue/white dots in the middle are the treatment and the location at which the treatment is applied to the field. They yellow dots are locations where a crop is harvested and a yield measurement is taken. This process utilizes GPS and other equipment on tractors to collect the information. Examples, of some of the data that is collected that we utilize is the location of measurements and treatment, yield measure, and as-applied (amount of treatment that is actually applied to the field. Goal is the trial design, but sometimes a lag between different trial plots)

---
class:primary
# Explain the Results

**Step 3**: Explain the optimal management decisions, accounting for various factors

**How**: create a user interface, designed around explaining machine learning output to non-experts
  - Build trust in models
  - Learn how crop yield responds to different input application rates, field characteristics, and weather to hopefully increase profits. 
  
  
**One way to do this**: Visually explore the relationship between input application and yield through a graph
  - Show the spatial correlations between the application/treatment and yield in a way that is understandable to farmers and consultants. 
  - Develop perceptually optimal plots that communication this relationship. 
  
???

The last general step in this process is to analyze the data and explain the optimal decision management decisions, accounting for various factors (like weather, environmental and economics conditions). So we want to develop an user interface that is designed around explaining the machine learning output to non-experts to help inform decision. We want to do this to build farmer's trust in the models (we are providing them with useful information). Additionally, as a whole this will help us learn how crop yield responds to different input application rates, field characteristics, and weather with the goal to help increase profits. Currently we are working on the pieces to help explain these results, before putting it all together in an R Shiny app. One of these pieces of information that needs to be explained is to explore the relationship between input application and yield. As seen in previous parts of this presentation, there is a great benefit of plotting data, so we wanted to explore this relationship visually. Hence, we want to show the spatial correlations between the treatment application and yield in a way that is understandable to farmers and consultants. Additionally, we need to develop these plots so they are perceptually optimal.

---
class:inverse
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
.center[
# Current Maps 
]

---
class:primary
#Yield Maps Currently Used by DIFM

.center[

<img id='imgold_map' src='images/old_map.png' alt='Example 1' width='30%'>

<img id='imgjuxtaposedex' src='images/juxtaposed-ex.jpeg' alt='Example 2' width='50%'>

<div id='modalold_map' class='modal'>
  
  <img class='modal-content' id='imgmodalold_map'>
  
  <div id='captionold_map' class='modal-caption'></div>
</div>

<div id='modaljuxtaposedex' class='modal'>
  
  <img class='modal-content' id='imgmodaljuxtaposedex'>
  
  <div id='captionjuxtaposedex' class='modal-caption'></div>
</div>

Examples of two versions of this plot currently given to farmers/crop consultants in DIFM reports

]

???

Currently, here is two examples of the plots that are currently given in DIFM reports to farmers.

Ask the audience what principles of good graphics these violate?

---
class:primary
# Other Maps in  the Literature

.center[
Plenty of other iterations of trial design/yield maps used in the literature. Here's some examples
]

.pull-left[
.center[

<img id='imgmaxwell' src='images/maxwell.png' alt='Maxwell et al (2018)' width='70%'>

<div id='modalmaxwell' class='modal'>
  
  <img class='modal-content' id='imgmodalmaxwell'>
  
  <div id='captionmaxwell' class='modal-caption'></div>
</div>

<img id='imgpeerlinck' src='images/peerlinck.png' alt='Peerlinck et al (2018)' width='70%'>

<div id='modalpeerlinck' class='modal'>
  
  <img class='modal-content' id='imgmodalpeerlinck'>
  
  <div id='captionpeerlinck' class='modal-caption'></div>
</div>

]

].pull-right[

.center[

<img id='imgyieldplot2' src='images/yield-plot2.png' alt='Searcy (1997)' width='70%'>

<div id='modalyieldplot2' class='modal'>
  
  <img class='modal-content' id='imgmodalyieldplot2'>
  
  <div id='captionyieldplot2' class='modal-caption'></div>
</div>

<img id='imgtrevisan' src='images/trevisan.png' alt='Trevisan et al (2021)' width='60%'>

<div id='modaltrevisan' class='modal'>
  
  <img class='modal-content' id='imgmodaltrevisan'>
  
  <div id='captiontrevisan' class='modal-caption'></div>
</div>

]

???

Plenty of other yield maps that have been used in the literature, so while don't give trial plot information still provides yield information over space. These have some of the same problems as seen before. The first interpolates, so losing the site-specific information and continuous yield may not make sense. The second, has too many categories and coloring is not great (rainbow). The last plot uses suboptimal color scheme (bivariate color scheme in inappropriate, also doesn't go through white, members of the target audience (farmers) may be more likely to be colorblind, so avoid reds and greens)

---
class:primary
#Juxtaposed vs Superimposed Graphs

.center[

<img id='imgjuxvssup' src='images/jux-vs-sup.png' alt='Juxtaposed vs Superimposed Comparative Graphs (Gleicher, Albers, Walker, et al., 2011)' width='50%'>

<div id='modaljuxvssup' class='modal'>
  
  <img class='modal-content' id='imgmodaljuxvssup'>
  
  <div id='captionjuxvssup' class='modal-caption'></div>
</div>
]

+ **Juxtaposed graphs**: side by side (Gleicher, Albers, Walker, Jusufi, Hansen, and Roberts, 2011)
  - Benefits: less issues with visual clutter and easier to create
  - Drawbacks: comparative burden is placed on the user

+ **Superimposed graphs**: multiple objects in same coordinate system (Gleicher, Albers, Walker, et al., 2011)
  - Benefits: Easier to compare as users can use perception rather than memory
  - Drawbacks: clutter
  - Useful when spatial location is a key component of the comparison (Wang, Haleem, Shi, Wu, Zhao, Fu, and Qu, 2018)

---
class:primary
#Data Clutter with Superimposed Graphs

**Drawback**: clutter
+ General principle of graphical design: show data clearly (Cleveland, 1984; Gordon and Finch, 2015)
+ Overlap - multiple dots on top of one another
  - Obscures true number of dots, harder to find patterns
  - Visual cues, like color, becomes partially obstructed, thereby reducing search efficiency (Bravo and Farid, 2004a; Bravo and Farid, 2004b)
  - Can overburden human perception, causing errors in performing tasks (Huang, Eades, and Hong, 2009)
  
.center[

<img id='imgold_map' src='images/old_map.png' alt='Example 1' width='20%'>

<div id='modalold_map' class='modal'>
  
  <img class='modal-content' id='imgmodalold_map'>
  
  <div id='captionold_map' class='modal-caption'></div>
</div>
]

???

One of the first things we need to decided is whether we want to juxtapose or superimpose the trial design and yield information. Juxtaposed graphs are side by side plots that tend to have less issues with visual clutter and they are easier to create. A drawback however, is that the comparative burden is placed on the user (have to match things up correctly). The other option is to superimpose the graphs where multiple objects are in the same coordinate system. The benefit is that it is easier to compare as users can use perception rather than memory. These are additionally useful when spatial location is a key component of the comparison. However, the major drawback, as we saw with the DIFM plot is that clutter is a major issue. We decided to use superimposed graphs since spatial location is a key component for us and may be hard to compare in two different plot (hard to match up)

---
class:primary
#Comparative Burden with Juxtaposed Graphs

**Drawback**: Most of the comparative burden placed on users' memory
+ A mental image is relied on for comparison in these scenarios, as the user moves their
eyes between images (shifting focus). 
  - The plot contents may not be accurately formed in working memory, leading to potential errors when deriving patterns  (Vanderplas, Cook, and Hofmann, 2020; LYi, Jo, and Seo, 2021)
+ Lack of visual cues for locations

.center[

<img id='imgjuxtaposedex' src='images/juxtaposed-ex.jpeg' alt='Juxtaposed Example' width='35%'>

<div id='modaljuxtaposedex' class='modal'>
  
  <img class='modal-content' id='imgmodaljuxtaposedex'>
  
  <div id='captionjuxtaposedex' class='modal-caption'></div>
</div>

]

---
class:primary
#Color

+ Red-green color blindness is experienced by approximately 8% of men and 0.5% of women of
Northern European ancestry. 
  - Difficult to discriminate between these colors (Wong, 2011)

+ Stop-Light Color Scheme
  - Yellow has a highlighting effect
  - Univariate Scale more appropriate (magnitude only)

+ Same Color scheme for multiple variables
  - May cause confusion

+ Rainbow Color Scheme 
  - No inherent ordering of magnitude (Light and Bartlein, 2004) 
  - Extremes are visually close (red and violet) (Silva, Sousa Santos, and Madeira, 2011)

---
class:primary
#Number of Categories

Number of categorical scales should be limited to **5-7 categories** (Miller, 1956)
.pull-left[
- Due to working memory limits (Macdonald, 1999)
  + Harder for the user to distinguish between colors and remember the meaning of colors. 
- The load on the user’s working memory leads to an increase in the time it takes for the user to comprehend the plot (Huang, Eades, and Hong, 2009)
].pull-right[  
  
.center[

<img id='imgcategories' src='images/categories.png' alt='Example 1' width='50%'>

<div id='modalcategories' class='modal'>
  
  <img class='modal-content' id='imgmodalcategories'>
  
  <div id='captioncategories' class='modal-caption'></div>
</div>
]

]

**Next:** Redesign Process

???

Additionally, the number of categories on our scale for yield should be limited to 5-7 categories (DIFM plot and other plot 2 violates this). The categories need to be limited due to working memory limits and it makes it harder for the user to distinguish between colors and remember the meaning of what group the color is representing (might associate a color with the incorrect category). This load on the user's working memory lead to an increase in time for them to comprehend the plot, which is not something we want especially for non-experts.

Next I am going to walk through our redesign process (still currently in progress).

---
class:inverse
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
.center[
# Redesign
]

---
class:primary
#Redesign: Color Blending Part 1

.center[

<img id='imgAttempt1_2' src='images/Attempt1_2.png' alt='First Iteration' width='35%'>

<img id='imgAttemp1_3' src='images/Attemp1_3.png' alt='First Iteration without Trial Design Plot' width='35%'>

<div id='modalAttempt1_2' class='modal'>
  
  <img class='modal-content' id='imgmodalAttempt1_2'>
  
  <div id='captionAttempt1_2' class='modal-caption'></div>
</div>

<div id='modalAttemp1_3' class='modal'>
  
  <img class='modal-content' id='imgmodalAttemp1_3'>
  
  <div id='captionAttemp1_3' class='modal-caption'></div>
</div>
]

**Focus**: Superimpose the treatment and yield plots, while reducing the clutter 
+ Use of transparency to show both at same time
+ Interactive plot with *leaflet* (Cheng, Karambelkar, and Xie, 2022)
  - Can add and remove trial plot layer

Work that still needs to be done:
+ Color needs some work
  + different color schemes

???

My first iteration of the plot I was working on superimposing both the treatment and yield plot, but reducing some of the clutter. The yield points were transformed into polygons using the distance between points, swath width, and heading (green space around plot). This was done so each polygon is on it's own unique space and not overlapping. Used transparency for the trial plot to try and blend the colors with the trial design plot. Here is used an interactive plot using the leaflet package in R, which creates interactive web maps with JavaScript. This can be beneficial as can add/remove the trial plot so can only see the yield results if desirable.

So the plot now is not cluttered in the sense there's overlapping data points, but there's still work that needs to be done. For example, the coloring needs more work. Due to colorblind, red and green may not be good colors to use, they are just the default for those working on this project. Additionally, color blending still needs to be worked on to help differentiate high treatment/high yield, etc. Finally, the shading piece may not be as effective for paper plots, which some farmers may want to use. So eventually need to think how to do this with no color.

---
class:primary
#Redesign: Color Blending Part 2

**Focus**: Color/Scales

.pull-left[
.center[

<img id='imgattempt2' src='images/attempt2.png' alt='Second Iteration' =''>

<div id='modalattempt2' class='modal'>
  
  <img class='modal-content' id='imgmodalattempt2'>
  
  <div id='captionattempt2' class='modal-caption'></div>
</div>
]
].pull-right[

+ Working on blending using transparency
+ Categorical Groups for both variables
  - Trial Design treatment is a factor
  - Reduce number of colors for yield
  - Use quantiles to determine categories for yield (Brewer and Pickle, 2002)
]

???
Played with the transparency a bit more. Eventually would like to use the ggblend package, which is developing for the blending of objects. However, it doesn't work for polygon on top of polygon. Submit a bug report. Additionally, we introduced categorical groups for both variables. Trial Design was categorical to begin width. And I decided to use a categorical scale for yield to cut down on what needed to be blended. The breaks for yield were created using quantiles for the breaks. This has been shown in some research to be the best perceptually for categorical breaks.

---
class:primary
#Redesign: Bivariate Color Plot

**Alternative to color blending**

.center[

.pull-left[

<img id='imgcolormap4' src='images/color-map4.png' alt='Bivariate Color Map' width='100%'>

<div id='modalcolormap4' class='modal'>
  
  <img class='modal-content' id='imgmodalcolormap4'>
  
  <div id='captioncolormap4' class='modal-caption'></div>
</div>
]].pull-right[

+ **Benefit**: relationship between the variables is most important (Elmer, 2013) 
+ Recommendation: 3x3 scale (Leonowicz, 2003)  
  - + Quantiles (Biesecker, Zahnd, Brandt, Adams, and J.M, 2020)   
+ **Focus**: diagonal
  - Diagonal: grayscale color scheme. 
  - Upper left and lower right: complementary color scheme (Strode, Morgan, Thornton, Mesev, Rau, Shortes, and Johnson, 2020)
+ **Drawback**: Lose more detailed information

]

---
class:primary
#Redesign: Correlation

.center[

**Directly encode correlations between As Applied treatments and Yield**

]

.pull-left[
**Benefit**: Direct statement of correlation while maintaining some spatial orientation 
  - Explicit Encoding Layout (Gleicher, Albers, Walker, et al., 2011)
+ Bivariate color scale
+ Maintain some spatial information. 
  - Correlations may be impacted by field location
  
**Drawback**: complicated to connect the displayed relationship back to the data (Gleicher, Albers, Walker, et al., 2011)

].pull-right[

<img id='imgcorrplot' src='images/corr-plot.png' alt='Correlation' =''>

<div id='modalcorrplot' class='modal'>
  
  <img class='modal-content' id='imgmodalcorrplot'>
  
  <div id='captioncorrplot' class='modal-caption'></div>
</div>
]

???

Finally we can directly state the correlation between As Applied and Yield (explain how as applied differs from treatment design), while also keeping some of the spatial relationship. Can see for the most part, as application amount increase, so does the yield. Some areas where the inverse is true (more investigation, maybe lower, dirt differs, etc). Used a bivariate color scheme go through white color for zero. Maintaining some spatial information is importanct as correlation is impacted by field location. Eventually this information can be added to the plot (interactivity)

---
class:primary
# Redesign: Correlation with Scatterplot

**Add some context back**

.center[

<img id='imgcorrwithscat2' src='images/corr-with-scat2.png' alt='Hybrid Layout' width='40%'>

<img id='imgcorrwithscat3' src='images/corr-with-scat3.png' alt='Hybrid Layout with Hover' width='40%'>

<div id='modalcorrwithscat2' class='modal'>
  
  <img class='modal-content' id='imgmodalcorrwithscat2'>
  
  <div id='captioncorrwithscat2' class='modal-caption'></div>
</div>

<div id='modalcorrwithscat3' class='modal'>
  
  <img class='modal-content' id='imgmodalcorrwithscat3'>
  
  <div id='captioncorrwithscat3' class='modal-caption'></div>
</div>
]

+ A standard practice to overcome weakness of decontextualization is utilizing a hybrid comparative layout
(LYi et al., 2021). 
  - Juxtaposed scatterplot to the correlation plot
(combining the layouts of juxtaposition and explicit encoding). 
+ Interactivity connects the juxtaposed plots, where hovering over a trial plot in the correlation map highlights the corresponding points in the scatterplot used in the correlation calculation.

[Link](https://alisonkleffner.github.io/yield-map-redesign/interactive-example.html)

---
class:inverse
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
.center[
# Future Work
]

---
class:primary
#Conclusion/Future Work

**Next Step**: Obtain Feedback from those using the plots (farmers, crop consultants)
- Eventually do some testing between the layouts to see which farmers are reading more accurately.

**Eventually**: Develop a R Shiny app to explaining machine learning output to non-experts
- Build trust in the model predictions without requiring farmers to learn the details of statistical modeling.
- Will utilize these plots, among others
  + For example, accuracy of as applied treatment compared to trial design

???

Mention wanting to develop an R package to create these plots to automate some of these things for future use.

---
class:primary
# References
<font size="1">
<p><cite><a id='bib-biesecker-2020'></a><a href="#cite-biesecker-2020">Biesecker, C., W. Zahnd, H. M. Brandt, et al.</a>
(2020).
&ldquo;A Bivariate Mapping Tutorial for Cancer Control Resource Allocation Decisions and Interventions&rdquo;.
In: <em>Preventing chronic disease</em> 17 (E01).
DOI: <a href="https://doi.org/10.5888/pcd17.190254">10.5888/pcd17.190254</a>.</cite></p>

<p><cite><a id='bib-billen_nitrogen_2013'></a><a href="#cite-billen_nitrogen_2013">Billen, G., J. Garnier, and L. Lassaletta</a>
(2013).
&ldquo;The nitrogen cascade from agricultural soils to the sea: modelling nitrogen transfers at regional watershed and global scales&rdquo;.
In: <em>Philosophical Transactions of the Royal Society B: Biological Sciences</em> 368.1621, p. 20130123.
DOI: <a href="https://doi.org/10.1098/rstb.2013.0123">10.1098/rstb.2013.0123</a>.</cite></p>

<p><cite><a id='bib-BRAVO2004b'></a><a href="#cite-BRAVO2004b">Bravo, M. and H. Farid</a>
(2004a).
&ldquo;Recognizing and segmenting objects in clutter&rdquo;.
In: <em>Vision Research</em> 44.4, pp. 385&ndash;396.</cite></p>

<p><cite><a id='bib-BRAVO2004a'></a><a href="#cite-BRAVO2004a">&mdash;</a>
(2004b).
&ldquo;Search for a category target in clutter&rdquo;.
In: <em>Perception</em> 33.5, pp. 643&ndash;652.</cite></p>

<p><cite><a id='bib-brewer_2002'></a><a href="#cite-brewer_2002">Brewer, C. A. and L. Pickle</a>
(2002).
&ldquo;Evaluation of Methods for Classifying Epidemiological Data on Choropleth Maps in Series&rdquo;.
In: <em>Annals of the Association of American Geographers</em> 92.4, pp. 662-681.</cite></p>

<p><cite><a id='bib-leaflet'></a><a href="#cite-leaflet">Cheng, J., B. Karambelkar, and Y. Xie</a>
(2022).
<em>leaflet: Create Interactive Web Maps with the JavaScript 'Leaflet'
Library</em>.
R package version 2.1.1.
URL: <a href="https://CRAN.R-project.org/package=leaflet">https://CRAN.R-project.org/package=leaflet</a>.</cite></p>

<p><cite>Cleveland, W. S. and R. McGill
(1984).
&ldquo;Graphical Perception: Theory, Experimentation, and Application to the Development of Graphical Methods&rdquo;.
In: <em>Journal of the American Statistical Association</em> 79.387, pp. 531&ndash;554.</cite></p>

<p><cite><a id='bib-elmer2013symbol'></a><a href="#cite-elmer2013symbol">Elmer, M. E.</a>
(2013).
&ldquo;Symbol considerations for bivariate thematic maps&rdquo;.
In: 
<em>Proceedings of 26th International Cartographic Conference</em>.</cite></p>

<p><cite><a id='bib-gleicher2011'></a><a href="#cite-gleicher2011">Gleicher, M., D. Albers, R. Walker, et al.</a>
(2011).
&ldquo;Visual Comparison for Information Visualization&rdquo;.
In: <em>Information Visualization</em> 10.4, pp. 289-–309.</cite></p>

<p><cite><a id='bib-gordon_2015'></a><a href="#cite-gordon_2015">Gordon, I. and S. Finch</a>
(2015).
&ldquo;Statistician Heal Thyself: Have We Lost the Plot?&rdquo;
In: <em>Journal of Computational and Graphical Statistics</em> 24.4, pp. 1210&ndash;1229.
DOI: <a href="https://doi.org/10.1080/10618600.2014.989324">10.1080/10618600.2014.989324</a>.</cite></p>

<p><cite><a id='bib-huang2009'></a><a href="#cite-huang2009">Huang, W., P. Eades, and S. Hong</a>
(2009).
&ldquo;Measuring Effectiveness of Graph Visualizations: A Cognitive Load Perspective&rdquo;.
In: <em>Information Visualization</em> 8.3, pp. 139&ndash;152.</cite></p>

<p><cite><a id='bib-Leonowicz2003RESEARCHOT'></a><a href="#cite-Leonowicz2003RESEARCHOT">Leonowicz, A.</a>
(2003).
&ldquo;RESEARCH ON TWO-VARIABLE CHOROPLETH MAPS AS A METHOD FOR PORTRAYING GEOGRAPHICAL RELATIONSHIPS&rdquo;.
In: 
<em>Proceedings of the 21st International Cartographic Conference</em>.
The International Cartographic Association.</cite></p>

<p><cite><a id='bib-light-rainbow-2004'></a><a href="#cite-light-rainbow-2004">Light, A. and P. Bartlein</a>
(2004).
&ldquo;The End of the Rainbow? Color Schemes for Improved Data Graphics&rdquo;.
In: <em>Eos, Transactions American Geophysical Union</em> 85.40, pp. 385&ndash;391.
DOI: <a href="https://doi.org/10.1029/2004EO400002">10.1029/2004EO400002</a>.</cite></p>

<p><cite><a id='bib-lyi2021'></a><a href="#cite-lyi2021">LYi, S., J. Jo, and J. Seo</a>
(2021).
&ldquo;Comparative Layouts Revisited: Design Space, Guidelines, and Future Directions&rdquo;.
In: <em>IEEE Transactions on Visualization and Computer Graphics</em> 27.2, pp. 1525&ndash;1535.</cite></p>

<p><cite><a id='bib-macdonald_1999'></a><a href="#cite-macdonald_1999">Macdonald, L.</a>
(1999).
&ldquo;Using color effectively in computer graphics&rdquo;.
In: <em>Computer Graphics and Applications, IEEE</em> 19, pp. 20&ndash;35.
DOI: <a href="https://doi.org/10.1109/38.773961">10.1109/38.773961</a>.</cite></p>

<p><cite><a id='bib-MAHESWARI2017175'></a><a href="#cite-MAHESWARI2017175">Maheswari, M., A. Murthy, and A. Shanker</a>
(2017).
&ldquo;12 - Nitrogen Nutrition in Crops and Its Importance in Crop Quality&rdquo;.
In: 
<em>The Indian Nitrogen Assessment</em>.
Ed. by Y. P. Abrol, T. K. Adhya, V. P. Aneja, N. Raghuram, H. Pathak, U. Kulshrestha, C. Sharma and B. Singh.
Elsevier, pp. 175&ndash;186.
DOI: <a href="https://doi.org/https://doi.org/10.1016/B978-0-12-811836-8.00012-4">https://doi.org/10.1016/B978-0-12-811836-8.00012-4</a>.</cite></p>

<p><cite>Maxwell, B., P. Hegedus, P. Davis, et al.
(2018).
&ldquo;Can Optimization Associated with On-Farm Experimentation Using Site-Specific Technologies Improve Producer Management Decisions?&rdquo;
In: 
<em>14th International Conference on Precision Agriculture</em>.</cite></p>
</font>

---
class:primary
# References
<font size="2">
<p><cite><a id='bib-Miller1956TheMN'></a><a href="#cite-Miller1956TheMN">Miller, G. A.</a>
(1956).
&ldquo;The magical number seven plus or minus two: some limits on our capacity for processing information.&rdquo;
In: <em>Psychological review</em> 63 (2), pp. 81&ndash;97.</cite></p>

<p><cite>Peerlinck, A., J. W. Sheppard, and B. D. Maxwell
(2018).
&ldquo;Using Deep Learning in Yield and Protein Prediction of Winter Wheat Based on Fertilization Prescriptions in Precision Agriculture&rdquo;.
In: 
<em>14th International Conference on Precision Agriculture</em>.</cite></p>

<p><cite>Searcy, S. W.
(1997).
&ldquo;Precision Farming: A New Approach to Crop Management, Texas Agricultural Extension Service&rdquo;.
In: <em>The Texas A&amp;M University System, College Station, TX, USA</em>.</cite></p>

<p><cite><a id='bib-SILVA2011320'></a><a href="#cite-SILVA2011320">Silva, S., B. Sousa Santos, and J. Madeira</a>
(2011).
&ldquo;Using color in visualization: A survey&rdquo;.
In: <em>Computers &amp; Graphics</em> 35.2, pp. 320&ndash;333.
DOI: <a href="https://doi.org/https://doi.org/10.1016/j.cag.2010.11.015">https://doi.org/10.1016/j.cag.2010.11.015</a>.</cite></p>

<p><cite><a id='bib-strode-2020'></a><a href="#cite-strode-2020">Strode, G., J. Morgan, B. Thornton, et al.</a>
(2020).
&ldquo;Operationalizing Trumbo’s Principles of Bivariate Choropleth Map Design&rdquo;.
In: <em>Cartographic Perspectives</em> 94, pp. 5&ndash;24.
DOI: <a href="https://doi.org/10.14714/CP94.1538">10.14714/CP94.1538</a>.</cite></p>

<p><cite><a id='bib-tilman_sustainalbe_2011'></a><a href="#cite-tilman_sustainalbe_2011">Tilman, D., C. Balzer, J. Hill, et al.</a>
(2011).
&ldquo;Global food demand and the sustainable intensification of agriculture&rdquo;.
In: <em>Proceedings of the National Academy of Sciences</em> 108.50, pp. 20260&ndash;20264.
DOI: <a href="https://doi.org/10.1073/pnas.1116437108">10.1073/pnas.1116437108</a>.</cite></p>

<p><cite>Trevisan, R., D. Bullock, and N. Martin
(2021).
&ldquo;Spatial Variability of Crop Responses to Agronomic Inputs in On-Farm Precision Experimentation&rdquo;.
In: <em>Precision Agriculture</em> 22.2, pp. 342&ndash;363.
DOI: <a href="https://doi.org/10.1007/s11119-020-09720-8">10.1007/s11119-020-09720-8</a>.</cite></p>

<p><cite><a id='bib-vanderplas2020'></a><a href="#cite-vanderplas2020">Vanderplas, S., D. Cook, and H. Hofmann</a>
(2020).
&ldquo;Testing Statistical Charts: What Makes a Good Graph?&rdquo;
In: <em>Annual Review of Statistics and Its Application</em> 7.1, pp. 61&ndash;88.</cite></p>

<p><cite><a id='bib-Wang2018TowardsEC'></a><a href="#cite-Wang2018TowardsEC">Wang, Y., H. Haleem, C. Shi, et al.</a>
(2018).
&ldquo;Towards Easy Comparison of Local Businesses Using Online Reviews&rdquo;.
In: <em>Computer Graphics Forum</em> 37.</cite></p>

<p><cite><a id='bib-wong2011color'></a><a href="#cite-wong2011color">Wong, B.</a>
(2011).
&ldquo;Color blindness&rdquo;.
In: <em>nature methods</em> 8.6, p. 441.</cite></p>
</font>

---
class:inverse
<br>
<br>
<br>
.center[
# Questions?
<br>
<br>
<svg aria-hidden="true" role="img" viewBox="0 0 512 512" style="height:1em;width:1em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:white;overflow:visible;position:relative;"><path d="M0 128C0 92.65 28.65 64 64 64H448C483.3 64 512 92.65 512 128V384C512 419.3 483.3 448 448 448H64C28.65 448 0 419.3 0 384V128zM48 128V150.1L220.5 291.7C241.1 308.7 270.9 308.7 291.5 291.7L464 150.1V127.1C464 119.2 456.8 111.1 448 111.1H64C55.16 111.1 48 119.2 48 127.1L48 128zM48 212.2V384C48 392.8 55.16 400 64 400H448C456.8 400 464 392.8 464 384V212.2L322 328.8C283.6 360.3 228.4 360.3 189.1 328.8L48 212.2z"/></svg> **akleffner@huskers.unl.edu**
<svg aria-hidden="true" role="img" viewBox="0 0 496 512" style="height:1em;width:0.97em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:white;overflow:visible;position:relative;"><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg> **alisonkleffner**
]