generated from DS4200-S23-Class/project
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
167 lines (145 loc) · 8.61 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8/>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Analyzing growth factors' influence on crop output</title>
<script src="js/d3.v6.1.1/d3.min.js"></script>
</head>
<body>
<div class = "content">
<h1>Analyzing growth factors' influence on crop output</h1>
<div>
<h2>Motivation</h2>
We chose to create this project because we think it is important to recognize how our innovations have affected crop output. Our visualization seeks to offer the user insights on the relationship between growth factors and crop output by allowing them to choose a factor and compare its usage levels to the output. It is important to implement our idea because it would be useful for agricultural researchers to have an interactive graph to gain insights on growth factors' impact on crop output. Our use case would be an agricultural researcher that would like to gain insights on the relationships between crop output and various growth factors like pesticide and fertilizer use, labor output, and energy input.
</div>
<div>
<h2>Background</h2>
<a href="https://www.ers.usda.gov/data-products/agricultural-productivity-in-the-u-s/">USDA data</a>
<br>
The data in the link is provided by the United States Department of Agriculture (USDA), specifically by the Economic Research Service (ERS) division. The original datasets used to compile this report are not provided, but they are likely sourced from various government agencies and statistical databases.
The biases present in agricultural productivity data may arise due to various factors, such as data collection methods, data quality, and reporting errors. For example, farmers may underreport their production levels to avoid paying taxes or penalties, or overestimate their yields to secure government subsidies or loans. This can lead to inaccuracies in the data and can affect the overall assessment of agricultural productivity.
Furthermore, certain farming practices may have an adverse impact on the environment, such as excessive use of fertilizers, pesticides, and other chemicals. These practices may increase productivity in the short term but can have long-term negative effects on soil health, water quality, and biodiversity. Such environmental considerations are not always reflected in the data and can lead to a biased understanding of agricultural productivity.
There may also be regional biases present in the data due to variations in climate, soil quality, and other factors that affect agricultural productivity. For example, certain crops may grow better in certain regions, which can affect the overall productivity statistics for a particular area.
It is important to be aware of these biases and limitations when interpreting agricultural productivity data and to use it in conjunction with other sources of information to gain a comprehensive understanding of the subject.
</p>
<h3>Demo Video</h3>
<a href="https://www.youtube.com/watch?v=HQ4Q3fj07vI">Link to video</a>
<h3>Report</h3>
<a href="https://www.overleaf.com/read/xdggyyqyzhrt">Link to report</a>
</div>
<div>
<h2>Visualization</h2>
<div id="viz1">
Select an output type: <select id="selectButton"></select>
<br />
</div>
<br><br><br><br>
<div id="viz2">
<label class="centered">Choose States
<select id="selector">
<option value="AL">Alabama</option>
<option value="AR">Arkansas</option>
<option value="AZ">Arizona</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="IA">Iowa</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="MA">Massachusetts</option>
<option value="MD">Maryland</option>
<option value="ME">Maine</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MO">Missouri</option>
<option value="MS">Mississippi</option>
<option value="MT">Montana</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="NE">Nebraska</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NV">Nevada</option>
<option value="NY">New York</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VA">Virginia</option>
<option value="VT">Vermont</option>
<option value="WA">Washington</option>
<option value="WI">Wisconsin</option>
<option value="WV">West Virginia</option>
<option value="WY">Wyoming</option>
</select>
</label>
<button onclick="newLine()">Show state data</button>
<button onclick="removeLine()">Remove state data</button>
<br /><br />
<div id="graphs" class="flex-row">
<div class="flex-column">
<div id="pest" class="lg">
</div>
<br>
<br>
<div id="fert" class="lg">
</div>
</div>
<div class="flex-column" id="median">
</div>
<div class="flex-column">
<div id="labor" class="lg">
</div>
<br>
<br>
<div id="energy" class="lg">
</div>
</div>
<div class="flex-column" id="median">
</div>
<div id="viz2key">
<!--
<h1>Key:
<br><h6><b>Click Item to Embolden</b></h6>
<br>
<br>
</h1>
<ul id="list">
</ul>-->
</div>
</div>
<p><b>
The Y value on the above line graphs is normalized around 1=Alabama, 1996 for each respective graph.
</b></p>
</div>
<div>
<br>
<br>
<h2>Acknowledgements</h2>
<a href="https://plotly.com/python/reference/layout/geo/#layout-geo-lataxis">https://plotly.com/python/reference/layout/geo/#layout-geo-lataxis</a>
<a href="https://wesbos.com/javascript/12-advanced-flow-control/68-promises-error-handling">https://wesbos.com/javascript/12-advanced-flow-control/68-promises-error-handling</a>
<a href="https://www.w3schools.com/js/js_graphics_d3js.asp">https://www.w3schools.com/js/js_graphics_d3js.asp</a>
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice</a>
<a href="https://d3-graph-gallery.com/graph/custom_legend.html">https://d3-graph-gallery.com/graph/custom_legend.html</a>
<a href="https://d3-graph-gallery.com/graph/connectedscatter_select.html">https://d3-graph-gallery.com/graph/connectedscatter_select.html</a>
<a href="https://d3-graph-gallery.com/graph/stackedarea_wideinput.html">https://d3-graph-gallery.com/graph/stackedarea_wideinput.html</a>
</div>
<script src="js/main.js"></script>
</div>
</body>
</html>