maidr 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (206) hide show
  1. package/.Rbuildignore +1 -0
  2. package/.eslintignore +3 -0
  3. package/.eslintrc.json +6 -0
  4. package/.github/workflows/build.yml +20 -0
  5. package/.prettierignore +3 -0
  6. package/.prettierrc.json +7 -0
  7. package/.vscode/extensions.json +25 -0
  8. package/.vscode/settings.json +30 -0
  9. package/.vscode/tasks.json +57 -0
  10. package/CHANGELOG.md +7 -0
  11. package/CITATION.cff +21 -0
  12. package/CONTRIBUTING.md +87 -0
  13. package/LICENSE.md +595 -0
  14. package/README.md +341 -0
  15. package/dist/maidr.js +8851 -0
  16. package/dist/maidr.min.js +1 -0
  17. package/dist/styles.css +244 -0
  18. package/dist/styles.min.css +1 -0
  19. package/docs/Audio.html +1398 -0
  20. package/docs/Constants.html +256 -0
  21. package/docs/Description.html +582 -0
  22. package/docs/Helper.html +364 -0
  23. package/docs/LogError.html +905 -0
  24. package/docs/Menu.html +665 -0
  25. package/docs/Position.html +174 -0
  26. package/docs/Resources.html +338 -0
  27. package/docs/Review.html +333 -0
  28. package/docs/Tracker.html +965 -0
  29. package/docs/audio.js.html +635 -0
  30. package/docs/constants.js.html +1242 -0
  31. package/docs/display.js.html +1184 -0
  32. package/docs/fonts/OpenSans-Bold-webfont.eot +0 -0
  33. package/docs/fonts/OpenSans-Bold-webfont.svg +1830 -0
  34. package/docs/fonts/OpenSans-Bold-webfont.woff +0 -0
  35. package/docs/fonts/OpenSans-BoldItalic-webfont.eot +0 -0
  36. package/docs/fonts/OpenSans-BoldItalic-webfont.svg +1830 -0
  37. package/docs/fonts/OpenSans-BoldItalic-webfont.woff +0 -0
  38. package/docs/fonts/OpenSans-Italic-webfont.eot +0 -0
  39. package/docs/fonts/OpenSans-Italic-webfont.svg +1830 -0
  40. package/docs/fonts/OpenSans-Italic-webfont.woff +0 -0
  41. package/docs/fonts/OpenSans-Light-webfont.eot +0 -0
  42. package/docs/fonts/OpenSans-Light-webfont.svg +1831 -0
  43. package/docs/fonts/OpenSans-Light-webfont.woff +0 -0
  44. package/docs/fonts/OpenSans-LightItalic-webfont.eot +0 -0
  45. package/docs/fonts/OpenSans-LightItalic-webfont.svg +1835 -0
  46. package/docs/fonts/OpenSans-LightItalic-webfont.woff +0 -0
  47. package/docs/fonts/OpenSans-Regular-webfont.eot +0 -0
  48. package/docs/fonts/OpenSans-Regular-webfont.svg +1831 -0
  49. package/docs/fonts/OpenSans-Regular-webfont.woff +0 -0
  50. package/docs/fonts/OpenSans-Semibold-webfont.eot +0 -0
  51. package/docs/fonts/OpenSans-Semibold-webfont.svg +1830 -0
  52. package/docs/fonts/OpenSans-Semibold-webfont.ttf +0 -0
  53. package/docs/fonts/OpenSans-Semibold-webfont.woff +0 -0
  54. package/docs/fonts/OpenSans-SemiboldItalic-webfont.eot +0 -0
  55. package/docs/fonts/OpenSans-SemiboldItalic-webfont.svg +1830 -0
  56. package/docs/fonts/OpenSans-SemiboldItalic-webfont.ttf +0 -0
  57. package/docs/fonts/OpenSans-SemiboldItalic-webfont.woff +0 -0
  58. package/docs/index.html +66 -0
  59. package/docs/scripts/linenumber.js +25 -0
  60. package/docs/scripts/prettify/Apache-License-2.0.txt +202 -0
  61. package/docs/scripts/prettify/lang-css.js +2 -0
  62. package/docs/scripts/prettify/prettify.js +28 -0
  63. package/docs/styles/jsdoc-default.css +692 -0
  64. package/docs/styles/prettify-jsdoc.css +111 -0
  65. package/docs/styles/prettify-tomorrow.css +132 -0
  66. package/examples/dev_charts/barplot.html +1056 -0
  67. package/examples/dev_charts/boxplot.html +1856 -0
  68. package/examples/dev_charts/boxplot_flipped.svg +727 -0
  69. package/examples/dev_charts/heatmap.html +1217 -0
  70. package/examples/dev_charts/scatterplot/displ.js +18 -0
  71. package/examples/dev_charts/scatterplot/histogram_for_residual.svg +595 -0
  72. package/examples/dev_charts/scatterplot/hwy.js +15 -0
  73. package/examples/dev_charts/scatterplot/layers/point_layer.json +938 -0
  74. package/examples/dev_charts/scatterplot/layers/smooth_layer.json +322 -0
  75. package/examples/dev_charts/scatterplot/point_layer.js +938 -0
  76. package/examples/dev_charts/scatterplot/prediction_array.js +31 -0
  77. package/examples/dev_charts/scatterplot/prediction_array.json +31 -0
  78. package/examples/dev_charts/scatterplot/residual_array.js +29 -0
  79. package/examples/dev_charts/scatterplot/residual_array.json +29 -0
  80. package/examples/dev_charts/scatterplot/scatterplot.svg +1428 -0
  81. package/examples/dev_charts/scatterplot/scatterplot_data.html +2838 -0
  82. package/examples/dev_charts/scatterplot/scatterplot_no_jitter_point_only.svg +1393 -0
  83. package/examples/dev_charts/scatterplot/scatterplot_no_jitter_with_bestfit.svg +1424 -0
  84. package/examples/dev_charts/scatterplot/scatterplot_no_jitter_with_loess_curve.svg +1402 -0
  85. package/examples/dev_charts/scatterplot/smooth_layer.js +322 -0
  86. package/examples/dev_charts/scatterplot.html +4560 -0
  87. package/examples/dodged_bar/dodged_bar.png +0 -0
  88. package/examples/dodged_bar/dodged_bar.svg +198 -0
  89. package/examples/dodged_bar/schema.json +41 -0
  90. package/examples/histogram/histogram_tutorial.svg +482 -0
  91. package/examples/histogram/histogram_tutorial_raw_data.json +362 -0
  92. package/examples/histogram/histogram_user_study.svg +578 -0
  93. package/examples/histogram/histogram_user_study_raw_data.json +362 -0
  94. package/examples/lineplot/lineplot_sample.svg +126 -0
  95. package/examples/lineplot/lineplot_sample_raw_data.json +1 -0
  96. package/examples/lineplot/point+lineplot_sample.svg +700 -0
  97. package/examples/other/audio_oscillator_boxplot.js +95 -0
  98. package/examples/other/barplot_labels.svg +314 -0
  99. package/examples/other/barplot_user_study.svg +313 -0
  100. package/examples/other/boxplot.html +927 -0
  101. package/examples/other/boxplot_data_frame.html +568 -0
  102. package/examples/other/boxplot_label.svg +751 -0
  103. package/examples/other/braille-display_boxplot.js +79 -0
  104. package/examples/other/control_boxplot.js +55 -0
  105. package/examples/other/draft.js +56 -0
  106. package/examples/other/getData.html +400 -0
  107. package/examples/other/getData.js +41 -0
  108. package/examples/other/ggplot_to_svg.R +371 -0
  109. package/examples/other/heatmap.svg +582 -0
  110. package/examples/other/heatmap_label.svg +608 -0
  111. package/examples/other/multiple_barplot.html +2250 -0
  112. package/examples/other/new_scatterplot_user_study_point_layer.json +122 -0
  113. package/examples/other/py_binder_output.html +1167 -0
  114. package/examples/other/scatterplot_label.svg +1429 -0
  115. package/examples/other/seaborn_plot.py +9 -0
  116. package/examples/other/svglite_bar.svg +136 -0
  117. package/examples/other/tutorial_boxplot.svg +727 -0
  118. package/examples/other/tutorial_boxplot_data.json +72 -0
  119. package/examples/other/user_study_boxplot.svg +676 -0
  120. package/examples/stacked_bar/schema.json +41 -0
  121. package/examples/stacked_bar/stack_bar.png +0 -0
  122. package/examples/stacked_bar/stacked_bar.svg +180 -0
  123. package/examples/stacked_normalized_bar/stacked_normalized_bar.png +0 -0
  124. package/examples/stacked_normalized_bar/stacked_normalized_bar.svg +189 -0
  125. package/examples/static/barplot.svg +263 -0
  126. package/examples/static/barplot_diamonds_gridSVG.svg +254 -0
  127. package/examples/static/boxplot.svg +424 -0
  128. package/examples/static/heatmap.svg +373 -0
  129. package/examples/static/heatmap_penguins_table.html +486 -0
  130. package/examples/static/scatterplot.svg +530 -0
  131. package/examples/svglite/task_heatmap.html +802 -0
  132. package/examples/svglite/task_heatmap.svg +111 -0
  133. package/examples/svglite/tutorial_bar.svg +136 -0
  134. package/examples/svglite/tutorial_bar_plot.html +504 -0
  135. package/examples/svglite/tutorial_boxplot.html +1850 -0
  136. package/examples/svglite/tutorial_boxplot.svg +727 -0
  137. package/examples/svglite/tutorial_scatterplot.html +3135 -0
  138. package/examples/svglite/tutorial_scatterplot.svg +311 -0
  139. package/gulpfile.js +49 -0
  140. package/index.html +40 -0
  141. package/jsconfig.json +10 -0
  142. package/jsdoc.json +19 -0
  143. package/package.json +47 -0
  144. package/src/css/styles.css +241 -0
  145. package/src/js/__tests__/audio.test.js +49 -0
  146. package/src/js/__tests__/constants.test.js +622 -0
  147. package/src/js/audio.js +575 -0
  148. package/src/js/barplot.js +254 -0
  149. package/src/js/boxplot.js +682 -0
  150. package/src/js/constants.js +1182 -0
  151. package/src/js/controls.js +3182 -0
  152. package/src/js/display.js +1124 -0
  153. package/src/js/heatmap.js +411 -0
  154. package/src/js/histogram.js +134 -0
  155. package/src/js/init.js +427 -0
  156. package/src/js/lineplot.js +219 -0
  157. package/src/js/scatterplot.js +619 -0
  158. package/src/js/segmented.js +268 -0
  159. package/user_study_pilot/binder_test.html +526 -0
  160. package/user_study_pilot/data/barplot_user_study.svg +492 -0
  161. package/user_study_pilot/data/barplot_user_study_raw_data.json +22 -0
  162. package/user_study_pilot/data/boxplot_tutorial.json +72 -0
  163. package/user_study_pilot/data/boxplot_tutorial_horizontal.svg +727 -0
  164. package/user_study_pilot/data/boxplot_user_study.json +52 -0
  165. package/user_study_pilot/data/boxplot_user_study_vertical.svg +675 -0
  166. package/user_study_pilot/data/boxplot_user_study_vertical_horizontal.svg +676 -0
  167. package/user_study_pilot/data/heatmap_user_study.svg +719 -0
  168. package/user_study_pilot/data/heatmap_user_study_raw_data.json +127 -0
  169. package/user_study_pilot/data/new_barplot_user_study.svg +269 -0
  170. package/user_study_pilot/data/new_heatmap_user_study.svg +367 -0
  171. package/user_study_pilot/data/new_scatterplot_user_study.svg +603 -0
  172. package/user_study_pilot/data/new_scatterplot_user_study_point_layer.json +122 -0
  173. package/user_study_pilot/data/scatterplot_user_study (1).svg +321 -0
  174. package/user_study_pilot/data/scatterplot_user_study.svg +603 -0
  175. package/user_study_pilot/data/scatterplot_user_study_point_layer.json +122 -0
  176. package/user_study_pilot/data/scatterplot_user_study_smooth_layer.json +322 -0
  177. package/user_study_pilot/intro.html +215 -0
  178. package/user_study_pilot/jaws_settings/Chrome.JDF +10 -0
  179. package/user_study_pilot/jaws_settings/Firefox.JDF +10 -0
  180. package/user_study_pilot/jaws_settings/backup_utf8/Chrome.JDF +10 -0
  181. package/user_study_pilot/jaws_settings/backup_utf8/Firefox.JDF +10 -0
  182. package/user_study_pilot/jaws_settings/backup_utf8/msedge.JDF +10 -0
  183. package/user_study_pilot/jaws_settings/msedge.JDF +10 -0
  184. package/user_study_pilot/nvda_settings/chrome.dic +10 -0
  185. package/user_study_pilot/nvda_settings/default.dic +10 -0
  186. package/user_study_pilot/nvda_settings/firefox.dic +10 -0
  187. package/user_study_pilot/nvda_settings/msedge.dic +10 -0
  188. package/user_study_pilot/scatterplot.html +4560 -0
  189. package/user_study_pilot/seaborn_test.html +1059 -0
  190. package/user_study_pilot/svglite_test.html +534 -0
  191. package/user_study_pilot/task1_bar_plot.html +1111 -0
  192. package/user_study_pilot/task2_heatmap.html +1661 -0
  193. package/user_study_pilot/task3_boxplot_horizontal.html +1690 -0
  194. package/user_study_pilot/task3_boxplot_vertical.html +1689 -0
  195. package/user_study_pilot/task4_scatterplot.html +2091 -0
  196. package/user_study_pilot/tutorial1_bar_plot.html +1159 -0
  197. package/user_study_pilot/tutorial2_heatmap.html +1276 -0
  198. package/user_study_pilot/tutorial3_boxplot_horizontal.html +1861 -0
  199. package/user_study_pilot/tutorial3_boxplot_vertical.html +1807 -0
  200. package/user_study_pilot/tutorial4_scatterplot.html +5893 -0
  201. package/user_study_pilot/tutorial5_histogram.html +1553 -0
  202. package/user_study_pilot/tutorial6_lineplot.html +1011 -0
  203. package/user_study_pilot/tutorial7_stacked.html +763 -0
  204. package/user_study_pilot/tutorial8_stacked_normalized.html +796 -0
  205. package/user_study_pilot/tutorial9_dodged_bar.html +831 -0
  206. package/user_study_pilot/voiceover_settings/user_study_VoiceOver Archive.voprefs +573 -0
package/user_study_pilot/tutorial8_stacked_normalized.html ADDED
@@ -0,0 +1,796 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <title>Tutorial 8: Stacked Normalized Bar Plot</title>
5
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
6
+ <meta charset="utf-8" />
7
+ <!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous"> -->
8
+ <link rel="stylesheet" href="../src/css/styles.css" type="text/css" />
9
+ </head>
10
+
11
+ <body>
12
+ <div class="container mt-3">
13
+ <div id="container">
14
+ <div>
15
+ <svg
16
+ xmlns="http://www.w3.org/2000/svg"
17
+ xmlns:xlink="http://www.w3.org/1999/xlink"
18
+ class="svglite"
19
+ width="720.00pt"
20
+ height="576.00pt"
21
+ viewBox="0 0 720.00 576.00"
22
+ id="stacked_normalized_bar"
23
+ >
24
+ <defs>
25
+ <style type="text/css">
26
+ <![CDATA[
27
+ .svglite line, .svglite polyline, .svglite polygon, .svglite path, .svglite rect, .svglite circle {
28
+ fill: none;
29
+ stroke: #000000;
30
+ stroke-linecap: round;
31
+ stroke-linejoin: round;
32
+ stroke-miterlimit: 10.00;
33
+ }
34
+ .svglite text {
35
+ white-space: pre;
36
+ }
37
+ ]]>
38
+ </style>
39
+ </defs>
40
+ <rect
41
+ width="100%"
42
+ height="100%"
43
+ style="stroke: none; fill: #ffffff"
44
+ />
45
+ <defs>
46
+ <clipPath id="cpMC4wMHw3MjAuMDB8MC4wMHw1NzYuMDA=">
47
+ <rect x="0.00" y="0.00" width="720.00" height="576.00" />
48
+ </clipPath>
49
+ </defs>
50
+ <g clip-path="url(#cpMC4wMHw3MjAuMDB8MC4wMHw1NzYuMDA=)">
51
+ <rect
52
+ x="0.00"
53
+ y="0.00"
54
+ width="720.00"
55
+ height="576.00"
56
+ style="stroke-width: 1.07; stroke: #ffffff; fill: #ffffff"
57
+ />
58
+ </g>
59
+ <defs>
60
+ <clipPath id="cpNDAuNDh8NjY0Ljk1fDM4Ljg1fDUzMC44Nw==">
61
+ <rect x="40.48" y="38.85" width="624.47" height="492.02" />
62
+ </clipPath>
63
+ </defs>
64
+ <g clip-path="url(#cpNDAuNDh8NjY0Ljk1fDM4Ljg1fDUzMC44Nw==)">
65
+ <rect
66
+ x="40.48"
67
+ y="38.85"
68
+ width="624.47"
69
+ height="492.02"
70
+ style="stroke-width: 1.07; stroke: none; fill: #ebebeb"
71
+ />
72
+ <polyline
73
+ points="40.48,452.60 664.95,452.60 "
74
+ style="
75
+ stroke-width: 0.53;
76
+ stroke: #ffffff;
77
+ stroke-linecap: butt;
78
+ "
79
+ />
80
+ <polyline
81
+ points="40.48,340.77 664.95,340.77 "
82
+ style="
83
+ stroke-width: 0.53;
84
+ stroke: #ffffff;
85
+ stroke-linecap: butt;
86
+ "
87
+ />
88
+ <polyline
89
+ points="40.48,228.95 664.95,228.95 "
90
+ style="
91
+ stroke-width: 0.53;
92
+ stroke: #ffffff;
93
+ stroke-linecap: butt;
94
+ "
95
+ />
96
+ <polyline
97
+ points="40.48,117.13 664.95,117.13 "
98
+ style="
99
+ stroke-width: 0.53;
100
+ stroke: #ffffff;
101
+ stroke-linecap: butt;
102
+ "
103
+ />
104
+ <polyline
105
+ points="40.48,508.51 664.95,508.51 "
106
+ style="
107
+ stroke-width: 1.07;
108
+ stroke: #ffffff;
109
+ stroke-linecap: butt;
110
+ "
111
+ />
112
+ <polyline
113
+ points="40.48,396.69 664.95,396.69 "
114
+ style="
115
+ stroke-width: 1.07;
116
+ stroke: #ffffff;
117
+ stroke-linecap: butt;
118
+ "
119
+ />
120
+ <polyline
121
+ points="40.48,284.86 664.95,284.86 "
122
+ style="
123
+ stroke-width: 1.07;
124
+ stroke: #ffffff;
125
+ stroke-linecap: butt;
126
+ "
127
+ />
128
+ <polyline
129
+ points="40.48,173.04 664.95,173.04 "
130
+ style="
131
+ stroke-width: 1.07;
132
+ stroke: #ffffff;
133
+ stroke-linecap: butt;
134
+ "
135
+ />
136
+ <polyline
137
+ points="40.48,61.22 664.95,61.22 "
138
+ style="
139
+ stroke-width: 1.07;
140
+ stroke: #ffffff;
141
+ stroke-linecap: butt;
142
+ "
143
+ />
144
+ <polyline
145
+ points="92.52,530.87 92.52,38.85 "
146
+ style="
147
+ stroke-width: 1.07;
148
+ stroke: #ffffff;
149
+ stroke-linecap: butt;
150
+ "
151
+ />
152
+ <polyline
153
+ points="179.25,530.87 179.25,38.85 "
154
+ style="
155
+ stroke-width: 1.07;
156
+ stroke: #ffffff;
157
+ stroke-linecap: butt;
158
+ "
159
+ />
160
+ <polyline
161
+ points="265.98,530.87 265.98,38.85 "
162
+ style="
163
+ stroke-width: 1.07;
164
+ stroke: #ffffff;
165
+ stroke-linecap: butt;
166
+ "
167
+ />
168
+ <polyline
169
+ points="352.71,530.87 352.71,38.85 "
170
+ style="
171
+ stroke-width: 1.07;
172
+ stroke: #ffffff;
173
+ stroke-linecap: butt;
174
+ "
175
+ />
176
+ <polyline
177
+ points="439.45,530.87 439.45,38.85 "
178
+ style="
179
+ stroke-width: 1.07;
180
+ stroke: #ffffff;
181
+ stroke-linecap: butt;
182
+ "
183
+ />
184
+ <polyline
185
+ points="526.18,530.87 526.18,38.85 "
186
+ style="
187
+ stroke-width: 1.07;
188
+ stroke: #ffffff;
189
+ stroke-linecap: butt;
190
+ "
191
+ />
192
+ <polyline
193
+ points="612.91,530.87 612.91,38.85 "
194
+ style="
195
+ stroke-width: 1.07;
196
+ stroke: #ffffff;
197
+ stroke-linecap: butt;
198
+ "
199
+ />
200
+ <rect
201
+ x="53.49"
202
+ y="61.22"
203
+ width="78.06"
204
+ height="447.29"
205
+ style="
206
+ stroke-width: 1.07;
207
+ stroke: none;
208
+ stroke-linecap: butt;
209
+ stroke-linejoin: miter;
210
+ fill: #619cff;
211
+ "
212
+ />
213
+ <rect
214
+ x="140.22"
215
+ y="61.22"
216
+ width="78.06"
217
+ height="114.20"
218
+ style="
219
+ stroke-width: 1.07;
220
+ stroke: none;
221
+ stroke-linecap: butt;
222
+ stroke-linejoin: miter;
223
+ fill: #f8766d;
224
+ "
225
+ />
226
+ <rect
227
+ x="140.22"
228
+ y="175.42"
229
+ width="78.06"
230
+ height="333.09"
231
+ style="
232
+ stroke-width: 1.07;
233
+ stroke: none;
234
+ stroke-linecap: butt;
235
+ stroke-linejoin: miter;
236
+ fill: #00ba38;
237
+ "
238
+ />
239
+ <rect
240
+ x="226.95"
241
+ y="61.22"
242
+ width="78.06"
243
+ height="32.73"
244
+ style="
245
+ stroke-width: 1.07;
246
+ stroke: none;
247
+ stroke-linecap: butt;
248
+ stroke-linejoin: miter;
249
+ fill: #f8766d;
250
+ "
251
+ />
252
+ <rect
253
+ x="226.95"
254
+ y="93.95"
255
+ width="78.06"
256
+ height="414.56"
257
+ style="
258
+ stroke-width: 1.07;
259
+ stroke: none;
260
+ stroke-linecap: butt;
261
+ stroke-linejoin: miter;
262
+ fill: #00ba38;
263
+ "
264
+ />
265
+ <rect
266
+ x="313.69"
267
+ y="61.22"
268
+ width="78.06"
269
+ height="447.29"
270
+ style="
271
+ stroke-width: 1.07;
272
+ stroke: none;
273
+ stroke-linecap: butt;
274
+ stroke-linejoin: miter;
275
+ fill: #00ba38;
276
+ "
277
+ />
278
+ <rect
279
+ x="400.42"
280
+ y="61.22"
281
+ width="78.06"
282
+ height="447.29"
283
+ style="
284
+ stroke-width: 1.07;
285
+ stroke: none;
286
+ stroke-linecap: butt;
287
+ stroke-linejoin: miter;
288
+ fill: #f8766d;
289
+ "
290
+ />
291
+ <rect
292
+ x="487.15"
293
+ y="61.22"
294
+ width="78.06"
295
+ height="51.12"
296
+ style="
297
+ stroke-width: 1.07;
298
+ stroke: none;
299
+ stroke-linecap: butt;
300
+ stroke-linejoin: miter;
301
+ fill: #f8766d;
302
+ "
303
+ />
304
+ <rect
305
+ x="487.15"
306
+ y="112.34"
307
+ width="78.06"
308
+ height="281.16"
309
+ style="
310
+ stroke-width: 1.07;
311
+ stroke: none;
312
+ stroke-linecap: butt;
313
+ stroke-linejoin: miter;
314
+ fill: #00ba38;
315
+ "
316
+ />
317
+ <rect
318
+ x="487.15"
319
+ y="393.49"
320
+ width="78.06"
321
+ height="115.02"
322
+ style="
323
+ stroke-width: 1.07;
324
+ stroke: none;
325
+ stroke-linecap: butt;
326
+ stroke-linejoin: miter;
327
+ fill: #619cff;
328
+ "
329
+ />
330
+ <rect
331
+ x="573.88"
332
+ y="61.22"
333
+ width="78.06"
334
+ height="367.93"
335
+ style="
336
+ stroke-width: 1.07;
337
+ stroke: none;
338
+ stroke-linecap: butt;
339
+ stroke-linejoin: miter;
340
+ fill: #f8766d;
341
+ "
342
+ />
343
+ <rect
344
+ x="573.88"
345
+ y="429.15"
346
+ width="78.06"
347
+ height="79.36"
348
+ style="
349
+ stroke-width: 1.07;
350
+ stroke: none;
351
+ stroke-linecap: butt;
352
+ stroke-linejoin: miter;
353
+ fill: #619cff;
354
+ "
355
+ />
356
+ </g>
357
+ <g clip-path="url(#cpMC4wMHw3MjAuMDB8MC4wMHw1NzYuMDA=)">
358
+ <text
359
+ x="35.55"
360
+ y="511.66"
361
+ text-anchor="end"
362
+ style="font-size: 8.8px; fill: #4d4d4d; font-family: 'Arial'"
363
+ textLength="17.14px"
364
+ lengthAdjust="spacingAndGlyphs"
365
+ >
366
+ 0.00
367
+ </text>
368
+ <text
369
+ x="35.55"
370
+ y="399.84"
371
+ text-anchor="end"
372
+ style="font-size: 8.8px; fill: #4d4d4d; font-family: 'Arial'"
373
+ textLength="17.14px"
374
+ lengthAdjust="spacingAndGlyphs"
375
+ >
376
+ 0.25
377
+ </text>
378
+ <text
379
+ x="35.55"
380
+ y="288.01"
381
+ text-anchor="end"
382
+ style="font-size: 8.8px; fill: #4d4d4d; font-family: 'Arial'"
383
+ textLength="17.14px"
384
+ lengthAdjust="spacingAndGlyphs"
385
+ >
386
+ 0.50
387
+ </text>
388
+ <text
389
+ x="35.55"
390
+ y="176.19"
391
+ text-anchor="end"
392
+ style="font-size: 8.8px; fill: #4d4d4d; font-family: 'Arial'"
393
+ textLength="17.14px"
394
+ lengthAdjust="spacingAndGlyphs"
395
+ >
396
+ 0.75
397
+ </text>
398
+ <text
399
+ x="35.55"
400
+ y="64.37"
401
+ text-anchor="end"
402
+ style="font-size: 8.8px; fill: #4d4d4d; font-family: 'Arial'"
403
+ textLength="17.14px"
404
+ lengthAdjust="spacingAndGlyphs"
405
+ >
406
+ 1.00
407
+ </text>
408
+ <polyline
409
+ points="37.74,508.51 40.48,508.51 "
410
+ style="
411
+ stroke-width: 1.07;
412
+ stroke: #333333;
413
+ stroke-linecap: butt;
414
+ "
415
+ />
416
+ <polyline
417
+ points="37.74,396.69 40.48,396.69 "
418
+ style="
419
+ stroke-width: 1.07;
420
+ stroke: #333333;
421
+ stroke-linecap: butt;
422
+ "
423
+ />
424
+ <polyline
425
+ points="37.74,284.86 40.48,284.86 "
426
+ style="
427
+ stroke-width: 1.07;
428
+ stroke: #333333;
429
+ stroke-linecap: butt;
430
+ "
431
+ />
432
+ <polyline
433
+ points="37.74,173.04 40.48,173.04 "
434
+ style="
435
+ stroke-width: 1.07;
436
+ stroke: #333333;
437
+ stroke-linecap: butt;
438
+ "
439
+ />
440
+ <polyline
441
+ points="37.74,61.22 40.48,61.22 "
442
+ style="
443
+ stroke-width: 1.07;
444
+ stroke: #333333;
445
+ stroke-linecap: butt;
446
+ "
447
+ />
448
+ <polyline
449
+ points="92.52,533.61 92.52,530.87 "
450
+ style="
451
+ stroke-width: 1.07;
452
+ stroke: #333333;
453
+ stroke-linecap: butt;
454
+ "
455
+ />
456
+ <polyline
457
+ points="179.25,533.61 179.25,530.87 "
458
+ style="
459
+ stroke-width: 1.07;
460
+ stroke: #333333;
461
+ stroke-linecap: butt;
462
+ "
463
+ />
464
+ <polyline
465
+ points="265.98,533.61 265.98,530.87 "
466
+ style="
467
+ stroke-width: 1.07;
468
+ stroke: #333333;
469
+ stroke-linecap: butt;
470
+ "
471
+ />
472
+ <polyline
473
+ points="352.71,533.61 352.71,530.87 "
474
+ style="
475
+ stroke-width: 1.07;
476
+ stroke: #333333;
477
+ stroke-linecap: butt;
478
+ "
479
+ />
480
+ <polyline
481
+ points="439.45,533.61 439.45,530.87 "
482
+ style="
483
+ stroke-width: 1.07;
484
+ stroke: #333333;
485
+ stroke-linecap: butt;
486
+ "
487
+ />
488
+ <polyline
489
+ points="526.18,533.61 526.18,530.87 "
490
+ style="
491
+ stroke-width: 1.07;
492
+ stroke: #333333;
493
+ stroke-linecap: butt;
494
+ "
495
+ />
496
+ <polyline
497
+ points="612.91,533.61 612.91,530.87 "
498
+ style="
499
+ stroke-width: 1.07;
500
+ stroke: #333333;
501
+ stroke-linecap: butt;
502
+ "
503
+ />
504
+ <text
505
+ x="92.52"
506
+ y="542.11"
507
+ text-anchor="middle"
508
+ style="font-size: 8.8px; fill: #4d4d4d; font-family: 'Arial'"
509
+ textLength="29.36px"
510
+ lengthAdjust="spacingAndGlyphs"
511
+ >
512
+ 2seater
513
+ </text>
514
+ <text
515
+ x="179.25"
516
+ y="542.11"
517
+ text-anchor="middle"
518
+ style="font-size: 8.8px; fill: #4d4d4d; font-family: 'Arial'"
519
+ textLength="33.26px"
520
+ lengthAdjust="spacingAndGlyphs"
521
+ >
522
+ compact
523
+ </text>
524
+ <text
525
+ x="265.98"
526
+ y="542.11"
527
+ text-anchor="middle"
528
+ style="font-size: 8.8px; fill: #4d4d4d; font-family: 'Arial'"
529
+ textLength="29.82px"
530
+ lengthAdjust="spacingAndGlyphs"
531
+ >
532
+ midsize
533
+ </text>
534
+ <text
535
+ x="352.71"
536
+ y="542.11"
537
+ text-anchor="middle"
538
+ style="font-size: 8.8px; fill: #4d4d4d; font-family: 'Arial'"
539
+ textLength="30.32px"
540
+ lengthAdjust="spacingAndGlyphs"
541
+ >
542
+ minivan
543
+ </text>
544
+ <text
545
+ x="439.45"
546
+ y="542.11"
547
+ text-anchor="middle"
548
+ style="font-size: 8.8px; fill: #4d4d4d; font-family: 'Arial'"
549
+ textLength="25.44px"
550
+ lengthAdjust="spacingAndGlyphs"
551
+ >
552
+ pickup
553
+ </text>
554
+ <text
555
+ x="526.18"
556
+ y="542.11"
557
+ text-anchor="middle"
558
+ style="font-size: 8.8px; fill: #4d4d4d; font-family: 'Arial'"
559
+ textLength="47.46px"
560
+ lengthAdjust="spacingAndGlyphs"
561
+ >
562
+ subcompact
563
+ </text>
564
+ <text
565
+ x="612.91"
566
+ y="542.11"
567
+ text-anchor="middle"
568
+ style="font-size: 8.8px; fill: #4d4d4d; font-family: 'Arial'"
569
+ textLength="13.69px"
570
+ lengthAdjust="spacingAndGlyphs"
571
+ >
572
+ suv
573
+ </text>
574
+ <text
575
+ x="352.71"
576
+ y="554.57"
577
+ text-anchor="middle"
578
+ style="font-size: 11px; font-family: 'Arial'"
579
+ textLength="27.50px"
580
+ lengthAdjust="spacingAndGlyphs"
581
+ >
582
+ Class
583
+ </text>
584
+ <text
585
+ transform="translate(13.36,284.86) rotate(-90)"
586
+ text-anchor="middle"
587
+ style="font-size: 11px; font-family: 'Arial'"
588
+ textLength="29.36px"
589
+ lengthAdjust="spacingAndGlyphs"
590
+ >
591
+ Count
592
+ </text>
593
+ <rect
594
+ x="675.91"
595
+ y="245.63"
596
+ width="38.61"
597
+ height="78.47"
598
+ style="stroke-width: 1.07; stroke: none; fill: #ffffff"
599
+ />
600
+ <text
601
+ x="681.39"
602
+ y="260.14"
603
+ style="font-size: 11px; font-family: 'Arial'"
604
+ textLength="25.67px"
605
+ lengthAdjust="spacingAndGlyphs"
606
+ >
607
+ Drive
608
+ </text>
609
+ <rect
610
+ x="681.39"
611
+ y="266.78"
612
+ width="17.28"
613
+ height="17.28"
614
+ style="stroke-width: 1.07; stroke: none; fill: #f2f2f2"
615
+ />
616
+ <rect
617
+ x="682.09"
618
+ y="267.49"
619
+ width="15.86"
620
+ height="15.86"
621
+ style="
622
+ stroke-width: 1.07;
623
+ stroke: none;
624
+ stroke-linecap: butt;
625
+ stroke-linejoin: miter;
626
+ fill: #f8766d;
627
+ "
628
+ />
629
+ <rect
630
+ x="681.39"
631
+ y="284.06"
632
+ width="17.28"
633
+ height="17.28"
634
+ style="stroke-width: 1.07; stroke: none; fill: #f2f2f2"
635
+ />
636
+ <rect
637
+ x="682.09"
638
+ y="284.77"
639
+ width="15.86"
640
+ height="15.86"
641
+ style="
642
+ stroke-width: 1.07;
643
+ stroke: none;
644
+ stroke-linecap: butt;
645
+ stroke-linejoin: miter;
646
+ fill: #00ba38;
647
+ "
648
+ />
649
+ <rect
650
+ x="681.39"
651
+ y="301.34"
652
+ width="17.28"
653
+ height="17.28"
654
+ style="stroke-width: 1.07; stroke: none; fill: #f2f2f2"
655
+ />
656
+ <rect
657
+ x="682.09"
658
+ y="302.05"
659
+ width="15.86"
660
+ height="15.86"
661
+ style="
662
+ stroke-width: 1.07;
663
+ stroke: none;
664
+ stroke-linecap: butt;
665
+ stroke-linejoin: miter;
666
+ fill: #619cff;
667
+ "
668
+ />
669
+ <text
670
+ x="704.15"
671
+ y="278.57"
672
+ style="font-size: 8.8px; font-family: 'Arial'"
673
+ textLength="4.90px"
674
+ lengthAdjust="spacingAndGlyphs"
675
+ >
676
+ 4
677
+ </text>
678
+ <text
679
+ x="704.15"
680
+ y="295.85"
681
+ style="font-size: 8.8px; font-family: 'Arial'"
682
+ textLength="2.45px"
683
+ lengthAdjust="spacingAndGlyphs"
684
+ >
685
+ f
686
+ </text>
687
+ <text
688
+ x="704.15"
689
+ y="313.13"
690
+ style="font-size: 8.8px; font-family: 'Arial'"
691
+ textLength="2.93px"
692
+ lengthAdjust="spacingAndGlyphs"
693
+ >
694
+ r
695
+ </text>
696
+ <text
697
+ x="40.48"
698
+ y="31.05"
699
+ style="font-size: 11px; font-family: 'Arial'"
700
+ textLength="335.22px"
701
+ lengthAdjust="spacingAndGlyphs"
702
+ >
703
+ Segmented bar plot of the number of cars in each class by drive
704
+ type
705
+ </text>
706
+ <text
707
+ x="40.48"
708
+ y="14.93"
709
+ style="font-size: 13.2px; font-family: 'Arial'"
710
+ textLength="46.92px"
711
+ lengthAdjust="spacingAndGlyphs"
712
+ >
713
+ Bar Plot
714
+ </text>
715
+ <text
716
+ x="664.95"
717
+ y="568.67"
718
+ text-anchor="end"
719
+ style="font-size: 8.8px; font-family: 'Arial'"
720
+ textLength="168.34px"
721
+ lengthAdjust="spacingAndGlyphs"
722
+ >
723
+ Source: mpg dataset from ggplot2 package
724
+ </text>
725
+ </g>
726
+ </svg>
727
+ </div>
728
+ <br />
729
+ </div>
730
+ </div>
731
+ <script>
732
+ var maidr = {
733
+ type: 'stacked_normalized_bar',
734
+ id: 'stacked_normalized_bar',
735
+ elements: document.querySelectorAll(
736
+ 'svg g:nth-of-type(2) rect[style*="butt"]'
737
+ ),
738
+ labels: {
739
+ title: 'Stacked Normlized Bar Plot',
740
+ subtitle:
741
+ 'Segmented bar plot of the number of cars in each class by drive type',
742
+ caption: 'Source: mpg dataset from ggplot2 package',
743
+ x: 'Class',
744
+ y: 'Count',
745
+ fill: 'Drive',
746
+ },
747
+ axes: {
748
+ x: {
749
+ label: 'Class',
750
+ level: [
751
+ '2seater',
752
+ 'compact',
753
+ 'midsize',
754
+ 'minivan',
755
+ 'pickup',
756
+ 'subcompact',
757
+ 'suv',
758
+ ],
759
+ },
760
+ y: {
761
+ label: 'Count',
762
+ },
763
+ fill: {
764
+ label: 'Drive',
765
+ level: ['4', 'f', 'r'],
766
+ },
767
+ },
768
+ data: [
769
+ { x: '2seater', fill: 'r', y: 5 },
770
+ { x: 'compact', fill: '4', y: 12 },
771
+ { x: 'compact', fill: 'f', y: 35 },
772
+ { x: 'midsize', fill: '4', y: 3 },
773
+ { x: 'midsize', fill: 'f', y: 38 },
774
+ { x: 'minivan', fill: 'f', y: 11 },
775
+ { x: 'pickup', fill: '4', y: 33 },
776
+ { x: 'subcompact', fill: '4', y: 4 },
777
+ { x: 'subcompact', fill: 'f', y: 22 },
778
+ { x: 'subcompact', fill: 'r', y: 9 },
779
+ { x: 'suv', fill: '4', y: 51 },
780
+ { x: 'suv', fill: 'r', y: 11 },
781
+ ],
782
+ };
783
+ </script>
784
+ <script src="../src/js/constants.js"></script>
785
+ <script src="../src/js/audio.js"></script>
786
+ <script src="../src/js/display.js"></script>
787
+ <script src="../src/js/barplot.js"></script>
788
+ <script src="../src/js/boxplot.js"></script>
789
+ <script src="../src/js/heatmap.js"></script>
790
+ <script src="../src/js/scatterplot.js"></script>
791
+ <script src="../src/js/histogram.js"></script>
792
+ <script src="../src/js/segmented.js"></script>
793
+ <script src="../src/js/controls.js"></script>
794
+ <script src="../src/js/init.js"></script>
795
+ </body>
796
+ </html>