Audiograf

Audiograf is an auditory solution for the Blind, Visually Impaired, or anyone confused by graphs.

"…one of the biggest challenges for a blind user on the web is comprehending graphs. It basically renders some sites like online brokerage completely inaccessible for our whole population.”​

• Dena Wainwright ​ Wells Fargo Enterprise Digital Accessibility Leader​​

The purpose of a graph is to present data that are too numerous or complicated to be described adequately in the text. Audiograf denoises and downsamples data and presents it in easy to understand musical notes. ​

Packages Used

• ToneJS
• downsample

This library was generated with Angular CLI version 7.2.0.

Using Audiograf

In the module you want to use Audiograf, add the following:

import { AudiografModule } from 'audiograf';

@NgModule({
  imports: [
    ...
    AudiografModule,
    ...
  ]
})
export class YourModule {}

In the view that you would like to use audiograf, add the following:

• chartInfo is an object that contains the graph's title, x-axis, and y-axis.
• chartData is an array of name/value pairs

<audiograf-button [chartInfo]="chartInfo" [chartData]="data">
</audiograf-button>

Code scaffolding

Run ng generate component component-name --project audiograf to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module --project audiograf.

Note: Don't forget to add --project audiograf or else it will be added to the default project in your angular.json file.

Build

Run ng build audiograf to build the project. The build artifacts will be stored in the dist/ directory.

Publishing

After building your library with ng build audiograf, go to the dist folder cd dist/audiograf and run npm publish.

Running unit tests

Run ng test audiograf to execute the unit tests via Karma.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.