maidr 1.0.0

package/examples/svglite/tutorial_scatterplot.svg

@@ -0,0 +1,311 @@
+<?xml version='1.0' encoding='UTF-8' ?>
+<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='cpMzMuMTR8NzE0LjUyfDIzLjE4fDU0NC41MA=='>
+    <rect x='33.14' y='23.18' width='681.38' height='521.33' />
+  </clipPath>
+</defs>
+<g clip-path='url(#cpMzMuMTR8NzE0LjUyfDIzLjE4fDU0NC41MA==)'>
+<rect x='33.14' y='23.18' width='681.38' height='521.33' style='stroke-width: 1.07; stroke: none; fill: #EBEBEB;' />
+<polyline points='33.14,476.38 714.52,476.38 ' style='stroke-width: 0.53; stroke: #FFFFFF; stroke-linecap: butt;' />
+<polyline points='33.14,328.27 714.52,328.27 ' style='stroke-width: 0.53; stroke: #FFFFFF; stroke-linecap: butt;' />
+<polyline points='33.14,180.17 714.52,180.17 ' style='stroke-width: 0.53; stroke: #FFFFFF; stroke-linecap: butt;' />
+<polyline points='33.14,32.06 714.52,32.06 ' style='stroke-width: 0.53; stroke: #FFFFFF; stroke-linecap: butt;' />
+<polyline points='52.64,544.50 52.64,23.18 ' style='stroke-width: 0.53; stroke: #FFFFFF; stroke-linecap: butt;' />
+<polyline points='167.35,544.50 167.35,23.18 ' style='stroke-width: 0.53; stroke: #FFFFFF; stroke-linecap: butt;' />
+<polyline points='282.06,544.50 282.06,23.18 ' style='stroke-width: 0.53; stroke: #FFFFFF; stroke-linecap: butt;' />
+<polyline points='396.77,544.50 396.77,23.18 ' style='stroke-width: 0.53; stroke: #FFFFFF; stroke-linecap: butt;' />
+<polyline points='511.48,544.50 511.48,23.18 ' style='stroke-width: 0.53; stroke: #FFFFFF; stroke-linecap: butt;' />
+<polyline points='626.19,544.50 626.19,23.18 ' style='stroke-width: 0.53; stroke: #FFFFFF; stroke-linecap: butt;' />
+<polyline points='33.14,402.32 714.52,402.32 ' style='stroke-width: 1.07; stroke: #FFFFFF; stroke-linecap: butt;' />
+<polyline points='33.14,254.22 714.52,254.22 ' style='stroke-width: 1.07; stroke: #FFFFFF; stroke-linecap: butt;' />
+<polyline points='33.14,106.12 714.52,106.12 ' style='stroke-width: 1.07; stroke: #FFFFFF; stroke-linecap: butt;' />
+<polyline points='109.99,544.50 109.99,23.18 ' style='stroke-width: 1.07; stroke: #FFFFFF; stroke-linecap: butt;' />
+<polyline points='224.71,544.50 224.71,23.18 ' style='stroke-width: 1.07; stroke: #FFFFFF; stroke-linecap: butt;' />
+<polyline points='339.42,544.50 339.42,23.18 ' style='stroke-width: 1.07; stroke: #FFFFFF; stroke-linecap: butt;' />
+<polyline points='454.13,544.50 454.13,23.18 ' style='stroke-width: 1.07; stroke: #FFFFFF; stroke-linecap: butt;' />
+<polyline points='568.84,544.50 568.84,23.18 ' style='stroke-width: 1.07; stroke: #FFFFFF; stroke-linecap: butt;' />
+<polyline points='683.55,544.50 683.55,23.18 ' style='stroke-width: 1.07; stroke: #FFFFFF; stroke-linecap: butt;' />
+<circle cx='87.05' cy='269.03' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='87.05' cy='269.03' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='109.99' cy='239.41' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='109.99' cy='254.22' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='201.76' cy='313.46' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='201.76' cy='313.46' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='236.18' cy='298.65' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='87.05' cy='313.46' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='87.05' cy='328.27' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='109.99' cy='283.84' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='109.99' cy='298.65' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='201.76' cy='328.27' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='201.76' cy='328.27' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='236.18' cy='328.27' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='236.18' cy='328.27' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='201.76' cy='343.08' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='236.18' cy='328.27' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='362.36' cy='357.89' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='488.54' cy='402.32' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='488.54' cy='476.38' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='488.54' cy='402.32' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='534.42' cy='446.76' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='568.84' cy='446.76' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='534.42' cy='313.46' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='534.42' cy='357.89' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='591.78' cy='313.46' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='591.78' cy='328.27' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='683.55' cy='343.08' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='488.54' cy='417.13' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='488.54' cy='491.19' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='534.42' cy='476.38' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='626.19' cy='446.76' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='155.88' cy='298.65' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='155.88' cy='254.22' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='236.18' cy='313.46' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='282.06' cy='269.03' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='293.53' cy='313.46' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='155.88' cy='343.08' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='224.71' cy='343.08' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='259.12' cy='372.70' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='259.12' cy='372.70' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='259.12' cy='343.08' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='259.12' cy='343.08' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='259.12' cy='446.76' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='316.47' cy='372.70' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='316.47' cy='387.51' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='316.47' cy='357.89' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='339.42' cy='357.89' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='305.00' cy='417.13' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='305.00' cy='431.94' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='327.94' cy='446.76' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='327.94' cy='446.76' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='419.71' cy='417.13' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='419.71' cy='417.13' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='419.71' cy='520.81' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='477.07' cy='446.76' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='477.07' cy='476.38' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='327.94' cy='446.76' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='419.71' cy='446.76' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='419.71' cy='520.81' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='419.71' cy='446.76' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='477.07' cy='461.57' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='534.42' cy='431.94' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='557.37' cy='476.38' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='419.71' cy='461.57' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='419.71' cy='520.81' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='419.71' cy='446.76' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='419.71' cy='446.76' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='419.71' cy='461.57' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='419.71' cy='520.81' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='477.07' cy='476.38' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='477.07' cy='461.57' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='534.42' cy='446.76' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='557.37' cy='476.38' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='408.24' cy='446.76' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='500.01' cy='446.76' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='500.01' cy='431.94' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='339.42' cy='446.76' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='339.42' cy='417.13' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='339.42' cy='446.76' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='339.42' cy='417.13' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='408.24' cy='417.13' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='454.13' cy='446.76' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='362.36' cy='446.76' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='362.36' cy='446.76' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='408.24' cy='461.57' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='408.24' cy='461.57' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='408.24' cy='446.76' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='500.01' cy='476.38' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='500.01' cy='446.76' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='316.47' cy='313.46' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='316.47' cy='328.27' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='339.42' cy='313.46' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='339.42' cy='343.08' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='408.24' cy='387.51' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='408.24' cy='372.70' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='408.24' cy='357.89' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='408.24' cy='372.70' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='500.01' cy='402.32' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='64.11' cy='209.79' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='64.11' cy='224.60' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='64.11' cy='224.60' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='64.11' cy='269.03' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='64.11' cy='224.60' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='87.05' cy='194.98' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='87.05' cy='165.36' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='87.05' cy='165.36' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='109.99' cy='269.03' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='155.88' cy='313.46' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='155.88' cy='298.65' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='155.88' cy='254.22' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='155.88' cy='239.41' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='167.35' cy='313.46' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='167.35' cy='313.46' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='259.12' cy='283.84' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='109.99' cy='313.46' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='109.99' cy='269.03' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='109.99' cy='283.84' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='109.99' cy='298.65' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='190.29' cy='343.08' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='190.29' cy='343.08' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='190.29' cy='343.08' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='224.71' cy='372.70' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='305.00' cy='417.13' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='339.42' cy='402.32' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='419.71' cy='446.76' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='419.71' cy='520.81' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='419.71' cy='417.13' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='534.42' cy='431.94' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='580.31' cy='491.19' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='339.42' cy='476.38' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='362.36' cy='431.94' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='385.30' cy='431.94' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='408.24' cy='476.38' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='500.01' cy='446.76' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='500.01' cy='461.57' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='500.01' cy='431.94' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='339.42' cy='446.76' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='339.42' cy='417.13' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='408.24' cy='417.13' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='454.13' cy='446.76' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='155.88' cy='269.03' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='155.88' cy='298.65' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='167.35' cy='239.41' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='167.35' cy='224.60' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='282.06' cy='298.65' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='282.06' cy='313.46' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='224.71' cy='313.46' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='224.71' cy='328.27' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='282.06' cy='328.27' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='259.12' cy='446.76' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='259.12' cy='446.76' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='339.42' cy='402.32' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='522.95' cy='431.94' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='236.18' cy='313.46' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='316.47' cy='313.46' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='316.47' cy='298.65' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='316.47' cy='283.84' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='488.54' cy='328.27' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='167.35' cy='328.27' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='167.35' cy='343.08' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='167.35' cy='298.65' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='167.35' cy='328.27' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='167.35' cy='313.46' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='167.35' cy='357.89' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='132.94' cy='313.46' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='132.94' cy='313.46' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='167.35' cy='313.46' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='167.35' cy='313.46' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='167.35' cy='328.27' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='167.35' cy='298.65' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='167.35' cy='328.27' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='167.35' cy='298.65' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='190.29' cy='402.32' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='190.29' cy='402.32' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='270.59' cy='417.13' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='270.59' cy='446.76' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='339.42' cy='402.32' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='419.71' cy='446.76' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='132.94' cy='269.03' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='132.94' cy='298.65' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='155.88' cy='239.41' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='155.88' cy='239.41' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='224.71' cy='313.46' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='224.71' cy='313.46' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='282.06' cy='283.84' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='132.94' cy='298.65' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='132.94' cy='269.03' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='155.88' cy='239.41' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='155.88' cy='239.41' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='224.71' cy='313.46' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='224.71' cy='313.46' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='259.12' cy='298.65' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='87.05' cy='254.22' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='87.05' cy='209.79' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='87.05' cy='180.17' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='87.05' cy='150.55' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='87.05' cy='180.17' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='419.71' cy='476.38' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='534.42' cy='431.94' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='190.29' cy='402.32' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='190.29' cy='402.32' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='190.29' cy='372.70' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='270.59' cy='446.76' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='270.59' cy='417.13' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='339.42' cy='431.94' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='339.42' cy='402.32' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='109.99' cy='269.03' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='109.99' cy='313.46' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='109.99' cy='269.03' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='109.99' cy='269.03' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='201.76' cy='343.08' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='98.52' cy='46.87' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='109.99' cy='269.03' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='109.99' cy='313.46' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='109.99' cy='269.03' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='109.99' cy='269.03' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='167.35' cy='269.03' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='167.35' cy='269.03' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='201.76' cy='357.89' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='201.76' cy='343.08' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='98.52' cy='46.87' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='98.52' cy='91.31' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='109.99' cy='269.03' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='109.99' cy='313.46' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='167.35' cy='283.84' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='167.35' cy='269.03' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='87.05' cy='269.03' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='87.05' cy='269.03' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='109.99' cy='283.84' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='109.99' cy='269.03' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='201.76' cy='313.46' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='201.76' cy='313.46' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<circle cx='293.53' cy='313.46' r='1.95' style='stroke-width: 0.71; fill: #000000;' />
+<polyline points='64.11,208.41 71.95,217.03 79.79,225.45 87.63,233.66 95.47,241.62 103.31,249.33 111.16,256.83 119.00,264.09 126.84,271.13 134.68,277.94 142.52,284.55 150.36,290.97 158.20,297.19 166.04,303.16 173.88,308.88 181.72,314.42 189.57,319.80 197.41,324.88 205.25,329.48 213.09,333.75 220.93,337.83 228.77,341.85 236.61,345.96 244.45,350.05 252.29,353.97 260.13,357.77 267.98,361.48 275.82,365.15 283.66,368.79 291.50,372.47 299.34,376.20 307.18,380.03 315.02,384.00 322.86,388.13 330.70,392.49 338.54,397.19 346.39,402.15 354.23,407.25 362.07,412.35 369.91,417.32 377.75,422.04 385.59,426.38 393.43,430.21 401.27,433.40 409.11,435.83 416.95,437.81 424.80,439.58 432.64,441.12 440.48,442.42 448.32,443.46 456.16,444.21 464.00,444.68 471.84,444.82 479.68,444.64 487.52,444.11 495.36,443.25 503.21,442.10 511.05,440.66 518.89,438.93 526.73,436.91 534.57,434.60 542.41,432.01 550.25,429.12 558.09,425.95 565.93,422.49 573.77,418.74 581.62,414.71 589.46,410.39 597.30,405.78 605.14,400.88 612.98,395.70 620.82,390.22 628.66,384.47 636.50,378.42 644.34,372.09 652.18,365.48 660.03,358.58 667.87,351.39 675.71,343.91 683.55,336.16 ' style='stroke-width: 2.13; stroke: #3366FF; stroke-linecap: butt;' />
+</g>
+<g clip-path='url(#cpMC4wMHw3MjAuMDB8MC4wMHw1NzYuMDA=)'>
+<text x='28.21' y='405.47' text-anchor='end' style='font-size: 8.80px;fill: #4D4D4D; font-family: "Arial";' textLength='9.79px' lengthAdjust='spacingAndGlyphs'>20</text>
+<text x='28.21' y='257.37' text-anchor='end' style='font-size: 8.80px;fill: #4D4D4D; font-family: "Arial";' textLength='9.79px' lengthAdjust='spacingAndGlyphs'>30</text>
+<text x='28.21' y='109.27' text-anchor='end' style='font-size: 8.80px;fill: #4D4D4D; font-family: "Arial";' textLength='9.79px' lengthAdjust='spacingAndGlyphs'>40</text>
+<polyline points='30.40,402.32 33.14,402.32 ' style='stroke-width: 1.07; stroke: #333333; stroke-linecap: butt;' />
+<polyline points='30.40,254.22 33.14,254.22 ' style='stroke-width: 1.07; stroke: #333333; stroke-linecap: butt;' />
+<polyline points='30.40,106.12 33.14,106.12 ' style='stroke-width: 1.07; stroke: #333333; stroke-linecap: butt;' />
+<polyline points='109.99,547.24 109.99,544.50 ' style='stroke-width: 1.07; stroke: #333333; stroke-linecap: butt;' />
+<polyline points='224.71,547.24 224.71,544.50 ' style='stroke-width: 1.07; stroke: #333333; stroke-linecap: butt;' />
+<polyline points='339.42,547.24 339.42,544.50 ' style='stroke-width: 1.07; stroke: #333333; stroke-linecap: butt;' />
+<polyline points='454.13,547.24 454.13,544.50 ' style='stroke-width: 1.07; stroke: #333333; stroke-linecap: butt;' />
+<polyline points='568.84,547.24 568.84,544.50 ' style='stroke-width: 1.07; stroke: #333333; stroke-linecap: butt;' />
+<polyline points='683.55,547.24 683.55,544.50 ' style='stroke-width: 1.07; stroke: #333333; stroke-linecap: butt;' />
+<text x='109.99' y='555.74' text-anchor='middle' style='font-size: 8.80px;fill: #4D4D4D; font-family: "Arial";' textLength='4.90px' lengthAdjust='spacingAndGlyphs'>2</text>
+<text x='224.71' y='555.74' text-anchor='middle' style='font-size: 8.80px;fill: #4D4D4D; font-family: "Arial";' textLength='4.90px' lengthAdjust='spacingAndGlyphs'>3</text>
+<text x='339.42' y='555.74' text-anchor='middle' style='font-size: 8.80px;fill: #4D4D4D; font-family: "Arial";' textLength='4.90px' lengthAdjust='spacingAndGlyphs'>4</text>
+<text x='454.13' y='555.74' text-anchor='middle' style='font-size: 8.80px;fill: #4D4D4D; font-family: "Arial";' textLength='4.90px' lengthAdjust='spacingAndGlyphs'>5</text>
+<text x='568.84' y='555.74' text-anchor='middle' style='font-size: 8.80px;fill: #4D4D4D; font-family: "Arial";' textLength='4.90px' lengthAdjust='spacingAndGlyphs'>6</text>
+<text x='683.55' y='555.74' text-anchor='middle' style='font-size: 8.80px;fill: #4D4D4D; font-family: "Arial";' textLength='4.90px' lengthAdjust='spacingAndGlyphs'>7</text>
+<text x='373.83' y='568.20' text-anchor='middle' style='font-size: 11.00px; font-family: "Arial";' textLength='103.97px' lengthAdjust='spacingAndGlyphs'>Engine Displacement</text>
+<text transform='translate(13.36,283.84) rotate(-90)' text-anchor='middle' style='font-size: 11.00px; font-family: "Arial";' textLength='83.77px' lengthAdjust='spacingAndGlyphs'>Highway Mileage</text>
+<text x='33.14' y='14.93' style='font-size: 13.20px; font-family: "Arial";' textLength='250.03px' lengthAdjust='spacingAndGlyphs'>Highway Mileage by Engine Displacement.</text>
+</g>
+</svg>

package/gulpfile.js

@@ -0,0 +1,49 @@
+// gulpfile.js
+// This is the config for gulp, which is a task runner.
+// It takes all the JS and CSS files and bundles them into one JS file and one CSS file.
+// To run: navigate to the root directory of this project and run "gulp"
+
+var gulp = require('gulp');
+var concat = require('gulp-concat');
+var terser = require('gulp-terser');
+var rename = require('gulp-rename');
+var concatCss = require('gulp-concat-css');
+var cleanCss = require('gulp-clean-css');
+
+// js
+gulp.task('scripts', function () {
+  return gulp
+    .src([
+      './src/js/constants.js',
+      './src/js/audio.js',
+      './src/js/display.js',
+      './src/js/barplot.js',
+      './src/js/boxplot.js',
+      './src/js/heatmap.js',
+      './src/js/scatterplot.js',
+      './src/js/histogram.js',
+      './src/js/lineplot.js',
+      './src/js/segmented.js',
+      './src/js/controls.js',
+      './src/js/init.js',
+    ]) // order matters here
+    .pipe(concat('maidr.js'))
+    .pipe(gulp.dest('dist'))
+    .pipe(terser())
+    .pipe(rename({ extname: '.min.js' }))
+    .pipe(gulp.dest('dist'));
+});
+
+// css
+gulp.task('styles', function () {
+  return gulp
+    .src('src/css/*.css')
+    .pipe(concatCss('styles.css'))
+    .pipe(gulp.dest('dist')) // destination folder for unminified version
+    .pipe(cleanCss())
+    .pipe(rename({ extname: '.min.css' }))
+    .pipe(gulp.dest('dist')); // destination folder for minified version
+});
+
+// default task now runs both scripts and styles tasks
+gulp.task('default', gulp.series('scripts', 'styles'));

package/index.html

@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>User Test Site for Accessible Visualization</title>
+  </head>
+
+  <body>
+    <h1>Sample Accessible Visualization</h1>
+
+    <p>
+      The following graphs demonstrate multimodal access and interactive data
+      representation for some widely used visualizations.
+    </p>
+    <p>
+      This work has been developed by the Accessible Computing Lab directed by
+      <a href="https://ischool.illinois.edu/people/jooyoung-seo" target="_blank"
+        >Dr. JooYoung Seo</a
+      >
+      in the School of Information Sciences at the University of Illinois at
+      Urbana-Champaign.
+    </p>
+
+    <ul>
+      <li><a href="dev_charts/barplot.html" target="_blank">Bar plot.</a></li>
+      <li><a href="dev_charts/heatmap.html" target="_blank">Heat map.</a></li>
+      <li><a href="dev_charts/boxplot.html" target="_blank">Box plot.</a></li>
+      <li>
+        <a href="dev_charts/scatterplot.html" target="_blank">Scatter plot.</a>
+      </li>
+    </ul>
+
+    <footer>
+      © 2023 Accessible Computing Lab at the University of Illinois at
+      Urbana-Champaign All Rights Reserved
+    </footer>
+  </body>
+</html>

package/jsconfig.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "target": "es6"
+  },
+  "include": [
+    "src/**/*"
+  ],
+  "exclude": ["node_modules"]
+}

package/jsdoc.json

@@ -0,0 +1,19 @@
+{
+  "source": {
+    "include": ["./src/js"],
+    "includePattern": ".+\\.js(doc|x)?$",
+    "excludePattern": "(^|\\/|\\\\)_"
+  },
+  "plugins": [],
+  "templates": {
+    "cleverLinks": false,
+    "monospaceLinks": false
+  },
+  "opts": {
+    "destination": "./docs/",
+    "encoding": "utf8",
+    "private": true,
+    "recurse": true,
+    "template": "node_modules/minami"
+  }
+}

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "maidr",
+  "version": "1.0.0",
+  "description": "maidr: Multimodal Access and Interactive Data Representation. maidr is a system for non-visual access and control of statistical charts. It aims to provide an inclusive experience for users with visual impairments by offering multiple modes of interaction: braille, text, and sonification. This comprehensive  approach enhances the accessibility of data visualization and encourages a multi-model exploration on visualization. Check out the current build: [MAIDR Demo](https://uiuc-ischool-accessible-computing-lab.github.io/maidr/user_study_pilot/intro.html).",
+  "main": "webpack.config.js",
+  "scripts": {
+    "build": "gulp",
+    "test": "jest",
+    "lint": "eslint .",
+    "format": "prettier --write .",
+    "docs": "jsdoc -c jsdoc.json"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/uiuc-ischool-accessible-computing-lab/maidr.git"
+  },
+  "keywords": [],
+  "author": "JooYoung Seo",
+  "license": "GPL-3.0",
+  "bugs": {
+    "url": "https://github.com/uiuc-ischool-accessible-computing-lab/maidr/issues"
+  },
+  "homepage": "https://github.com/uiuc-ischool-accessible-computing-lab/maidr#readme",
+  "devDependencies": {
+    "eslint": "^8.43.0",
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "gulp": "^4.0.2",
+    "gulp-clean-css": "^4.3.0",
+    "gulp-concat": "^2.6.1",
+    "gulp-concat-css": "^3.1.0",
+    "gulp-rename": "^2.0.0",
+    "gulp-terser": "^2.1.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "jsdoc": "^4.0.2",
+    "prettier": "^2.8.8"
+  },
+  "dependencies": {
+    "mi": "^1.0.0",
+    "minami": "^1.2.3",
+    "taffydb": "^2.7.3"
+  },
+  "jest": {
+    "testEnvironment": "jsdom"
+  }
+}