npm - maidr - Versions diffs - 1.0.0 - Mend

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

package/.Rbuildignore +1 -0
package/.eslintignore +3 -0
package/.eslintrc.json +6 -0
package/.github/workflows/build.yml +20 -0
package/.prettierignore +3 -0
package/.prettierrc.json +7 -0
package/.vscode/extensions.json +25 -0
package/.vscode/settings.json +30 -0
package/.vscode/tasks.json +57 -0
package/CHANGELOG.md +7 -0
package/CITATION.cff +21 -0
package/CONTRIBUTING.md +87 -0
package/LICENSE.md +595 -0
package/README.md +341 -0
package/dist/maidr.js +8851 -0
package/dist/maidr.min.js +1 -0
package/dist/styles.css +244 -0
package/dist/styles.min.css +1 -0
package/docs/Audio.html +1398 -0
package/docs/Constants.html +256 -0
package/docs/Description.html +582 -0
package/docs/Helper.html +364 -0
package/docs/LogError.html +905 -0
package/docs/Menu.html +665 -0
package/docs/Position.html +174 -0
package/docs/Resources.html +338 -0
package/docs/Review.html +333 -0
package/docs/Tracker.html +965 -0
package/docs/audio.js.html +635 -0
package/docs/constants.js.html +1242 -0
package/docs/display.js.html +1184 -0
package/docs/fonts/OpenSans-Bold-webfont.eot +0 -0
package/docs/fonts/OpenSans-Bold-webfont.svg +1830 -0
package/docs/fonts/OpenSans-Bold-webfont.woff +0 -0
package/docs/fonts/OpenSans-BoldItalic-webfont.eot +0 -0
package/docs/fonts/OpenSans-BoldItalic-webfont.svg +1830 -0
package/docs/fonts/OpenSans-BoldItalic-webfont.woff +0 -0
package/docs/fonts/OpenSans-Italic-webfont.eot +0 -0
package/docs/fonts/OpenSans-Italic-webfont.svg +1830 -0
package/docs/fonts/OpenSans-Italic-webfont.woff +0 -0
package/docs/fonts/OpenSans-Light-webfont.eot +0 -0
package/docs/fonts/OpenSans-Light-webfont.svg +1831 -0
package/docs/fonts/OpenSans-Light-webfont.woff +0 -0
package/docs/fonts/OpenSans-LightItalic-webfont.eot +0 -0
package/docs/fonts/OpenSans-LightItalic-webfont.svg +1835 -0
package/docs/fonts/OpenSans-LightItalic-webfont.woff +0 -0
package/docs/fonts/OpenSans-Regular-webfont.eot +0 -0
package/docs/fonts/OpenSans-Regular-webfont.svg +1831 -0
package/docs/fonts/OpenSans-Regular-webfont.woff +0 -0
package/docs/fonts/OpenSans-Semibold-webfont.eot +0 -0
package/docs/fonts/OpenSans-Semibold-webfont.svg +1830 -0
package/docs/fonts/OpenSans-Semibold-webfont.ttf +0 -0
package/docs/fonts/OpenSans-Semibold-webfont.woff +0 -0
package/docs/fonts/OpenSans-SemiboldItalic-webfont.eot +0 -0
package/docs/fonts/OpenSans-SemiboldItalic-webfont.svg +1830 -0
package/docs/fonts/OpenSans-SemiboldItalic-webfont.ttf +0 -0
package/docs/fonts/OpenSans-SemiboldItalic-webfont.woff +0 -0
package/docs/index.html +66 -0
package/docs/scripts/linenumber.js +25 -0
package/docs/scripts/prettify/Apache-License-2.0.txt +202 -0
package/docs/scripts/prettify/lang-css.js +2 -0
package/docs/scripts/prettify/prettify.js +28 -0
package/docs/styles/jsdoc-default.css +692 -0
package/docs/styles/prettify-jsdoc.css +111 -0
package/docs/styles/prettify-tomorrow.css +132 -0
package/examples/dev_charts/barplot.html +1056 -0
package/examples/dev_charts/boxplot.html +1856 -0
package/examples/dev_charts/boxplot_flipped.svg +727 -0
package/examples/dev_charts/heatmap.html +1217 -0
package/examples/dev_charts/scatterplot/displ.js +18 -0
package/examples/dev_charts/scatterplot/histogram_for_residual.svg +595 -0
package/examples/dev_charts/scatterplot/hwy.js +15 -0
package/examples/dev_charts/scatterplot/layers/point_layer.json +938 -0
package/examples/dev_charts/scatterplot/layers/smooth_layer.json +322 -0
package/examples/dev_charts/scatterplot/point_layer.js +938 -0
package/examples/dev_charts/scatterplot/prediction_array.js +31 -0
package/examples/dev_charts/scatterplot/prediction_array.json +31 -0
package/examples/dev_charts/scatterplot/residual_array.js +29 -0
package/examples/dev_charts/scatterplot/residual_array.json +29 -0
package/examples/dev_charts/scatterplot/scatterplot.svg +1428 -0
package/examples/dev_charts/scatterplot/scatterplot_data.html +2838 -0
package/examples/dev_charts/scatterplot/scatterplot_no_jitter_point_only.svg +1393 -0
package/examples/dev_charts/scatterplot/scatterplot_no_jitter_with_bestfit.svg +1424 -0
package/examples/dev_charts/scatterplot/scatterplot_no_jitter_with_loess_curve.svg +1402 -0
package/examples/dev_charts/scatterplot/smooth_layer.js +322 -0
package/examples/dev_charts/scatterplot.html +4560 -0
package/examples/dodged_bar/dodged_bar.png +0 -0
package/examples/dodged_bar/dodged_bar.svg +198 -0
package/examples/dodged_bar/schema.json +41 -0
package/examples/histogram/histogram_tutorial.svg +482 -0
package/examples/histogram/histogram_tutorial_raw_data.json +362 -0
package/examples/histogram/histogram_user_study.svg +578 -0
package/examples/histogram/histogram_user_study_raw_data.json +362 -0
package/examples/lineplot/lineplot_sample.svg +126 -0
package/examples/lineplot/lineplot_sample_raw_data.json +1 -0
package/examples/lineplot/point+lineplot_sample.svg +700 -0
package/examples/other/audio_oscillator_boxplot.js +95 -0
package/examples/other/barplot_labels.svg +314 -0
package/examples/other/barplot_user_study.svg +313 -0
package/examples/other/boxplot.html +927 -0
package/examples/other/boxplot_data_frame.html +568 -0
package/examples/other/boxplot_label.svg +751 -0
package/examples/other/braille-display_boxplot.js +79 -0
package/examples/other/control_boxplot.js +55 -0
package/examples/other/draft.js +56 -0
package/examples/other/getData.html +400 -0
package/examples/other/getData.js +41 -0
package/examples/other/ggplot_to_svg.R +371 -0
package/examples/other/heatmap.svg +582 -0
package/examples/other/heatmap_label.svg +608 -0
package/examples/other/multiple_barplot.html +2250 -0
package/examples/other/new_scatterplot_user_study_point_layer.json +122 -0
package/examples/other/py_binder_output.html +1167 -0
package/examples/other/scatterplot_label.svg +1429 -0
package/examples/other/seaborn_plot.py +9 -0
package/examples/other/svglite_bar.svg +136 -0
package/examples/other/tutorial_boxplot.svg +727 -0
package/examples/other/tutorial_boxplot_data.json +72 -0
package/examples/other/user_study_boxplot.svg +676 -0
package/examples/stacked_bar/schema.json +41 -0
package/examples/stacked_bar/stack_bar.png +0 -0
package/examples/stacked_bar/stacked_bar.svg +180 -0
package/examples/stacked_normalized_bar/stacked_normalized_bar.png +0 -0
package/examples/stacked_normalized_bar/stacked_normalized_bar.svg +189 -0
package/examples/static/barplot.svg +263 -0
package/examples/static/barplot_diamonds_gridSVG.svg +254 -0
package/examples/static/boxplot.svg +424 -0
package/examples/static/heatmap.svg +373 -0
package/examples/static/heatmap_penguins_table.html +486 -0
package/examples/static/scatterplot.svg +530 -0
package/examples/svglite/task_heatmap.html +802 -0
package/examples/svglite/task_heatmap.svg +111 -0
package/examples/svglite/tutorial_bar.svg +136 -0
package/examples/svglite/tutorial_bar_plot.html +504 -0
package/examples/svglite/tutorial_boxplot.html +1850 -0
package/examples/svglite/tutorial_boxplot.svg +727 -0
package/examples/svglite/tutorial_scatterplot.html +3135 -0
package/examples/svglite/tutorial_scatterplot.svg +311 -0
package/gulpfile.js +49 -0
package/index.html +40 -0
package/jsconfig.json +10 -0
package/jsdoc.json +19 -0
package/package.json +47 -0
package/src/css/styles.css +241 -0
package/src/js/__tests__/audio.test.js +49 -0
package/src/js/__tests__/constants.test.js +622 -0
package/src/js/audio.js +575 -0
package/src/js/barplot.js +254 -0
package/src/js/boxplot.js +682 -0
package/src/js/constants.js +1182 -0
package/src/js/controls.js +3182 -0
package/src/js/display.js +1124 -0
package/src/js/heatmap.js +411 -0
package/src/js/histogram.js +134 -0
package/src/js/init.js +427 -0
package/src/js/lineplot.js +219 -0
package/src/js/scatterplot.js +619 -0
package/src/js/segmented.js +268 -0
package/user_study_pilot/binder_test.html +526 -0
package/user_study_pilot/data/barplot_user_study.svg +492 -0
package/user_study_pilot/data/barplot_user_study_raw_data.json +22 -0
package/user_study_pilot/data/boxplot_tutorial.json +72 -0
package/user_study_pilot/data/boxplot_tutorial_horizontal.svg +727 -0
package/user_study_pilot/data/boxplot_user_study.json +52 -0
package/user_study_pilot/data/boxplot_user_study_vertical.svg +675 -0
package/user_study_pilot/data/boxplot_user_study_vertical_horizontal.svg +676 -0
package/user_study_pilot/data/heatmap_user_study.svg +719 -0
package/user_study_pilot/data/heatmap_user_study_raw_data.json +127 -0
package/user_study_pilot/data/new_barplot_user_study.svg +269 -0
package/user_study_pilot/data/new_heatmap_user_study.svg +367 -0
package/user_study_pilot/data/new_scatterplot_user_study.svg +603 -0
package/user_study_pilot/data/new_scatterplot_user_study_point_layer.json +122 -0
package/user_study_pilot/data/scatterplot_user_study (1).svg +321 -0
package/user_study_pilot/data/scatterplot_user_study.svg +603 -0
package/user_study_pilot/data/scatterplot_user_study_point_layer.json +122 -0
package/user_study_pilot/data/scatterplot_user_study_smooth_layer.json +322 -0
package/user_study_pilot/intro.html +215 -0
package/user_study_pilot/jaws_settings/Chrome.JDF +10 -0
package/user_study_pilot/jaws_settings/Firefox.JDF +10 -0
package/user_study_pilot/jaws_settings/backup_utf8/Chrome.JDF +10 -0
package/user_study_pilot/jaws_settings/backup_utf8/Firefox.JDF +10 -0
package/user_study_pilot/jaws_settings/backup_utf8/msedge.JDF +10 -0
package/user_study_pilot/jaws_settings/msedge.JDF +10 -0
package/user_study_pilot/nvda_settings/chrome.dic +10 -0
package/user_study_pilot/nvda_settings/default.dic +10 -0
package/user_study_pilot/nvda_settings/firefox.dic +10 -0
package/user_study_pilot/nvda_settings/msedge.dic +10 -0
package/user_study_pilot/scatterplot.html +4560 -0
package/user_study_pilot/seaborn_test.html +1059 -0
package/user_study_pilot/svglite_test.html +534 -0
package/user_study_pilot/task1_bar_plot.html +1111 -0
package/user_study_pilot/task2_heatmap.html +1661 -0
package/user_study_pilot/task3_boxplot_horizontal.html +1690 -0
package/user_study_pilot/task3_boxplot_vertical.html +1689 -0
package/user_study_pilot/task4_scatterplot.html +2091 -0
package/user_study_pilot/tutorial1_bar_plot.html +1159 -0
package/user_study_pilot/tutorial2_heatmap.html +1276 -0
package/user_study_pilot/tutorial3_boxplot_horizontal.html +1861 -0
package/user_study_pilot/tutorial3_boxplot_vertical.html +1807 -0
package/user_study_pilot/tutorial4_scatterplot.html +5893 -0
package/user_study_pilot/tutorial5_histogram.html +1553 -0
package/user_study_pilot/tutorial6_lineplot.html +1011 -0
package/user_study_pilot/tutorial7_stacked.html +763 -0
package/user_study_pilot/tutorial8_stacked_normalized.html +796 -0
package/user_study_pilot/tutorial9_dodged_bar.html +831 -0
package/user_study_pilot/voiceover_settings/user_study_VoiceOver Archive.voprefs +573 -0

package/user_study_pilot/svglite_test.html ADDED Viewed

@@ -0,0 +1,534 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Tutorial 1: Bar Chart</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta charset="utf-8" />
+    <!-- <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"> -->
+    <link rel="stylesheet" href="../src/styles.css" type="text/css" />
+  </head>
+  <body>
+    <div class="container mt-3">
+      <div id="container" data-plottype="bar">
+        <div id="braille-div">
+          <input id="braille-input" class="braille-input hidden" type="text" />
+        </div>
+        <!-- barplot_diamonds_gridSVG.svg -->
+        <div id="svg-container">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            xmlns:xlink="http://www.w3.org/1999/xlink"
+            class="svglite"
+            width="720.00pt"
+            height="576.00pt"
+            viewBox="0 0 720.00 576.00"
+          >
+            <defs>
+              <style type="text/css">
+                <![CDATA[
+                .svglite line,
+                .svglite polyline,
+                .svglite polygon,
+                .svglite path,
+                .svglite rect,
+                .svglite circle {
+                   fill: none;
+                   stroke: #000000;
+                   stroke-linecap: round;
+                   stroke-linejoin: round;
+                   stroke-miterlimit: 10.00;
+                }
+                .svglite text {
+                   white-space: pre;
+                }
+                ]]>
+              </style>
+            </defs>
+            <rect
+              width="100%"
+              height="100%"
+              style="stroke: none; fill: #ffffff"
+            />
+            <defs>
+              <clipPath id="cpMC4wMHw3MjAuMDB8MC4wMHw1NzYuMDA=">
+                <rect x="0.00" y="0.00" width="720.00" height="576.00" />
+              </clipPath>
+            </defs>
+            <g clip-path="url(#cpMC4wMHw3MjAuMDB8MC4wMHw1NzYuMDA=)">
+              <rect
+                x="0.00"
+                y="0.00"
+                width="720.00"
+                height="576.00"
+                style="stroke-width: 1.07; stroke: #ffffff; fill: #ffffff"
+              />
+            </g>
+            <defs>
+              <clipPath id="cpNDcuODN8NzE0LjUyfDIzLjE4fDU0NC41MA==">
+                <rect x="47.83" y="23.18" width="666.69" height="521.33" />
+              </clipPath>
+            </defs>
+            <g clip-path="url(#cpNDcuODN8NzE0LjUyfDIzLjE4fDU0NC41MA==)">
+              <rect
+                x="47.83"
+                y="23.18"
+                width="666.69"
+                height="521.33"
+                style="stroke-width: 1.07; stroke: none; fill: #ebebeb"
+              />
+              <polyline
+                points="47.83,465.83 714.52,465.83 "
+                style="
+                  stroke-width: 0.53;
+                  stroke: #ffffff;
+                  stroke-linecap: butt;
+                "
+              />
+              <polyline
+                points="47.83,355.87 714.52,355.87 "
+                style="
+                  stroke-width: 0.53;
+                  stroke: #ffffff;
+                  stroke-linecap: butt;
+                "
+              />
+              <polyline
+                points="47.83,245.92 714.52,245.92 "
+                style="
+                  stroke-width: 0.53;
+                  stroke: #ffffff;
+                  stroke-linecap: butt;
+                "
+              />
+              <polyline
+                points="47.83,135.96 714.52,135.96 "
+                style="
+                  stroke-width: 0.53;
+                  stroke: #ffffff;
+                  stroke-linecap: butt;
+                "
+              />
+              <polyline
+                points="47.83,26.00 714.52,26.00 "
+                style="
+                  stroke-width: 0.53;
+                  stroke: #ffffff;
+                  stroke-linecap: butt;
+                "
+              />
+              <polyline
+                points="47.83,520.81 714.52,520.81 "
+                style="
+                  stroke-width: 1.07;
+                  stroke: #ffffff;
+                  stroke-linecap: butt;
+                "
+              />
+              <polyline
+                points="47.83,410.85 714.52,410.85 "
+                style="
+                  stroke-width: 1.07;
+                  stroke: #ffffff;
+                  stroke-linecap: butt;
+                "
+              />
+              <polyline
+                points="47.83,300.89 714.52,300.89 "
+                style="
+                  stroke-width: 1.07;
+                  stroke: #ffffff;
+                  stroke-linecap: butt;
+                "
+              />
+              <polyline
+                points="47.83,190.94 714.52,190.94 "
+                style="
+                  stroke-width: 1.07;
+                  stroke: #ffffff;
+                  stroke-linecap: butt;
+                "
+              />
+              <polyline
+                points="47.83,80.98 714.52,80.98 "
+                style="
+                  stroke-width: 1.07;
+                  stroke: #ffffff;
+                  stroke-linecap: butt;
+                "
+              />
+              <polyline
+                points="124.75,544.50 124.75,23.18 "
+                style="
+                  stroke-width: 1.07;
+                  stroke: #ffffff;
+                  stroke-linecap: butt;
+                "
+              />
+              <polyline
+                points="252.96,544.50 252.96,23.18 "
+                style="
+                  stroke-width: 1.07;
+                  stroke: #ffffff;
+                  stroke-linecap: butt;
+                "
+              />
+              <polyline
+                points="381.17,544.50 381.17,23.18 "
+                style="
+                  stroke-width: 1.07;
+                  stroke: #ffffff;
+                  stroke-linecap: butt;
+                "
+              />
+              <polyline
+                points="509.38,544.50 509.38,23.18 "
+                style="
+                  stroke-width: 1.07;
+                  stroke: #ffffff;
+                  stroke-linecap: butt;
+                "
+              />
+              <polyline
+                points="637.59,544.50 637.59,23.18 "
+                style="
+                  stroke-width: 1.07;
+                  stroke: #ffffff;
+                  stroke-linecap: butt;
+                "
+              />
+              <rect
+                x="67.06"
+                y="485.40"
+                width="115.39"
+                height="35.41"
+                style="
+                  stroke-width: 1.07;
+                  stroke: none;
+                  stroke-linecap: butt;
+                  stroke-linejoin: miter;
+                  fill: #595959;
+                "
+              />
+              <rect
+                x="195.27"
+                y="412.92"
+                width="115.39"
+                height="107.89"
+                style="
+                  stroke-width: 1.07;
+                  stroke: none;
+                  stroke-linecap: butt;
+                  stroke-linejoin: miter;
+                  fill: #595959;
+                "
+              />
+              <rect
+                x="323.48"
+                y="255.11"
+                width="115.39"
+                height="265.70"
+                style="
+                  stroke-width: 1.07;
+                  stroke: none;
+                  stroke-linecap: butt;
+                  stroke-linejoin: miter;
+                  fill: #595959;
+                "
+              />
+              <rect
+                x="451.69"
+                y="217.53"
+                width="115.39"
+                height="303.28"
+                style="
+                  stroke-width: 1.07;
+                  stroke: none;
+                  stroke-linecap: butt;
+                  stroke-linejoin: miter;
+                  fill: #595959;
+                "
+              />
+              <rect
+                x="579.90"
+                y="46.87"
+                width="115.39"
+                height="473.93"
+                style="
+                  stroke-width: 1.07;
+                  stroke: none;
+                  stroke-linecap: butt;
+                  stroke-linejoin: miter;
+                  fill: #595959;
+                "
+              />
+            </g>
+            <g clip-path="url(#cpMC4wMHw3MjAuMDB8MC4wMHw1NzYuMDA=)">
+              <text
+                x="42.89"
+                y="523.96"
+                text-anchor="end"
+                style="font-size: 8.8px; fill: #4d4d4d; font-family: 'Arial'"
+                textLength="4.90px"
+                lengthAdjust="spacingAndGlyphs"
+              >
+                0
+              </text>
+              <text
+                x="42.89"
+                y="414.00"
+                text-anchor="end"
+                style="font-size: 8.8px; fill: #4d4d4d; font-family: 'Arial'"
+                textLength="19.58px"
+                lengthAdjust="spacingAndGlyphs"
+              >
+                5000
+              </text>
+              <text
+                x="42.89"
+                y="304.04"
+                text-anchor="end"
+                style="font-size: 8.8px; fill: #4d4d4d; font-family: 'Arial'"
+                textLength="24.48px"
+                lengthAdjust="spacingAndGlyphs"
+              >
+                10000
+              </text>
+              <text
+                x="42.89"
+                y="194.09"
+                text-anchor="end"
+                style="font-size: 8.8px; fill: #4d4d4d; font-family: 'Arial'"
+                textLength="24.48px"
+                lengthAdjust="spacingAndGlyphs"
+              >
+                15000
+              </text>
+              <text
+                x="42.89"
+                y="84.13"
+                text-anchor="end"
+                style="font-size: 8.8px; fill: #4d4d4d; font-family: 'Arial'"
+                textLength="24.48px"
+                lengthAdjust="spacingAndGlyphs"
+              >
+                20000
+              </text>
+              <polyline
+                points="45.09,520.81 47.83,520.81 "
+                style="
+                  stroke-width: 1.07;
+                  stroke: #333333;
+                  stroke-linecap: butt;
+                "
+              />
+              <polyline
+                points="45.09,410.85 47.83,410.85 "
+                style="
+                  stroke-width: 1.07;
+                  stroke: #333333;
+                  stroke-linecap: butt;
+                "
+              />
+              <polyline
+                points="45.09,300.89 47.83,300.89 "
+                style="
+                  stroke-width: 1.07;
+                  stroke: #333333;
+                  stroke-linecap: butt;
+                "
+              />
+              <polyline
+                points="45.09,190.94 47.83,190.94 "
+                style="
+                  stroke-width: 1.07;
+                  stroke: #333333;
+                  stroke-linecap: butt;
+                "
+              />
+              <polyline
+                points="45.09,80.98 47.83,80.98 "
+                style="
+                  stroke-width: 1.07;
+                  stroke: #333333;
+                  stroke-linecap: butt;
+                "
+              />
+              <polyline
+                points="124.75,547.24 124.75,544.50 "
+                style="
+                  stroke-width: 1.07;
+                  stroke: #333333;
+                  stroke-linecap: butt;
+                "
+              />
+              <polyline
+                points="252.96,547.24 252.96,544.50 "
+                style="
+                  stroke-width: 1.07;
+                  stroke: #333333;
+                  stroke-linecap: butt;
+                "
+              />
+              <polyline
+                points="381.17,547.24 381.17,544.50 "
+                style="
+                  stroke-width: 1.07;
+                  stroke: #333333;
+                  stroke-linecap: butt;
+                "
+              />
+              <polyline
+                points="509.38,547.24 509.38,544.50 "
+                style="
+                  stroke-width: 1.07;
+                  stroke: #333333;
+                  stroke-linecap: butt;
+                "
+              />
+              <polyline
+                points="637.59,547.24 637.59,544.50 "
+                style="
+                  stroke-width: 1.07;
+                  stroke: #333333;
+                  stroke-linecap: butt;
+                "
+              />
+              <text
+                x="124.75"
+                y="555.74"
+                text-anchor="middle"
+                style="font-size: 8.8px; fill: #4d4d4d; font-family: 'Arial'"
+                textLength="15.15px"
+                lengthAdjust="spacingAndGlyphs"
+              >
+                Fair
+              </text>
+              <text
+                x="252.96"
+                y="555.74"
+                text-anchor="middle"
+                style="font-size: 8.8px; fill: #4d4d4d; font-family: 'Arial'"
+                textLength="21.54px"
+                lengthAdjust="spacingAndGlyphs"
+              >
+                Good
+              </text>
+              <text
+                x="381.17"
+                y="555.74"
+                text-anchor="middle"
+                style="font-size: 8.8px; fill: #4d4d4d; font-family: 'Arial'"
+                textLength="41.59px"
+                lengthAdjust="spacingAndGlyphs"
+              >
+                Very Good
+              </text>
+              <text
+                x="509.38"
+                y="555.74"
+                text-anchor="middle"
+                style="font-size: 8.8px; fill: #4d4d4d; font-family: 'Arial'"
+                textLength="35.20px"
+                lengthAdjust="spacingAndGlyphs"
+              >
+                Premium
+              </text>
+              <text
+                x="637.59"
+                y="555.74"
+                text-anchor="middle"
+                style="font-size: 8.8px; fill: #4d4d4d; font-family: 'Arial'"
+                textLength="19.09px"
+                lengthAdjust="spacingAndGlyphs"
+              >
+                Ideal
+              </text>
+              <text
+                x="381.17"
+                y="568.20"
+                text-anchor="middle"
+                style="font-size: 11px; font-family: 'Arial'"
+                textLength="17.12px"
+                lengthAdjust="spacingAndGlyphs"
+              >
+                Cut
+              </text>
+              <text
+                transform="translate(13.36,283.84) rotate(-90)"
+                text-anchor="middle"
+                style="font-size: 11px; font-family: 'Arial'"
+                textLength="29.36px"
+                lengthAdjust="spacingAndGlyphs"
+              >
+                Count
+              </text>
+              <text
+                x="47.83"
+                y="14.93"
+                style="font-size: 13.2px; font-family: 'Arial'"
+                textLength="196.48px"
+                lengthAdjust="spacingAndGlyphs"
+              >
+                The Number of Diamonds by Cut.
+              </text>
+            </g>
+          </svg>
+        </div>
+        <br />
+        <div id="info" aria-live="assertive" aria-atomic="true">
+          <p id="x"></p>
+          <p id="y"></p>
+        </div>
+        <div
+          id="announcements"
+          aria-live="assertive"
+          aria-atomic="true"
+          class="mb-3"
+        ></div>
+      </div>
+    </div>
+    <script>
+      var maidr = {
+        type: 'bar',
+        legend_x: 'cut',
+        legend_y: 'count',
+        title: 'The Number of Diamonds by Cut.',
+        // elements: document.querySelectorAll('#svg-container > svg > g > rect[width="115.39"'),
+        data: [
+          {
+            label: 'Fair',
+            value: 1610,
+          },
+          {
+            label: 'Good',
+            value: 4906,
+          },
+          {
+            label: 'Very Good',
+            value: 12082,
+          },
+          {
+            label: 'Premium',
+            value: 13791,
+          },
+          {
+            label: 'Ideal',
+            value: 21551,
+          },
+        ],
+      };
+      //var barplotBars = document.querySelectorAll('g[id^="geom_rect"] > rect');
+      //var barplotColumns = ["Fair", "Good", "Very Good", "Premium", "Ideal"];
+      //var barplotLegend = { "x": "cut", "y": "count" };
+      //var barplotData = [1610, 4906, 12082, 13791, 21551];
+      //var barplotTitle = "The Number of Diamonds by Cut.";
+    </script>
+    <script src="../src/constants.js"></script>
+    <script src="../src/audio.js"></script>
+    <script src="../src/display.js"></script>
+    <script src="../src/barplot.js"></script>
+  </body>
+</html>