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/tutorial7_stacked.html ADDED
@@ -0,0 +1,763 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <title>Tutorial 7: Stacked 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_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="cpMzMuMTR8NjY0Ljk1fDM4Ljg1fDUzMC44Nw==">
61
+ <rect x="33.14" y="38.85" width="631.81" height="492.02" />
62
+ </clipPath>
63
+ </defs>
64
+ <g clip-path="url(#cpMzMuMTR8NjY0Ljk1fDM4Ljg1fDUzMC44Nw==)">
65
+ <rect
66
+ x="33.14"
67
+ y="38.85"
68
+ width="631.81"
69
+ height="492.02"
70
+ style="stroke-width: 1.07; stroke: none; fill: #ebebeb"
71
+ />
72
+ <polyline
73
+ points="33.14,436.37 664.95,436.37 "
74
+ style="
75
+ stroke-width: 0.53;
76
+ stroke: #ffffff;
77
+ stroke-linecap: butt;
78
+ "
79
+ />
80
+ <polyline
81
+ points="33.14,292.08 664.95,292.08 "
82
+ style="
83
+ stroke-width: 0.53;
84
+ stroke: #ffffff;
85
+ stroke-linecap: butt;
86
+ "
87
+ />
88
+ <polyline
89
+ points="33.14,147.79 664.95,147.79 "
90
+ style="
91
+ stroke-width: 0.53;
92
+ stroke: #ffffff;
93
+ stroke-linecap: butt;
94
+ "
95
+ />
96
+ <polyline
97
+ points="33.14,508.51 664.95,508.51 "
98
+ style="
99
+ stroke-width: 1.07;
100
+ stroke: #ffffff;
101
+ stroke-linecap: butt;
102
+ "
103
+ />
104
+ <polyline
105
+ points="33.14,364.22 664.95,364.22 "
106
+ style="
107
+ stroke-width: 1.07;
108
+ stroke: #ffffff;
109
+ stroke-linecap: butt;
110
+ "
111
+ />
112
+ <polyline
113
+ points="33.14,219.93 664.95,219.93 "
114
+ style="
115
+ stroke-width: 1.07;
116
+ stroke: #ffffff;
117
+ stroke-linecap: butt;
118
+ "
119
+ />
120
+ <polyline
121
+ points="33.14,75.65 664.95,75.65 "
122
+ style="
123
+ stroke-width: 1.07;
124
+ stroke: #ffffff;
125
+ stroke-linecap: butt;
126
+ "
127
+ />
128
+ <polyline
129
+ points="85.79,530.87 85.79,38.85 "
130
+ style="
131
+ stroke-width: 1.07;
132
+ stroke: #ffffff;
133
+ stroke-linecap: butt;
134
+ "
135
+ />
136
+ <polyline
137
+ points="173.54,530.87 173.54,38.85 "
138
+ style="
139
+ stroke-width: 1.07;
140
+ stroke: #ffffff;
141
+ stroke-linecap: butt;
142
+ "
143
+ />
144
+ <polyline
145
+ points="261.29,530.87 261.29,38.85 "
146
+ style="
147
+ stroke-width: 1.07;
148
+ stroke: #ffffff;
149
+ stroke-linecap: butt;
150
+ "
151
+ />
152
+ <polyline
153
+ points="349.04,530.87 349.04,38.85 "
154
+ style="
155
+ stroke-width: 1.07;
156
+ stroke: #ffffff;
157
+ stroke-linecap: butt;
158
+ "
159
+ />
160
+ <polyline
161
+ points="436.79,530.87 436.79,38.85 "
162
+ style="
163
+ stroke-width: 1.07;
164
+ stroke: #ffffff;
165
+ stroke-linecap: butt;
166
+ "
167
+ />
168
+ <polyline
169
+ points="524.55,530.87 524.55,38.85 "
170
+ style="
171
+ stroke-width: 1.07;
172
+ stroke: #ffffff;
173
+ stroke-linecap: butt;
174
+ "
175
+ />
176
+ <polyline
177
+ points="612.30,530.87 612.30,38.85 "
178
+ style="
179
+ stroke-width: 1.07;
180
+ stroke: #ffffff;
181
+ stroke-linecap: butt;
182
+ "
183
+ />
184
+ <rect
185
+ x="46.30"
186
+ y="472.44"
187
+ width="78.98"
188
+ height="36.07"
189
+ style="
190
+ stroke-width: 1.07;
191
+ stroke: none;
192
+ stroke-linecap: butt;
193
+ stroke-linejoin: miter;
194
+ fill: #619cff;
195
+ "
196
+ />
197
+ <rect
198
+ x="134.05"
199
+ y="169.43"
200
+ width="78.98"
201
+ height="86.57"
202
+ style="
203
+ stroke-width: 1.07;
204
+ stroke: none;
205
+ stroke-linecap: butt;
206
+ stroke-linejoin: miter;
207
+ fill: #f8766d;
208
+ "
209
+ />
210
+ <rect
211
+ x="134.05"
212
+ y="256.01"
213
+ width="78.98"
214
+ height="252.50"
215
+ style="
216
+ stroke-width: 1.07;
217
+ stroke: none;
218
+ stroke-linecap: butt;
219
+ stroke-linejoin: miter;
220
+ fill: #00ba38;
221
+ "
222
+ />
223
+ <rect
224
+ x="221.80"
225
+ y="212.72"
226
+ width="78.98"
227
+ height="21.64"
228
+ style="
229
+ stroke-width: 1.07;
230
+ stroke: none;
231
+ stroke-linecap: butt;
232
+ stroke-linejoin: miter;
233
+ fill: #f8766d;
234
+ "
235
+ />
236
+ <rect
237
+ x="221.80"
238
+ y="234.36"
239
+ width="78.98"
240
+ height="274.15"
241
+ style="
242
+ stroke-width: 1.07;
243
+ stroke: none;
244
+ stroke-linecap: butt;
245
+ stroke-linejoin: miter;
246
+ fill: #00ba38;
247
+ "
248
+ />
249
+ <rect
250
+ x="309.55"
251
+ y="429.15"
252
+ width="78.98"
253
+ height="79.36"
254
+ style="
255
+ stroke-width: 1.07;
256
+ stroke: none;
257
+ stroke-linecap: butt;
258
+ stroke-linejoin: miter;
259
+ fill: #00ba38;
260
+ "
261
+ />
262
+ <rect
263
+ x="397.31"
264
+ y="270.43"
265
+ width="78.98"
266
+ height="238.08"
267
+ style="
268
+ stroke-width: 1.07;
269
+ stroke: none;
270
+ stroke-linecap: butt;
271
+ stroke-linejoin: miter;
272
+ fill: #f8766d;
273
+ "
274
+ />
275
+ <rect
276
+ x="485.06"
277
+ y="256.01"
278
+ width="78.98"
279
+ height="28.86"
280
+ style="
281
+ stroke-width: 1.07;
282
+ stroke: none;
283
+ stroke-linecap: butt;
284
+ stroke-linejoin: miter;
285
+ fill: #f8766d;
286
+ "
287
+ />
288
+ <rect
289
+ x="485.06"
290
+ y="284.86"
291
+ width="78.98"
292
+ height="158.72"
293
+ style="
294
+ stroke-width: 1.07;
295
+ stroke: none;
296
+ stroke-linecap: butt;
297
+ stroke-linejoin: miter;
298
+ fill: #00ba38;
299
+ "
300
+ />
301
+ <rect
302
+ x="485.06"
303
+ y="443.58"
304
+ width="78.98"
305
+ height="64.93"
306
+ style="
307
+ stroke-width: 1.07;
308
+ stroke: none;
309
+ stroke-linecap: butt;
310
+ stroke-linejoin: miter;
311
+ fill: #619cff;
312
+ "
313
+ />
314
+ <rect
315
+ x="572.81"
316
+ y="61.22"
317
+ width="78.98"
318
+ height="367.93"
319
+ style="
320
+ stroke-width: 1.07;
321
+ stroke: none;
322
+ stroke-linecap: butt;
323
+ stroke-linejoin: miter;
324
+ fill: #f8766d;
325
+ "
326
+ />
327
+ <rect
328
+ x="572.81"
329
+ y="429.15"
330
+ width="78.98"
331
+ height="79.36"
332
+ style="
333
+ stroke-width: 1.07;
334
+ stroke: none;
335
+ stroke-linecap: butt;
336
+ stroke-linejoin: miter;
337
+ fill: #619cff;
338
+ "
339
+ />
340
+ </g>
341
+ <g clip-path="url(#cpMC4wMHw3MjAuMDB8MC4wMHw1NzYuMDA=)">
342
+ <text
343
+ x="28.21"
344
+ y="511.66"
345
+ text-anchor="end"
346
+ style="font-size: 8.8px; fill: #4d4d4d; font-family: 'Arial'"
347
+ textLength="4.90px"
348
+ lengthAdjust="spacingAndGlyphs"
349
+ >
350
+ 0
351
+ </text>
352
+ <text
353
+ x="28.21"
354
+ y="367.37"
355
+ text-anchor="end"
356
+ style="font-size: 8.8px; fill: #4d4d4d; font-family: 'Arial'"
357
+ textLength="9.79px"
358
+ lengthAdjust="spacingAndGlyphs"
359
+ >
360
+ 20
361
+ </text>
362
+ <text
363
+ x="28.21"
364
+ y="223.08"
365
+ text-anchor="end"
366
+ style="font-size: 8.8px; fill: #4d4d4d; font-family: 'Arial'"
367
+ textLength="9.79px"
368
+ lengthAdjust="spacingAndGlyphs"
369
+ >
370
+ 40
371
+ </text>
372
+ <text
373
+ x="28.21"
374
+ y="78.80"
375
+ text-anchor="end"
376
+ style="font-size: 8.8px; fill: #4d4d4d; font-family: 'Arial'"
377
+ textLength="9.79px"
378
+ lengthAdjust="spacingAndGlyphs"
379
+ >
380
+ 60
381
+ </text>
382
+ <polyline
383
+ points="30.40,508.51 33.14,508.51 "
384
+ style="
385
+ stroke-width: 1.07;
386
+ stroke: #333333;
387
+ stroke-linecap: butt;
388
+ "
389
+ />
390
+ <polyline
391
+ points="30.40,364.22 33.14,364.22 "
392
+ style="
393
+ stroke-width: 1.07;
394
+ stroke: #333333;
395
+ stroke-linecap: butt;
396
+ "
397
+ />
398
+ <polyline
399
+ points="30.40,219.93 33.14,219.93 "
400
+ style="
401
+ stroke-width: 1.07;
402
+ stroke: #333333;
403
+ stroke-linecap: butt;
404
+ "
405
+ />
406
+ <polyline
407
+ points="30.40,75.65 33.14,75.65 "
408
+ style="
409
+ stroke-width: 1.07;
410
+ stroke: #333333;
411
+ stroke-linecap: butt;
412
+ "
413
+ />
414
+ <polyline
415
+ points="85.79,533.61 85.79,530.87 "
416
+ style="
417
+ stroke-width: 1.07;
418
+ stroke: #333333;
419
+ stroke-linecap: butt;
420
+ "
421
+ />
422
+ <polyline
423
+ points="173.54,533.61 173.54,530.87 "
424
+ style="
425
+ stroke-width: 1.07;
426
+ stroke: #333333;
427
+ stroke-linecap: butt;
428
+ "
429
+ />
430
+ <polyline
431
+ points="261.29,533.61 261.29,530.87 "
432
+ style="
433
+ stroke-width: 1.07;
434
+ stroke: #333333;
435
+ stroke-linecap: butt;
436
+ "
437
+ />
438
+ <polyline
439
+ points="349.04,533.61 349.04,530.87 "
440
+ style="
441
+ stroke-width: 1.07;
442
+ stroke: #333333;
443
+ stroke-linecap: butt;
444
+ "
445
+ />
446
+ <polyline
447
+ points="436.79,533.61 436.79,530.87 "
448
+ style="
449
+ stroke-width: 1.07;
450
+ stroke: #333333;
451
+ stroke-linecap: butt;
452
+ "
453
+ />
454
+ <polyline
455
+ points="524.55,533.61 524.55,530.87 "
456
+ style="
457
+ stroke-width: 1.07;
458
+ stroke: #333333;
459
+ stroke-linecap: butt;
460
+ "
461
+ />
462
+ <polyline
463
+ points="612.30,533.61 612.30,530.87 "
464
+ style="
465
+ stroke-width: 1.07;
466
+ stroke: #333333;
467
+ stroke-linecap: butt;
468
+ "
469
+ />
470
+ <text
471
+ x="85.79"
472
+ y="542.11"
473
+ text-anchor="middle"
474
+ style="font-size: 8.8px; fill: #4d4d4d; font-family: 'Arial'"
475
+ textLength="29.36px"
476
+ lengthAdjust="spacingAndGlyphs"
477
+ >
478
+ 2seater
479
+ </text>
480
+ <text
481
+ x="173.54"
482
+ y="542.11"
483
+ text-anchor="middle"
484
+ style="font-size: 8.8px; fill: #4d4d4d; font-family: 'Arial'"
485
+ textLength="33.26px"
486
+ lengthAdjust="spacingAndGlyphs"
487
+ >
488
+ compact
489
+ </text>
490
+ <text
491
+ x="261.29"
492
+ y="542.11"
493
+ text-anchor="middle"
494
+ style="font-size: 8.8px; fill: #4d4d4d; font-family: 'Arial'"
495
+ textLength="29.82px"
496
+ lengthAdjust="spacingAndGlyphs"
497
+ >
498
+ midsize
499
+ </text>
500
+ <text
501
+ x="349.04"
502
+ y="542.11"
503
+ text-anchor="middle"
504
+ style="font-size: 8.8px; fill: #4d4d4d; font-family: 'Arial'"
505
+ textLength="30.32px"
506
+ lengthAdjust="spacingAndGlyphs"
507
+ >
508
+ minivan
509
+ </text>
510
+ <text
511
+ x="436.79"
512
+ y="542.11"
513
+ text-anchor="middle"
514
+ style="font-size: 8.8px; fill: #4d4d4d; font-family: 'Arial'"
515
+ textLength="25.44px"
516
+ lengthAdjust="spacingAndGlyphs"
517
+ >
518
+ pickup
519
+ </text>
520
+ <text
521
+ x="524.55"
522
+ y="542.11"
523
+ text-anchor="middle"
524
+ style="font-size: 8.8px; fill: #4d4d4d; font-family: 'Arial'"
525
+ textLength="47.46px"
526
+ lengthAdjust="spacingAndGlyphs"
527
+ >
528
+ subcompact
529
+ </text>
530
+ <text
531
+ x="612.30"
532
+ y="542.11"
533
+ text-anchor="middle"
534
+ style="font-size: 8.8px; fill: #4d4d4d; font-family: 'Arial'"
535
+ textLength="13.69px"
536
+ lengthAdjust="spacingAndGlyphs"
537
+ >
538
+ suv
539
+ </text>
540
+ <text
541
+ x="349.04"
542
+ y="554.57"
543
+ text-anchor="middle"
544
+ style="font-size: 11px; font-family: 'Arial'"
545
+ textLength="27.50px"
546
+ lengthAdjust="spacingAndGlyphs"
547
+ >
548
+ Class
549
+ </text>
550
+ <text
551
+ transform="translate(13.36,284.86) rotate(-90)"
552
+ text-anchor="middle"
553
+ style="font-size: 11px; font-family: 'Arial'"
554
+ textLength="29.36px"
555
+ lengthAdjust="spacingAndGlyphs"
556
+ >
557
+ Count
558
+ </text>
559
+ <rect
560
+ x="675.91"
561
+ y="245.63"
562
+ width="38.61"
563
+ height="78.47"
564
+ style="stroke-width: 1.07; stroke: none; fill: #ffffff"
565
+ />
566
+ <text
567
+ x="681.39"
568
+ y="260.14"
569
+ style="font-size: 11px; font-family: 'Arial'"
570
+ textLength="25.67px"
571
+ lengthAdjust="spacingAndGlyphs"
572
+ >
573
+ Drive
574
+ </text>
575
+ <rect
576
+ x="681.39"
577
+ y="266.78"
578
+ width="17.28"
579
+ height="17.28"
580
+ style="stroke-width: 1.07; stroke: none; fill: #f2f2f2"
581
+ />
582
+ <rect
583
+ x="682.09"
584
+ y="267.49"
585
+ width="15.86"
586
+ height="15.86"
587
+ style="
588
+ stroke-width: 1.07;
589
+ stroke: none;
590
+ stroke-linecap: butt;
591
+ stroke-linejoin: miter;
592
+ fill: #f8766d;
593
+ "
594
+ />
595
+ <rect
596
+ x="681.39"
597
+ y="284.06"
598
+ width="17.28"
599
+ height="17.28"
600
+ style="stroke-width: 1.07; stroke: none; fill: #f2f2f2"
601
+ />
602
+ <rect
603
+ x="682.09"
604
+ y="284.77"
605
+ width="15.86"
606
+ height="15.86"
607
+ style="
608
+ stroke-width: 1.07;
609
+ stroke: none;
610
+ stroke-linecap: butt;
611
+ stroke-linejoin: miter;
612
+ fill: #00ba38;
613
+ "
614
+ />
615
+ <rect
616
+ x="681.39"
617
+ y="301.34"
618
+ width="17.28"
619
+ height="17.28"
620
+ style="stroke-width: 1.07; stroke: none; fill: #f2f2f2"
621
+ />
622
+ <rect
623
+ x="682.09"
624
+ y="302.05"
625
+ width="15.86"
626
+ height="15.86"
627
+ style="
628
+ stroke-width: 1.07;
629
+ stroke: none;
630
+ stroke-linecap: butt;
631
+ stroke-linejoin: miter;
632
+ fill: #619cff;
633
+ "
634
+ />
635
+ <text
636
+ x="704.15"
637
+ y="278.57"
638
+ style="font-size: 8.8px; font-family: 'Arial'"
639
+ textLength="4.90px"
640
+ lengthAdjust="spacingAndGlyphs"
641
+ >
642
+ 4
643
+ </text>
644
+ <text
645
+ x="704.15"
646
+ y="295.85"
647
+ style="font-size: 8.8px; font-family: 'Arial'"
648
+ textLength="2.45px"
649
+ lengthAdjust="spacingAndGlyphs"
650
+ >
651
+ f
652
+ </text>
653
+ <text
654
+ x="704.15"
655
+ y="313.13"
656
+ style="font-size: 8.8px; font-family: 'Arial'"
657
+ textLength="2.93px"
658
+ lengthAdjust="spacingAndGlyphs"
659
+ >
660
+ r
661
+ </text>
662
+ <text
663
+ x="33.14"
664
+ y="31.05"
665
+ style="font-size: 11px; font-family: 'Arial'"
666
+ textLength="335.22px"
667
+ lengthAdjust="spacingAndGlyphs"
668
+ >
669
+ Segmented bar plot of the number of cars in each class by drive
670
+ type
671
+ </text>
672
+ <text
673
+ x="33.14"
674
+ y="14.93"
675
+ style="font-size: 13.2px; font-family: 'Arial'"
676
+ textLength="46.92px"
677
+ lengthAdjust="spacingAndGlyphs"
678
+ >
679
+ Bar Plot
680
+ </text>
681
+ <text
682
+ x="664.95"
683
+ y="568.67"
684
+ text-anchor="end"
685
+ style="font-size: 8.8px; font-family: 'Arial'"
686
+ textLength="168.34px"
687
+ lengthAdjust="spacingAndGlyphs"
688
+ >
689
+ Source: mpg dataset from ggplot2 package
690
+ </text>
691
+ </g>
692
+ </svg>
693
+ </div>
694
+ <br />
695
+ </div>
696
+ </div>
697
+ <script>
698
+ var maidr = {
699
+ type: 'stacked_bar',
700
+ id: 'stacked_bar',
701
+ orientation: 'horz',
702
+ elements: document.querySelectorAll(
703
+ '#stacked_bar g:nth-of-type(2) rect[style*="butt"]'
704
+ ),
705
+ labels: {
706
+ title: 'Bar Plot',
707
+ subtitle:
708
+ 'Segmented bar plot of the number of cars in each class by drive type',
709
+ caption: 'Source: mpg dataset from ggplot2 package',
710
+ x: 'Class',
711
+ y: 'Count',
712
+ fill: 'Drive',
713
+ },
714
+ axes: {
715
+ x: {
716
+ label: 'Class',
717
+ level: [
718
+ '2seater',
719
+ 'compact',
720
+ 'midsize',
721
+ 'minivan',
722
+ 'pickup',
723
+ 'subcompact',
724
+ 'suv',
725
+ ],
726
+ },
727
+ y: {
728
+ label: 'Count',
729
+ },
730
+ fill: {
731
+ label: 'Drive',
732
+ level: ['4', 'f', 'r'],
733
+ },
734
+ },
735
+ data: [
736
+ { x: '2seater', fill: 'r', y: 5 },
737
+ { x: 'compact', fill: '4', y: 12 },
738
+ { x: 'compact', fill: 'f', y: 35 },
739
+ { x: 'midsize', fill: '4', y: 3 },
740
+ { x: 'midsize', fill: 'f', y: 38 },
741
+ { x: 'minivan', fill: 'f', y: 11 },
742
+ { x: 'pickup', fill: '4', y: 33 },
743
+ { x: 'subcompact', fill: '4', y: 4 },
744
+ { x: 'subcompact', fill: 'f', y: 22 },
745
+ { x: 'subcompact', fill: 'r', y: 9 },
746
+ { x: 'suv', fill: '4', y: 51 },
747
+ { x: 'suv', fill: 'r', y: 11 },
748
+ ],
749
+ };
750
+ </script>
751
+ <script src="../src/js/constants.js"></script>
752
+ <script src="../src/js/audio.js"></script>
753
+ <script src="../src/js/display.js"></script>
754
+ <script src="../src/js/barplot.js"></script>
755
+ <script src="../src/js/boxplot.js"></script>
756
+ <script src="../src/js/heatmap.js"></script>
757
+ <script src="../src/js/scatterplot.js"></script>
758
+ <script src="../src/js/histogram.js"></script>
759
+ <script src="../src/js/segmented.js"></script>
760
+ <script src="../src/js/controls.js"></script>
761
+ <script src="../src/js/init.js"></script>
762
+ </body>
763
+ </html>