maidr 1.0.0

package/examples/other/braille-display_boxplot.js

@@ -0,0 +1,79 @@
+// get div that displays braille
+const barContainer = document.getElementById('bar-container');
+const brailleDiv = document.getElementById('braille-div');
+const brailleDisplay = document.getElementById('braille-display');
+
+// focus on braille display
+// brailleDisplay.tabIndex = "0";
+
+var range1 = ymin + range;
+var range2 = range1 + range;
+var range3 = range2 + range;
+var range4 = range3 + range;
+
+// Cursor variables
+// var currCursor = -1;
+
+// var allowedKeys = {
+//     "37" : "arrow-left",
+//     "39" : "arrow-right"
+// }
+
+var brailleArray = [];
+console.log(y_values);
+for (var i = 0; i < y_values.length; i++) {
+  if (y_values[i] <= range1) {
+    brailleArray.push('⣀');
+  } else if (y_values[i] <= range2) {
+    brailleArray.push('⠤');
+  } else if (y_values[i] <= range3) {
+    brailleArray.push('⠒');
+  } else if (y_values[i] <= range4) {
+    brailleArray.push('⠉');
+  }
+}
+
+var display = false;
+var brailleText = brailleArray.join('');
+brailleDisplay.innerHTML = brailleText;
+brailleDiv.style.display = 'none';
+
+// For input
+// brailleDisplay.value = brailleText;
+// brailleDisplay.setSelectionRange(0,0);
+
+barContainer.addEventListener('keydown', function (e) {
+  if (e.which == 66) {
+    if (display) {
+      brailleDiv.style.display = 'none';
+    } else {
+      brailleDiv.style.display = 'block';
+    }
+    display = !display;
+  }
+
+  // Cursor function
+  // if (!allowedKeys[e.which]) {
+  //     e.preventDefault();
+  // }
+
+  // if (currCursor < 0 && e.which == 39) {
+  //     e.preventDefault();
+  //     currCursor++;
+  // } else if (currCursor >= _numBars - 1 && e.which == 39) {
+  //     e.preventDefault();
+  // } else if (e.which == 39) {
+  //     brailleDisplay.setSelectionRange(currCursor, currCursor);
+  //     currCursor++;
+  // }
+
+  // if (currCursor > _numBars - 1 && e.which == 37) {
+  //     e.preventDefault();
+  //     currCursor--;
+  // } else if (currCursor <= 0 && e.which == 37) {
+  //     e.preventDefault();
+  // } else if (e.which == 37) {
+  //     brailleDisplay.setSelectionRange(currCursor, currCursor);
+  //     currCursor--;
+  // }
+});

package/examples/other/control_boxplot.js

@@ -0,0 +1,55 @@
+// display x and y information under bar plot
+// var x = document.getElementById("x");
+// var y = document.getElementById("y");
+
+// variables for manipulation of bars
+var currBar = -1;
+
+// manipulate bars using left and right arrows
+svg.addEventListener('keydown', function (e) {
+  if (e.which === 39) {
+    if (currBar == -1) {
+      currBar += 1;
+      // this.document.getElementById(bars[currBar]).style.fill = "rgb(3,200,9)";
+      select(currBar);
+      displayValues(currBar);
+      // x.innerHTML = "x-value: " + x_values[currBar];
+      // y.innerHTML = "y-value: " + y_values[currBar];
+    } else if (currBar > -1 && currBar < _numBars - 1) {
+      currBar += 1;
+      // this.document.getElementById(bars[currBar]).style.fill = "rgb(3,200,9)";
+      // this.document.getElementById(bars[currBar - 1]).style.fill = "rgb(89,89,89)";
+      select(currBar);
+      deselect(currBar - 1);
+      displayValues(currBar);
+      // x.innerHTML = "x-value: " + x_values[currBar];
+      // y.innerHTML = "y-value: " + y_values[currBar];
+    }
+  }
+
+  if (e.which === 37) {
+    if (currBar > 0 && currBar < _numBars) {
+      currBar -= 1;
+      // this.document.getElementById(bars[currBar]).style.fill = "rgb(3,200,9)";
+      // this.document.getElementById(bars[currBar + 1]).style.fill = "rgb(89,89,89)";
+      select(currBar);
+      deselect(currBar + 1);
+      displayValues(currBar);
+      // x.innerHTML = "x-value: " + x_values[currBar];
+      // y.innerHTML = "y-value: " + y_values[currBar];
+    }
+  }
+});
+
+function select(num) {
+  this.document.getElementById(bars[num]).style.fill = 'rgb(3,200,9)';
+}
+
+function deselect(num) {
+  this.document.getElementById(bars[num]).style.fill = 'rgb(89,89,89)';
+}
+
+function displayValues(num) {
+  this.document.getElementById('x').innerHTML = 'x-value: ' + x_values[num];
+  this.document.getElementById('y').innerHTML = 'y-value: ' + y_values[num];
+}

package/examples/other/draft.js

@@ -0,0 +1,56 @@
+// Ths file records all the trials.
+
+// First trial
+/*
+var svg = document.getElementById("barplotsvg");
+var barplot = svg.contentDocument;
+window.addEventListener("load" ,function() {
+  console.log(barplot);
+  var firstBar = barplot.getElementsByTagName("rect")[0];
+  console.log(firstBar);
+  document.addEventListener("keydown", function(e) {
+    if (e.key === 39) {
+      firstBar.setAttribute('fill', 'rgb(3,200,9)');
+    }
+  });
+});
+*/
+
+// sample addEventListener
+/*
+var input = document.getElementById("demo");
+input.addEventListener("keydown", function(e) {
+    if (e.which === 39) input.style.backgroundColor = "red";
+});
+*/
+
+/*$(document).ready(function() {
+    $("#barplotsvg").contents().find("#geom_rect.rect.56.1.1").attr({"fill":"red"});
+});
+$(window).on("keypress", function(e) {
+    if (e.keyCode === 39) {
+        alert("it works!");
+        $("#barplotsvg").contents().find("#geom_rect.rect.56.1.1").addClass("animated shake");
+    }
+});*/
+
+// D3.js method
+/*
+import * as d3 from "/Users/y.yujun/Documents/accessible-graphs/node_modules";
+d3.xml("/Users/y.yujun/Documents/accessible-graphs/barplot.svg", function(error, xml) {
+  if (error) throw error;
+                
+  var svg = xml.documentElement;
+  document.body.appendChild(svg);
+  console.log(svg);
+  document.body.append("rect").attr("x", 47.88).attr("y", 63.4).attr("width", 86.4).attr("height", 50.79).style("stroke", "black").style("fill", "black");
+});
+*/
+
+// const audioElement = document.querySelector('audio');
+// const track = audioContext.createMediaElementSource(audioElement);
+
+// var stereoNode = new StereoPannerNode(audioContext, { pan: 0 });
+// stereoNode.pan.value = -1;
+
+// track.connect(merger).connect(audioContext.destination);

package/examples/other/getData.html

@@ -0,0 +1,400 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <title>Get Data for Bar Chart</title>
+</head>
+
+<body>
+  <?xml version="1.0" encoding="UTF-8"?>
+  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="672px" height="672px"
+    viewBox="0 0 672 672" version="1.1">
+    <metadata xmlns:gridsvg="http://www.stat.auckland.ac.nz/~paul/R/gridSVG/">
+      <gridsvg:generator name="gridSVG" version="1.7-4" time="2022-07-14 14:26:55" />
+      <gridsvg:argument name="name" value="barplot_diamonds_gridSVG.svg" />
+      <gridsvg:argument name="exportCoords" value="none" />
+      <gridsvg:argument name="exportMappings" value="none" />
+      <gridsvg:argument name="exportJS" value="none" />
+      <gridsvg:argument name="res" value="96" />
+      <gridsvg:argument name="prefix" value="" />
+      <gridsvg:argument name="addClasses" value="FALSE" />
+      <gridsvg:argument name="indent" value="TRUE" />
+      <gridsvg:argument name="htmlWrapper" value="FALSE" />
+      <gridsvg:argument name="usePaths" value="vpPaths" />
+      <gridsvg:argument name="uniqueNames" value="TRUE" />
+      <gridsvg:separator name="id.sep" value="." />
+      <gridsvg:separator name="gPath.sep" value="::" />
+      <gridsvg:separator name="vpPath.sep" value="::" />
+    </metadata>
+    <g transform="translate(0, 672) scale(1, -1)">
+      <g id="gridSVG" fill="none" stroke="rgb(0,0,0)" stroke-dasharray="none" stroke-width="1" font-size="16"
+        font-family="Helvetica, Arial, FreeSans, Liberation Sans, Nimbus Sans L, sans-serif" opacity="1"
+        stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-opacity="1" fill-opacity="0"
+        font-weight="normal" font-style="normal">
+        <g id="layout.1">
+          <g id="layout.2">
+            <defs>
+              <clipPath id="layout::background.1-9-12-1.1.clipPath">
+                <rect x="0" y="0" width="672" height="672" fill="none" stroke="none" />
+              </clipPath>
+            </defs>
+            <g id="layout::background.1-9-12-1.1" clip-path="url(#layout::background.1-9-12-1.1.clipPath)">
+              <g id="background.1-9-12-1.1">
+                <rect id="background.1-9-12-1.1.1" x="0" y="0" width="672" height="672" transform="" stroke-width="1.42"
+                  stroke="rgb(255,255,255)" fill="rgb(255,255,255)" stroke-dasharray="none" stroke-opacity="1"
+                  fill-opacity="1" />
+              </g>
+            </g>
+            <defs>
+              <clipPath id="layout::panel.7-5-7-5.1.clipPath">
+                <rect x="67.53" y="44.53" width="597.16" height="620.16" fill="none" stroke="none" />
+              </clipPath>
+            </defs>
+            <g id="layout::panel.7-5-7-5.1" clip-path="url(#layout::panel.7-5-7-5.1.clipPath)">
+              <g id="panel.7-5-7-5.1">
+                <g id="grill.gTree.13.1">
+                  <g id="panel.background..rect.6.1">
+                    <rect id="panel.background..rect.6.1.1" x="67.53" y="44.53" width="597.16" height="620.16"
+                      transform="" stroke-width="1.42" stroke="none" fill="rgb(235,235,235)" stroke-dasharray="none"
+                      stroke-opacity="0" fill-opacity="1" />
+                  </g>
+                  <g id="panel.grid.minor.y..polyline.8.1">
+                    <polyline id="panel.grid.minor.y..polyline.8.1.1" points="67.53,138.12 664.69,138.12"
+                      stroke="rgb(255,255,255)" fill="none" stroke-width="0.71" stroke-dasharray="none"
+                      stroke-linecap="butt" stroke-opacity="1" fill-opacity="1" />
+                    <polyline id="panel.grid.minor.y..polyline.8.1.2" points="67.53,268.93 664.69,268.93"
+                      stroke="rgb(255,255,255)" fill="none" stroke-width="0.71" stroke-dasharray="none"
+                      stroke-linecap="butt" stroke-opacity="1" fill-opacity="1" />
+                    <polyline id="panel.grid.minor.y..polyline.8.1.3" points="67.53,399.73 664.69,399.73"
+                      stroke="rgb(255,255,255)" fill="none" stroke-width="0.71" stroke-dasharray="none"
+                      stroke-linecap="butt" stroke-opacity="1" fill-opacity="1" />
+                    <polyline id="panel.grid.minor.y..polyline.8.1.4" points="67.53,530.53 664.69,530.53"
+                      stroke="rgb(255,255,255)" fill="none" stroke-width="0.71" stroke-dasharray="none"
+                      stroke-linecap="butt" stroke-opacity="1" fill-opacity="1" />
+                    <polyline id="panel.grid.minor.y..polyline.8.1.5" points="67.53,661.33 664.69,661.33"
+                      stroke="rgb(255,255,255)" fill="none" stroke-width="0.71" stroke-dasharray="none"
+                      stroke-linecap="butt" stroke-opacity="1" fill-opacity="1" />
+                  </g>
+                  <g id="panel.grid.major.y..polyline.10.1">
+                    <polyline id="panel.grid.major.y..polyline.10.1.1" points="67.53,72.72 664.69,72.72"
+                      stroke="rgb(255,255,255)" fill="none" stroke-width="1.42" stroke-dasharray="none"
+                      stroke-linecap="butt" stroke-opacity="1" fill-opacity="1" />
+                    <polyline id="panel.grid.major.y..polyline.10.1.2" points="67.53,203.53 664.69,203.53"
+                      stroke="rgb(255,255,255)" fill="none" stroke-width="1.42" stroke-dasharray="none"
+                      stroke-linecap="butt" stroke-opacity="1" fill-opacity="1" />
+                    <polyline id="panel.grid.major.y..polyline.10.1.3" points="67.53,334.33 664.69,334.33"
+                      stroke="rgb(255,255,255)" fill="none" stroke-width="1.42" stroke-dasharray="none"
+                      stroke-linecap="butt" stroke-opacity="1" fill-opacity="1" />
+                    <polyline id="panel.grid.major.y..polyline.10.1.4" points="67.53,465.13 664.69,465.13"
+                      stroke="rgb(255,255,255)" fill="none" stroke-width="1.42" stroke-dasharray="none"
+                      stroke-linecap="butt" stroke-opacity="1" fill-opacity="1" />
+                    <polyline id="panel.grid.major.y..polyline.10.1.5" points="67.53,595.93 664.69,595.93"
+                      stroke="rgb(255,255,255)" fill="none" stroke-width="1.42" stroke-dasharray="none"
+                      stroke-linecap="butt" stroke-opacity="1" fill-opacity="1" />
+                  </g>
+                  <g id="panel.grid.major.x..polyline.12.1">
+                    <polyline id="panel.grid.major.x..polyline.12.1.1" points="136.44,44.53 136.44,664.69"
+                      stroke="rgb(255,255,255)" fill="none" stroke-width="1.42" stroke-dasharray="none"
+                      stroke-linecap="butt" stroke-opacity="1" fill-opacity="1" />
+                    <polyline id="panel.grid.major.x..polyline.12.1.2" points="251.28,44.53 251.28,664.69"
+                      stroke="rgb(255,255,255)" fill="none" stroke-width="1.42" stroke-dasharray="none"
+                      stroke-linecap="butt" stroke-opacity="1" fill-opacity="1" />
+                    <polyline id="panel.grid.major.x..polyline.12.1.3" points="366.11,44.53 366.11,664.69"
+                      stroke="rgb(255,255,255)" fill="none" stroke-width="1.42" stroke-dasharray="none"
+                      stroke-linecap="butt" stroke-opacity="1" fill-opacity="1" />
+                    <polyline id="panel.grid.major.x..polyline.12.1.4" points="480.95,44.53 480.95,664.69"
+                      stroke="rgb(255,255,255)" fill="none" stroke-width="1.42" stroke-dasharray="none"
+                      stroke-linecap="butt" stroke-opacity="1" fill-opacity="1" />
+                    <polyline id="panel.grid.major.x..polyline.12.1.5" points="595.79,44.53 595.79,664.69"
+                      stroke="rgb(255,255,255)" fill="none" stroke-width="1.42" stroke-dasharray="none"
+                      stroke-linecap="butt" stroke-opacity="1" fill-opacity="1" />
+                  </g>
+                </g>
+                <g id="geom_rect.rect.2.1">
+                  <rect id="geom_rect.rect.2.1.1" x="84.76" y="72.72" width="103.35" height="42.12" transform=""
+                    stroke="none" fill="rgb(89,89,89)" stroke-width="1.42" stroke-dasharray="none"
+                    stroke-linejoin="miter" stroke-linecap="square" stroke-opacity="0" fill-opacity="1" />
+                  <rect id="geom_rect.rect.2.1.2" x="199.6" y="72.72" width="103.35" height="128.34" transform=""
+                    stroke="none" fill="rgb(89,89,89)" stroke-width="1.42" stroke-dasharray="none"
+                    stroke-linejoin="miter" stroke-linecap="square" stroke-opacity="0" fill-opacity="1" />
+                  <rect id="geom_rect.rect.2.1.3" x="314.44" y="72.72" width="103.35" height="316.07" transform=""
+                    stroke="none" fill="rgb(89,89,89)" stroke-width="1.42" stroke-dasharray="none"
+                    stroke-linejoin="miter" stroke-linecap="square" stroke-opacity="0" fill-opacity="1" />
+                  <rect id="geom_rect.rect.2.1.4" x="429.28" y="72.72" width="103.35" height="360.78" transform=""
+                    stroke="none" fill="rgb(89,89,89)" stroke-width="1.42" stroke-dasharray="none"
+                    stroke-linejoin="miter" stroke-linecap="square" stroke-opacity="0" fill-opacity="1" />
+                  <rect id="geom_rect.rect.2.1.5" x="544.11" y="72.72" width="103.35" height="563.78" transform=""
+                    stroke="none" fill="rgb(89,89,89)" stroke-width="1.42" stroke-dasharray="none"
+                    stroke-linejoin="miter" stroke-linecap="square" stroke-opacity="0" fill-opacity="1" />
+                </g>
+              </g>
+            </g>
+            <g id="layout::spacer.8-6-8-6.1" />
+            <g id="layout::spacer.8-4-8-4.1" />
+            <g id="layout::spacer.6-6-6-6.1" />
+            <g id="layout::spacer.6-4-6-4.1" />
+            <g id="layout::axis-t.6-5-6-5.1" />
+            <g id="layout::axis-l.7-4-7-4.1">
+              <g id="layout::axis-l.7-4-7-4::GRID.VP.6.1">
+                <g id="axis-l.7-4-7-4.1">
+                  <g id="layout::axis-l.7-4-7-4::GRID.VP.6::axis.1">
+                    <g id="axis.1">
+                      <g id="layout::axis-l.7-4-7-4::GRID.VP.6::axis::axis.1-1-1-1.1">
+                        <g id="layout::axis-l.7-4-7-4::GRID.VP.6::axis::axis.1-1-1-1::GRID.VP.4.1" font-size="11.73"
+                          stroke="rgb(77,77,77)"
+                          font-family="Helvetica, Arial, FreeSans, Liberation Sans, Nimbus Sans L, sans-serif"
+                          stroke-opacity="1" font-weight="normal" font-style="normal">
+                          <g id="layout::axis-l.7-4-7-4::GRID.VP.6::axis::axis.1-1-1-1::GRID.VP.4::GRID.VP.5.1">
+                            <g id="axis.1-1-1-1.1">
+                              <g id="GRID.text.21.1">
+                                <g id="GRID.text.21.1.1" transform="translate(60.96, 72.72)" stroke-width="0.1">
+                                  <g id="GRID.text.21.1.1.scale" transform="scale(1, -1)">
+                                    <text x="0" y="0" id="GRID.text.21.1.1.text" text-anchor="end" font-size="11.73"
+                                      stroke="rgb(77,77,77)"
+                                      font-family="Helvetica, Arial, FreeSans, Liberation Sans, Nimbus Sans L, sans-serif"
+                                      fill="rgb(77,77,77)" stroke-opacity="1" fill-opacity="1" font-weight="normal"
+                                      font-style="normal">
+                                      <tspan id="GRID.text.21.1.1.tspan.1" dy="5" x="0">0</tspan>
+                                    </text>
+                                  </g>
+                                </g>
+                                <g id="GRID.text.21.1.2" transform="translate(60.96, 203.53)" stroke-width="0.1">
+                                  <g id="GRID.text.21.1.2.scale" transform="scale(1, -1)">
+                                    <text x="0" y="0" id="GRID.text.21.1.2.text" text-anchor="end" font-size="11.73"
+                                      stroke="rgb(77,77,77)"
+                                      font-family="Helvetica, Arial, FreeSans, Liberation Sans, Nimbus Sans L, sans-serif"
+                                      fill="rgb(77,77,77)" stroke-opacity="1" fill-opacity="1" font-weight="normal"
+                                      font-style="normal">
+                                      <tspan id="GRID.text.21.1.2.tspan.1" dy="5" x="0">5000</tspan>
+                                    </text>
+                                  </g>
+                                </g>
+                                <g id="GRID.text.21.1.3" transform="translate(60.96, 334.33)" stroke-width="0.1">
+                                  <g id="GRID.text.21.1.3.scale" transform="scale(1, -1)">
+                                    <text x="0" y="0" id="GRID.text.21.1.3.text" text-anchor="end" font-size="11.73"
+                                      stroke="rgb(77,77,77)"
+                                      font-family="Helvetica, Arial, FreeSans, Liberation Sans, Nimbus Sans L, sans-serif"
+                                      fill="rgb(77,77,77)" stroke-opacity="1" fill-opacity="1" font-weight="normal"
+                                      font-style="normal">
+                                      <tspan id="GRID.text.21.1.3.tspan.1" dy="5" x="0">10000</tspan>
+                                    </text>
+                                  </g>
+                                </g>
+                                <g id="GRID.text.21.1.4" transform="translate(60.96, 465.13)" stroke-width="0.1">
+                                  <g id="GRID.text.21.1.4.scale" transform="scale(1, -1)">
+                                    <text x="0" y="0" id="GRID.text.21.1.4.text" text-anchor="end" font-size="11.73"
+                                      stroke="rgb(77,77,77)"
+                                      font-family="Helvetica, Arial, FreeSans, Liberation Sans, Nimbus Sans L, sans-serif"
+                                      fill="rgb(77,77,77)" stroke-opacity="1" fill-opacity="1" font-weight="normal"
+                                      font-style="normal">
+                                      <tspan id="GRID.text.21.1.4.tspan.1" dy="5" x="0">15000</tspan>
+                                    </text>
+                                  </g>
+                                </g>
+                                <g id="GRID.text.21.1.5" transform="translate(60.96, 595.93)" stroke-width="0.1">
+                                  <g id="GRID.text.21.1.5.scale" transform="scale(1, -1)">
+                                    <text x="0" y="0" id="GRID.text.21.1.5.text" text-anchor="end" font-size="11.73"
+                                      stroke="rgb(77,77,77)"
+                                      font-family="Helvetica, Arial, FreeSans, Liberation Sans, Nimbus Sans L, sans-serif"
+                                      fill="rgb(77,77,77)" stroke-opacity="1" fill-opacity="1" font-weight="normal"
+                                      font-style="normal">
+                                      <tspan id="GRID.text.21.1.5.tspan.1" dy="5" x="0">20000</tspan>
+                                    </text>
+                                  </g>
+                                </g>
+                              </g>
+                            </g>
+                          </g>
+                        </g>
+                      </g>
+                      <g id="layout::axis-l.7-4-7-4::GRID.VP.6::axis::axis.1-2-1-2.1">
+                        <g id="axis.1-2-1-2.1">
+                          <polyline id="axis.1-2-1-2.1.1" points="63.88,72.72 67.53,72.72" stroke="rgb(51,51,51)"
+                            fill="none" stroke-width="1.42" stroke-dasharray="none" stroke-linecap="butt"
+                            stroke-opacity="1" fill-opacity="1" />
+                          <polyline id="axis.1-2-1-2.1.2" points="63.88,203.53 67.53,203.53" stroke="rgb(51,51,51)"
+                            fill="none" stroke-width="1.42" stroke-dasharray="none" stroke-linecap="butt"
+                            stroke-opacity="1" fill-opacity="1" />
+                          <polyline id="axis.1-2-1-2.1.3" points="63.88,334.33 67.53,334.33" stroke="rgb(51,51,51)"
+                            fill="none" stroke-width="1.42" stroke-dasharray="none" stroke-linecap="butt"
+                            stroke-opacity="1" fill-opacity="1" />
+                          <polyline id="axis.1-2-1-2.1.4" points="63.88,465.13 67.53,465.13" stroke="rgb(51,51,51)"
+                            fill="none" stroke-width="1.42" stroke-dasharray="none" stroke-linecap="butt"
+                            stroke-opacity="1" fill-opacity="1" />
+                          <polyline id="axis.1-2-1-2.1.5" points="63.88,595.93 67.53,595.93" stroke="rgb(51,51,51)"
+                            fill="none" stroke-width="1.42" stroke-dasharray="none" stroke-linecap="butt"
+                            stroke-opacity="1" fill-opacity="1" />
+                        </g>
+                      </g>
+                    </g>
+                  </g>
+                </g>
+              </g>
+            </g>
+            <g id="layout::axis-r.7-6-7-6.1" />
+            <g id="layout::axis-b.8-5-8-5.1">
+              <g id="layout::axis-b.8-5-8-5::GRID.VP.3.1">
+                <g id="axis-b.8-5-8-5.1">
+                  <g id="layout::axis-b.8-5-8-5::GRID.VP.3::axis.1">
+                    <g id="axis.2">
+                      <g id="layout::axis-b.8-5-8-5::GRID.VP.3::axis::axis.1-1-1-1.1">
+                        <g id="axis.1-1-1-1.2">
+                          <polyline id="axis.1-1-1-1.2.1" points="136.44,40.88 136.44,44.53" stroke="rgb(51,51,51)"
+                            fill="none" stroke-width="1.42" stroke-dasharray="none" stroke-linecap="butt"
+                            stroke-opacity="1" fill-opacity="1" />
+                          <polyline id="axis.1-1-1-1.2.2" points="251.28,40.88 251.28,44.53" stroke="rgb(51,51,51)"
+                            fill="none" stroke-width="1.42" stroke-dasharray="none" stroke-linecap="butt"
+                            stroke-opacity="1" fill-opacity="1" />
+                          <polyline id="axis.1-1-1-1.2.3" points="366.11,40.88 366.11,44.53" stroke="rgb(51,51,51)"
+                            fill="none" stroke-width="1.42" stroke-dasharray="none" stroke-linecap="butt"
+                            stroke-opacity="1" fill-opacity="1" />
+                          <polyline id="axis.1-1-1-1.2.4" points="480.95,40.88 480.95,44.53" stroke="rgb(51,51,51)"
+                            fill="none" stroke-width="1.42" stroke-dasharray="none" stroke-linecap="butt"
+                            stroke-opacity="1" fill-opacity="1" />
+                          <polyline id="axis.1-1-1-1.2.5" points="595.79,40.88 595.79,44.53" stroke="rgb(51,51,51)"
+                            fill="none" stroke-width="1.42" stroke-dasharray="none" stroke-linecap="butt"
+                            stroke-opacity="1" fill-opacity="1" />
+                        </g>
+                      </g>
+                      <g id="layout::axis-b.8-5-8-5::GRID.VP.3::axis::axis.2-1-2-1.1">
+                        <g id="layout::axis-b.8-5-8-5::GRID.VP.3::axis::axis.2-1-2-1::GRID.VP.1.1" font-size="11.73"
+                          stroke="rgb(77,77,77)"
+                          font-family="Helvetica, Arial, FreeSans, Liberation Sans, Nimbus Sans L, sans-serif"
+                          stroke-opacity="1" font-weight="normal" font-style="normal">
+                          <g id="layout::axis-b.8-5-8-5::GRID.VP.3::axis::axis.2-1-2-1::GRID.VP.1::GRID.VP.2.1">
+                            <g id="axis.2-1-2-1.1">
+                              <g id="GRID.text.16.1">
+                                <g id="GRID.text.16.1.1" transform="translate(136.44, 37.96)" stroke-width="0.1">
+                                  <g id="GRID.text.16.1.1.scale" transform="scale(1, -1)">
+                                    <text x="0" y="0" id="GRID.text.16.1.1.text" text-anchor="middle" font-size="11.73"
+                                      stroke="rgb(77,77,77)"
+                                      font-family="Helvetica, Arial, FreeSans, Liberation Sans, Nimbus Sans L, sans-serif"
+                                      fill="rgb(77,77,77)" stroke-opacity="1" fill-opacity="1" font-weight="normal"
+                                      font-style="normal">
+                                      <tspan id="GRID.text.16.1.1.tspan.1" dy="10" x="0">Fair</tspan>
+                                    </text>
+                                  </g>
+                                </g>
+                                <g id="GRID.text.16.1.2" transform="translate(251.28, 37.96)" stroke-width="0.1">
+                                  <g id="GRID.text.16.1.2.scale" transform="scale(1, -1)">
+                                    <text x="0" y="0" id="GRID.text.16.1.2.text" text-anchor="middle" font-size="11.73"
+                                      stroke="rgb(77,77,77)"
+                                      font-family="Helvetica, Arial, FreeSans, Liberation Sans, Nimbus Sans L, sans-serif"
+                                      fill="rgb(77,77,77)" stroke-opacity="1" fill-opacity="1" font-weight="normal"
+                                      font-style="normal">
+                                      <tspan id="GRID.text.16.1.2.tspan.1" dy="10" x="0">Good</tspan>
+                                    </text>
+                                  </g>
+                                </g>
+                                <g id="GRID.text.16.1.3" transform="translate(366.11, 37.96)" stroke-width="0.1">
+                                  <g id="GRID.text.16.1.3.scale" transform="scale(1, -1)">
+                                    <text x="0" y="0" id="GRID.text.16.1.3.text" text-anchor="middle" font-size="11.73"
+                                      stroke="rgb(77,77,77)"
+                                      font-family="Helvetica, Arial, FreeSans, Liberation Sans, Nimbus Sans L, sans-serif"
+                                      fill="rgb(77,77,77)" stroke-opacity="1" fill-opacity="1" font-weight="normal"
+                                      font-style="normal">
+                                      <tspan id="GRID.text.16.1.3.tspan.1" dy="10" x="0">Very Good</tspan>
+                                    </text>
+                                  </g>
+                                </g>
+                                <g id="GRID.text.16.1.4" transform="translate(480.95, 37.96)" stroke-width="0.1">
+                                  <g id="GRID.text.16.1.4.scale" transform="scale(1, -1)">
+                                    <text x="0" y="0" id="GRID.text.16.1.4.text" text-anchor="middle" font-size="11.73"
+                                      stroke="rgb(77,77,77)"
+                                      font-family="Helvetica, Arial, FreeSans, Liberation Sans, Nimbus Sans L, sans-serif"
+                                      fill="rgb(77,77,77)" stroke-opacity="1" fill-opacity="1" font-weight="normal"
+                                      font-style="normal">
+                                      <tspan id="GRID.text.16.1.4.tspan.1" dy="10" x="0">Premium</tspan>
+                                    </text>
+                                  </g>
+                                </g>
+                                <g id="GRID.text.16.1.5" transform="translate(595.79, 37.96)" stroke-width="0.1">
+                                  <g id="GRID.text.16.1.5.scale" transform="scale(1, -1)">
+                                    <text x="0" y="0" id="GRID.text.16.1.5.text" text-anchor="middle" font-size="11.73"
+                                      stroke="rgb(77,77,77)"
+                                      font-family="Helvetica, Arial, FreeSans, Liberation Sans, Nimbus Sans L, sans-serif"
+                                      fill="rgb(77,77,77)" stroke-opacity="1" fill-opacity="1" font-weight="normal"
+                                      font-style="normal">
+                                      <tspan id="GRID.text.16.1.5.tspan.1" dy="10" x="0">Ideal</tspan>
+                                    </text>
+                                  </g>
+                                </g>
+                              </g>
+                            </g>
+                          </g>
+                        </g>
+                      </g>
+                    </g>
+                  </g>
+                </g>
+              </g>
+            </g>
+            <g id="layout::xlab-t.5-5-5-5.1" />
+            <g id="layout::xlab-b.9-5-9-5.1">
+              <g id="layout::xlab-b.9-5-9-5::GRID.VP.7.1" font-size="14.67" stroke="rgb(0,0,0)"
+                font-family="Helvetica, Arial, FreeSans, Liberation Sans, Nimbus Sans L, sans-serif" stroke-opacity="1"
+                font-weight="normal" font-style="normal">
+                <g id="layout::xlab-b.9-5-9-5::GRID.VP.7::GRID.VP.8.1">
+                  <g id="xlab-b.9-5-9-5.1">
+                    <g id="GRID.text.25.1">
+                      <g id="GRID.text.25.1.1" transform="translate(366.11, 22.31)" stroke-width="0.1">
+                        <g id="GRID.text.25.1.1.scale" transform="scale(1, -1)">
+                          <text x="0" y="0" id="GRID.text.25.1.1.text" text-anchor="middle" font-size="14.67"
+                            stroke="rgb(0,0,0)"
+                            font-family="Helvetica, Arial, FreeSans, Liberation Sans, Nimbus Sans L, sans-serif"
+                            fill="rgb(0,0,0)" stroke-opacity="1" fill-opacity="1" font-weight="normal"
+                            font-style="normal">
+                            <tspan id="GRID.text.25.1.1.tspan.1" dy="12" x="0">cut</tspan>
+                          </text>
+                        </g>
+                      </g>
+                    </g>
+                  </g>
+                </g>
+              </g>
+            </g>
+            <g id="layout::ylab-l.7-3-7-3.1">
+              <g id="layout::ylab-l.7-3-7-3::GRID.VP.9.1" font-size="14.67" stroke="rgb(0,0,0)"
+                font-family="Helvetica, Arial, FreeSans, Liberation Sans, Nimbus Sans L, sans-serif" stroke-opacity="1"
+                font-weight="normal" font-style="normal">
+                <g id="layout::ylab-l.7-3-7-3::GRID.VP.9::GRID.VP.10.1">
+                  <g id="ylab-l.7-3-7-3.1">
+                    <g id="GRID.text.29.1">
+                      <g id="GRID.text.29.1.1" transform="translate(7.31, 354.61)" stroke-width="0.1">
+                        <g id="GRID.text.29.1.1.scale" transform="scale(1, -1)">
+                          <text x="0" y="0" id="GRID.text.29.1.1.text" transform="rotate(-90)" text-anchor="middle"
+                            font-size="14.67" stroke="rgb(0,0,0)"
+                            font-family="Helvetica, Arial, FreeSans, Liberation Sans, Nimbus Sans L, sans-serif"
+                            fill="rgb(0,0,0)" stroke-opacity="1" fill-opacity="1" font-weight="normal"
+                            font-style="normal">
+                            <tspan id="GRID.text.29.1.1.tspan.1" dy="12" x="0">count</tspan>
+                          </text>
+                        </g>
+                      </g>
+                    </g>
+                  </g>
+                </g>
+              </g>
+            </g>
+            <g id="layout::ylab-r.7-7-7-7.1" />
+            <g id="layout::subtitle.4-5-4-5.1" />
+            <g id="layout::title.3-5-3-5.1" />
+            <g id="layout::caption.10-5-10-5.1" />
+            <g id="layout::tag.2-2-2-2.1" />
+          </g>
+        </g>
+      </g>
+    </g>
+  </svg>
+
+  <p>Enter x and y-values with this format: {x1: y1, x2: y2}. Add "" around the value if it is text.</p>
+  <form id="form" action="barplot.html">
+    <textarea id="yVal" autofocus placeholder='{"x1": y1, "x2": y2}' required cols="100" rows="8"></textarea>
+    <button id="submitBtn" type="submit">Submit</button>
+  </form>
+  <p id="notValid"></p>
+
+  <script src="constants.js"></script>
+  <script src="getData.js"></script>
+
+</html>

package/examples/other/getData.js

@@ -0,0 +1,41 @@
+var form = document.getElementById('form');
+var submitBtn = document.getElementById('submitBtn');
+var invalid_text = document.getElementById('notValid');
+
+var yVal;
+
+form.addEventListener('submit', function (e) {
+  e.preventDefault();
+  let input = document.getElementById('yVal').value;
+  var inputObject = parseJSONObject(input);
+  xVal = [];
+  yVal = [];
+  for (var key in inputObject) {
+    if (inputObject.hasOwnProperty(key)) {
+      xVal.push(key);
+      yVal.push(inputObject[key]);
+    }
+  }
+  // yVal = input.split(",").map(function(item) {
+  //     return parseFloat(item.trim());
+  // });
+  sessionStorage.setItem('xVal', xVal);
+  sessionStorage.setItem('yVal', yVal);
+  if (yVal.length != _numBars) {
+    invalid_text.innerHTML = 'Invalid input';
+  } else {
+    window.location.assign(
+      '/Users/y.yujun/Documents/Data accessiblization/accessible-graph/accessible-graphs/barplot.html'
+    );
+  }
+});
+
+function parseJSONObject(json) {
+  try {
+    var obj = JSON.parse(json);
+    if (obj && typeof obj == 'object') {
+      return obj;
+    }
+  } catch (e) {}
+  return false;
+}