ritaccess / glance-data-analyzer Goto Github PK
View Code? Open in Web Editor NEWAccessible data analyzer tool that can be used in a browser
License: MIT License
Accessible data analyzer tool that can be used in a browser
License: MIT License
Button for loading the CSV looks different in Firefox compared to Chrome and Safari. It could have something to do with the webkit and moz properties in the group css for input[type=file].
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Mozilla_Extensions
http://css-infos.net/properties/webkit
http://geniuscarrier.com/how-to-style-a-html-file-upload-button-in-pure-css/
The font size is smaller and there are little green arrows located in libs/SlickGrid/examples/examples.css
Do we need these different styles? Maybe do some merging so that we only have one style sheet.
Font size is around line 5: font-size: 8pt
and the green arrows are around line 26: " background: url("../images/arrow_right_spearmint.png") no-repeat center left;"
Removing both of those will restore the original look.
In order to deliver information about the graph to users quicker without them having to tab through all the data, we want to create a box with data points such as the highest value, lowest value, average value, etc of each line. Ideally, user would tab to the box and VoiceOver would read all the information at once for them.
Should not be able to tab on the Data Plot title when no file is loaded.
When the index loads, there is a lot of empty/extra spacing below the "About" section.
higher pitches have a higher volume (it's a perceptual thing).
can we change that so if the majority of notes are higher (due to a low outlier) we can avoid hurting peoples ears?
where m1 is minimum note/freq, and m2 is maximum note/freq... this equation should suffice for volume.
http://www.wolframalpha.com/input/?i=m1%3D34%2C+m2%3D64%2C+cos%28%28x-m1%29%2F%28m2*pi%29%29
When a file is opened, then you attempt to open another file but press cancel instead of opening it then the color screen resets, and the top says no file is loaded. However, the graph and the data table are there. If you update the data table then all the extras: highest, lowest, average are appear.
If you togggle the type of a newly created table, it does not change.
Deleting a cell's content on the table causes strange behavior.
Including: max and min values are removed while the dot on the chart stays
Jsfx is passable as an audio library but there are probably better ones available. After some research I found two that might meet our needs.
Already supported with Jsfx:
Additional goals for a new library:
Since users are able to edit the data in the table while using the app, we want to give them the option of saving/ downloading the new version of their data to their computer. It would simply download the new file as a CSV which they could then also use in other places if they needed to.
If users wish to print out their work, such as if they are turning it in with homework. The changes for this would be done in the style.css and would simply involve hiding elements such as the load button, the play audio options, the slider over the chart, and the changing of the color text fields and check boxes.
So what should be left is the chart, the table, and the summary information.
Give the user the option to create an empty data table instead of loading in a CSV. They would be able to enter the initial table size, as well as have the option of adding new rows and columns later if they require more room.
If the table has to grow, this should be done with buttons as the controls to add columns and rows.
When cancel the pop up for loading csv file, the pop up for choosing the type of graph for the data appears when it shouldn't be.
Do we want to add an option to pick a particular rows or column to remove? As of now, we can only remove the last row or column using our buttons.
When you change a line to a custom color, such as blue or red, then change a value in the table, all the lines on the graph are restored to their original color.
When you are selecting files, you can select multiple. While it only displays one file in the browser, the label next to the button says how many files were initially selected. We may want to look into a way of having the native file chooser limit the number of files that can be chosen if possible.
Have an option to change line colors in the webpage (ideally next to toggles).
If you use a bar graph in chrome on a mac while using screen reader, then the browser crashes.
when the graph changes the overlay doesn't
When trying to test project in Firefox browser on Ubuntu machine, the audio controls did not show up.
Currently on the graph each data point is marked by a circle. Dr. Ludi suggested we try to make each line have different shapes, like triangle, square, circle. Right now color is the main way to tell what line is what, however, not everyone can see the colors. The main problem is to find a way to identify the lines without the colors.
Can we get it to go reverse? how are we really denoting speed?
When one of the pop-ups is opened focus is not forced and the user can still tab through the rest of the page.
Have a toggle option for each line in chart.js to turn visibility of individual lines on and off.
http://ritaccess.github.io/data-analyzer/
it doesn't load the correct resources to execute the javascript.
Adjust size of text box of the table as the inputed number increases. For example, "1000" and larger will show up like "1...".
The new box titled Data Summary opens when clicked to show the numerical representation of the data. However, when the box is clicked again it doesn't close, but should. (Nothing was added to make it clickable but it is clickable)
There are certain elements on the page that when tabbed over simply say group as their name, ex the ends of the sliders and the table. Names for these objects will have to be assigned in order to make it more accessible.
WAI-ARIA documentation for using web accessibility: http://www.w3.org/WAI/intro/aria.php
If a user clicks "Load CSV" -> picks a file -> cancels the graph selection prompt -> clicks "Load CSV" again -> cancels file select -> the graph selection prompt still appears.
There should be a limit to how many rows and columns may be created as it can cause the computer to slow down.
Add the possibility for other chart types such as a bar graph and scatter plot for users to choose from. Each chart would also have different audio representations as well.
Bar graphs would play either by a section of bars or play a row of data from the chart
Scatter plots would play a "note" as it reached it on the plot moving from left to right. You could select different layers of the scatter plot to play. It could also have the option of playing the regression line.
Also, chart.js has the option of a bar graph, but not one for a scatter plot so that would need to be created from scratch in the chart.js code as an option.
When a graph is loaded the Color Editor has the number of colors. When another graph is uploaded the number of lines/colors is the new one plus the old. For example open one graph with one different colored line then a new file is opened that has 4 colored lines. Then the Color Editor would say there were 5 colors, when it should only show 4 which are from the current file. The new colors are added to the bottom of the on going line color list.
When printing, the columns that can be access by horizontal scrolls needs to be able to be printed, somehow.
While trying to navigate the page using only keyboard controls I noticed I was unable to enter the table. I am not sure if I'm missing some controls or if its lacking tab functionality.
It should be Data Plot instead of Data Points.
When you uncheck a line that was very big, and the ones left are much smaller the window stays at the size to include the largest. Would it be possible to have the graph window re-adjust to the changes to better view the smaller line.
When the Graph resizes, the overlay doesn't respect the slider values. It goes back to being over the entire graph.
The name "Line Data" doesn't seem applicable when different type of graph is being selected. Same goes with the "Line 2, Line 3, ..."
For larger data sets, the page becomes very long and tedious to scroll through. It would be more convenient to have the data plot and line data fields be scrollable.
Put the table in a scrollable div so that it does not change the size of the page when large data sets are used.
Implement a level of controlling graph data by continually shrinking the size of the cursor. Cursor will be used to read out sonified data.
Look at Ethan's comment bellow.
When you make certain bars invisible the original graph size stays in place. Is there a way to make the bar graphs change dynamically?
Create a quick about section for the project. It'll include what exactly the web app was designed for and how to use all the features included. Currently, I want to have this display on the page for when you first get there and then hide it once they load a graph.
So the table in FIreFox browser is a trap. There is no way to get out of it. Pressing "Option + Tab" works for Chrome and Safari.
The stats for the data summary do not update if any value in the table is modified
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.