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