diff --git a/package.json b/package.json index e1720385..37a294b5 100644 --- a/package.json +++ b/package.json @@ -53,6 +53,7 @@ "dependencies": { "mi": "^1.0.0", "minami": "^1.2.3", + "react": "^18.2.0", "taffydb": "^2.7.3" }, "jest": { diff --git a/react-maidr/.gitignore b/react-maidr/.gitignore new file mode 100644 index 00000000..a547bf36 --- /dev/null +++ b/react-maidr/.gitignore @@ -0,0 +1,24 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +dist +dist-ssr +*.local + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? diff --git a/react-maidr/index.html b/react-maidr/index.html new file mode 100644 index 00000000..27a75875 --- /dev/null +++ b/react-maidr/index.html @@ -0,0 +1,1187 @@ + + +
+ + Assertive +
+ + Polite +
What is the title?
What are the high and low values?
What is the general shape of the chart?
More
Please provide the title of this visualization, then provide a description for someone who is blind or low vision. Include general overview of axes and the data at a high-level.
For the visualization I shared, please provide the following (where applicable): mean, standard deviation, extrema, correlations, relational comparisons like greater than OR lesser than.
Based on the visualization shared, address the following: Do you observe any unforeseen trends? If yes, what? Please convey any complex multi-faceted patterns present. Can you identify any noteworthy exceptions that aren't readily apparent through non-visual methods of analysis?
Provide context to help explain the data depicted in this visualization based on domain-specific insight.
Submit
${text}
Type: ${descType}
Title: ${plot.title}
Subtitle: ${plot.subtitle}
Caption: ${plot.caption}
' + + plot.columnLabels[position.x] + + ' ' + + plot.plotData[position.x] + + '
' + verboseText + '
' + + plot.x_labels[position.x] + + ', ' + + plot.data[position.y][position.x] + + '
' + + plot.y_labels[position.y] + + ', ' + + plot.data[position.y][position.x] + + '
' + textVerbose + '
' + textTerse + '
' + + plot.x[position.x] + + ', ' + + '[' + + plot.y[position.x].join(', ') + + ']' + + '
' + plot.gradient[positionL1.x] + '
\n'; + + // display absolute gradient of the graph + output += '
' + plot.curvePoints[positionL1.x] + '
\n'; + } else if (constants.textMode == 'verbose') { + // set from verboseText + } + } + if (constants.textMode == 'verbose') + output = '
' + + plot.plotData[position.x].x + + ', ' + + plot.plotData[position.x].y + + '
'; + if (plot.legendX) { + output = plot.legendX + ' is '; + } + output += plot.plotData[position.x].xmin; + output += ' through ' + plot.plotData[position.x].xmax + ', '; + if (plot.legendY) { + output += plot.legendY + ' is '; + } + output += plot.plotData[position.x].y; + } + } else if (constants.chartType == 'line') { + // line layer + if (plot.plotLegend) { + verboseText += plot.plotLegend.x + ' is '; + } + verboseText += plot.pointValuesX[position.x] + ', '; + if (plot.plotLegend) { + plot.plotLegend.y + ' is '; + } + verboseText += plot.pointValuesY[position.x]; + + if (constants.textMode == 'off') { + // do nothing + } else if (constants.textMode == 'terse') { + output += + '
' + + plot.pointValuesX[position.x] + + ', ' + + plot.pointValuesY[position.x] + + '
' + + plot.level[position.x] + + ' is ' + + plot.plotData[position.x][position.y] + + '
' + + plot.fill[position.y] + + ' is ' + + plot.plotData[position.x][position.y] + + '