-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
124 lines (99 loc) · 7.31 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
<!DOCTYPE html>
<meta charset="utf-8">
<head>
<title>
Farm to Consumer
</title>
<link rel="stylesheet" type="text/css" href="F2C.css">
<script src="http://d3js.org/d3.v3.js"></script>
<script src="linechart.js"></script>
<script src="barchart.js"></script>
<script src="title.js"></script>
</head>
<body>
<script>
var svg = d3.select("body").append("svg")
.attr("width", 900)
.attr("height", 480);
d3.select("body").insert("svg",".customizabletable")
.attr("class", "barchartsvg")
.attr("width", 300)
.attr("height", 480);
addtitle();
drawrules();
showpricecharts();
svglisten();
</script>
<!--<p style="position: absolute; left: 950px; right: 10px; top: 0px; font-size: 24px;font-weight: bold; line-height: 250%;">How much money goes to farmers’ pocket in your grocery spending?</p>
<p style="position: absolute; left: 950px; top: 80px; font-size: 12px">Visualization of USDA “Price Spreads from Farm to Consumer”</p><-->
<p style="position: absolute; right: 20px; bottom: 80px; font-size: 14px; font-family:Helvetica-Light">CSE 512 W14, Assignment 3</p>
<p style="position: absolute; right: 20px; bottom: 60px; font-size: 14px; font-family:Helvetica-Light">Zening Qu, Master of HCDE, UW</p>
<p style="position: absolute; right: 20px; bottom: 40px; font-size: 14px; font-family:Helvetica-Light">Nina(Zhuxiaona) Wei, Master of HCID, UW</p>
<!--
<div style="background-color: #FF0000; width: 15px; height: 15px; position: absolute; left: 920px; top: 150px; border: 0px"></div>
<div style="width: 100px; height: 15px; position: absolute; left: 940px; top: 150px; border: 0px">butter</div>
<div style="background-color: #FF6600; width: 15px; height: 15px; position: absolute; left: 1010px; top: 150px; border: 0px"></div>
<div style="width: 100px; height: 15px; position: absolute; left: 1030px; top: 150px; border: 0px">cheese</div>
<div style="background-color: #FF9900; width: 15px; height: 15px; position: absolute; left: 1100px; top: 150px; border: 0px"></div>
<div style="width: 100px; height: 15px; position: absolute; left: 1120px; top: 150px; border: 0px">ice cream</div>
<div style="background-color: #FFCC00; width: 15px; height: 15px; position: absolute; left: 1190px; top: 150px; border: 0px"></div>
<div style="width: 100px; height: 15px; position: absolute; left: 1210px; top: 150px; border: 0px">whole milk</div>
<div style="background-color: #003300; width: 15px; height: 15px; position: absolute; left: 920px; top: 170px; border: 0px"></div>
<div style="width: 100px; height: 15px; position: absolute; left: 940px; top: 170px; border: 0px">broccoli</div>
<div style="background-color: #006600; width: 15px; height: 15px; position: absolute; left: 1010px; top: 170px; border: 0px"></div>
<div style="width: 100px; height: 15px; position: absolute; left: 1030px; top: 170px; border: 0px">lettuce</div>
<div style="background-color: #009900; width: 15px; height: 15px; position: absolute; left: 1100px; top: 170px; border: 0px"></div>
<div style="width: 100px; height: 15px; position: absolute; left: 1120px; top: 170px; border: 0px">potatoes</div>
<div style="background-color: #00CC00; width: 15px; height: 15px; position: absolute; left: 1190px; top: 170px; border: 0px"></div>
<div style="width: 100px; height: 15px; position: absolute; left: 1210px; top: 170px; border: 0px">tomatoes</div>
<div style="background-color: #CC0066; width: 15px; height: 15px; position: absolute; left: 920px; top: 190px; border: 0px"></div>
<div style="width: 100px; height: 15px; position: absolute; left: 940px; top: 190px; border: 0px">apples</div>
<div style="background-color: #CC3366; width: 15px; height: 15px; position: absolute; left: 1010px; top: 190px; border: 0px"></div>
<div style="width: 100px; height: 15px; position: absolute; left: 1030px; top: 190px; border: 0px">grapefruit</div>
<div style="background-color: #CC6666; width: 15px; height: 15px; position: absolute; left: 1100px; top: 190px; border: 0px"></div>
<div style="width: 100px; height: 15px; position: absolute; left: 1120px; top: 190px; border: 0px">grapes</div>
<div style="background-color: #CC9966; width: 15px; height: 15px; position: absolute; left: 1190px; top: 190px; border: 0px"></div>
<div style="width: 100px; height: 15px; position: absolute; left: 1210px; top: 190px; border: 0px">lemons</div>
<div style="background-color: #999966; width: 15px; height: 15px; position: absolute; left: 920px; top: 210px; border: 0px"></div>
<div style="width: 100px; height: 15px; position: absolute; left: 940px; top: 210px; border: 0px">oranges</div>
<div style="background-color: #996666; width: 15px; height: 15px; position: absolute; left: 1010px; top: 210px; border: 0px"></div>
<div style="width: 100px; height: 15px; position: absolute; left: 1030px; top: 210px; border: 0px">peaches</div>
<div style="background-color: #993366; width: 15px; height: 15px; position: absolute; left: 1100px; top: 210px; border: 0px"></div>
<div style="width: 100px; height: 15px; position: absolute; left: 1120px; top: 210px; border: 0px">pears</div>
<div style="background-color: #990066; width: 15px; height: 15px; position: absolute; left: 1190px; top: 210px; border: 0px"></div>
<div style="width: 100px; height: 15px; position: absolute; left: 1210px; top: 210px; border: 0px">strawberries</div>
-->
<table style="font-family: Helvetica-Light" class="customizabletable">
<tr>
<td style="font-size: 16px; font-weight: bold">Dairy</td><td></td>
<td style="font-size: 16px; font-weight: bold">Vegetables</td><td></td>
<td style="font-size: 16px; font-weight: bold">Fruits</td><td></td>
<td></td><td></td>
</tr>
<tr>
<td bgcolor="#5259C9">butter</td> <td><input id="butter" type="text" value="0">lbs </td>
<td bgcolor="#5AB02A">broccoli</td><td><input id="broccoli" type="text" value="6.71">lbs </td>
<td bgcolor="#ED7E3B">apples </td><td><input id="apples" type="text" value="34.07">lbs </td>
<td bgcolor="#D64D4A">oranges </td><td><input id="oranges" type="text" value="25.02">lbs </td>
</tr>
<tr>
<td bgcolor="#567ED4">cheese </td><td><input id="cheese" type="text" value="0">lbs </td>
<td bgcolor="#79992C">lettuce </td><td><input id="lettuce" type="text" value="15.37">lbs </td>
<td bgcolor="#D66340">grapefruit </td><td><input id="grapefruit" type="text" value="15.07">lbs </td>
<td bgcolor="#E04E8F">peaches </td><td><input id="peaches" type="text" value="8.87">lbs</td>
</tr>
<tr>
<td bgcolor="#5692BD">ice cream </td><td><input id="icecream" type="text" value="0">lbs</td>
<td bgcolor="#B0AE2A">potatoes </td><td><input id="potatoes" type="text" value="89.92">lbs</td>
<td bgcolor="#ED4A3B">grapes </td><td><input id="grapes" type="text" value="15.89">lbs</td>
<td bgcolor="#C950C3">pears </td><td><input id="pears" type="text" value="3.87">lbs</td>
</tr>
<tr>
<td bgcolor="#56C1D4">whole milk </td><td><input id="wholemilk" type="text" value="0">lbs</td>
<td bgcolor="#A69727">tomatoes </td><td><input id="tomatoes" type="text" value="20.91">lbs</td>
<td bgcolor="#E3385B">lemons </td><td><input id="lemons" type="text" value="6.01">lbs</td>
<td bgcolor="#BD4EE0">strawberries </td><td><input id="strawberries" type="text" value="8.27">lbs</td>
</tr>
</table>
<button style="position: absolute; left: 920px; bottom: 480px; font: "Helvetica-Light" type="button" onclick="SwitchView()" id="SwitchButton">Show Farm/Retail Percentage</button> </td>
</body>