search

Shared-Reality-Lab / IMAGE-server

IMAGE project server components
Other
2 stars 7 forks source link

Charts: Decide on supported web chart data formats, e.g. Plotly #129

Closed jeffbl closed 2 years ago

jeffbl commented 3 years ago

Extracting information from graphics of charts and plots will likely always be difficult. This work item is to explore what the most prevalent/useful web standards are for charts that include a machine-readable version of the data. We've tossed around Plotly as a likely candidate, but this has not been investigated at all.

Assigning to @gp1702 since this would be a preprocessor in the vein of what is currently proposed for embedded maps, where instead of running ML on a graphic, the chart data itself would need to be put into some JSON format readable by handlers for creating renderings. Best case, perhaps this could just be standardized largely on the most common/most open format, meaning very limited translation.

Cybernide commented 3 years ago

I'm posting here to emphasize that it is important that we get labels for the data in charts and graphs. It's also becoming clear that all the audio work on charts isn't going to be compelling unless we are able to get labels for data. I am aware of issue #114 competing for attention, however. UX team will discuss how we can figure out priority.

jeffbl commented 2 years ago

Plotly apparently doesn't provide the underlying data (at least easily), but some people add on buttons and such to do so:

https://github.com/plotly/plotly.js/issues/2171

There is an alternative, HighCharts, that apparently does, and offers a CSV download, e.g.:

https://www.highcharts.com/demo/line-basic

But I have no idea how widespread HighCharts is. They claim Reuters, BBC, VISA and others, but I don't know the depth: https://www.highcharts.com/

This site claims it is used by at least a few significant sites, e.g., linkedin and etherscan.io: https://www.wappalyzer.com/technologies/javascript-graphics/highcharts

Etherscan.io chart with downloadable data: https://etherscan.io/chart/tx

@florian-grond And...highcharts already does sonification for accessibility, although I don't hear axes and such, just sonification of points, so I'm not sure how useful that is.

https://www.highcharts.com/accessibility/#exploreFeatures

@johnnyvenom @dreamseed87 at above link they also have a "tactile export" feature, including braille markers?

jeffbl commented 2 years ago

And Jeremy points out that Highcharts looks like it may have significant penetration beyond Plotly: https://www.wappalyzer.com/compare/plotly-vs-highcharts

jeffbl commented 2 years ago

Was reading Montreal Gazette, and their plots here:

https://montrealgazette.com/news/local-news/covid-19-quebec-sets-new-record-for-hospitalizations-reports-23-deaths

Use something called "DataWrapper" which has a "Get the Data" link that directly downloads a CSV with the data.

jeffbl commented 2 years ago

@jaydeepsingh25 following up on our conversation from last week, the goal is not to ensure that we can handle a majority of charts on the entire web. It is that given a decent format, with at least a few practical examples from real sites, we can pass it along and create compelling audio/haptic renderings. The ML extraction approach in #197 may not bear fruit, so having any solution here will unblock the handler-side work for creating actual experiences based on complete chart information. Even if this means we only deal with a very small portion of all embedded charts on the web, it allows us to demonstrate the advantages IMAGE can bring to the table. At that point, we can also focus on evangelising the solution we pick, telling sites that if they create their charts in a certain tool, and use specific options, they will be enabling their charts to work well with IMAGE. This is part of our story for CSUN presentation. The critical thing now is to pick one where we're sure the data will be complete and accurate, create a schema (that will hopefully be usable for other underlying formats in the future), and get a prototype working so that the handler team has something to work with.

jaydeepsingh25 commented 2 years ago

Upon initial investigation, it seems that Chartjs even more widely used than Highcharts, and may be we should support Chartjs in our extension. Comparison available at the following URLs:

A few URLs which are using Chartjs are:

jeffbl commented 2 years ago

Highcharts has a demonstration page here. Each one has a description on the page, and a link to the chart on the actual site. Some big names here like the NY Fed, Visa, etc. If the end sites actually allow getting the data, this is a strong plus for highcharts in my opinion:

https://www.highcharts.com/blog/posts/use-cases/

jeffbl commented 2 years ago

(For the chartjs links above, I find them less compelling since they are just demonstration sites that show examples of using the library, but are not anything I'd expect our user base to have any actual interest in. If we can find more compelling examples with actual data, that would help with the case for chartsjs. I'm going to go do some more poking around now...)

jeffbl commented 2 years ago

I've posted to the Chart.js github discussion to see if anyone has great examples: https://github.com/chartjs/Chart.js/discussions/10126

jaydeepsingh25 commented 2 years ago

Summarising my observations:

  1. Chartjs: Although the comparison data shows that it is most widely used library, we are unable to find suitable examples of websites using Chartjs for real-time use case. The few URLs which we found(mentioned above) are demonstration sites and may not be relevant to the end-user.

  2. HighCharts: A few websites which are using HighCharts to illustrate the real-time data are:

It seems that HighCharts are a better option in comparison with Chartjs considering these examples (may be we can find even more HighCharts examples later).

jeffbl commented 2 years ago

This particular chart came up from a potential user of IMAGE. Not sure what it uses behind the scenes, or if underlying data is available. If we find an equivalent example, that may be helpful when contacting this person in the future: https://bigcharts.marketwatch.com/quickchart/quickchart.asp?symb=SPX&insttype=&freq=1&show=True

mcgill-srl commented 2 years ago

This particular chart came up from a potential user of IMAGE. Not sure what it uses behind the scenes, or if underlying data is available. If we find an equivalent example, that may be helpful when contacting this person in the future: https://bigcharts.marketwatch.com/quickchart/quickchart.asp?symb=SPX&insttype=&freq=1&show=True

Note that this wasn't the exact chart we were pointed to, but it's a similar format. Do we know whether the underlying data can be extracted from these?

jeffbl commented 2 years ago

@jaydeepsingh25 we should close this now that decision has been made, and break out any further work items as separate issues.

jeffbl commented 2 years ago

Apparently TD brokerage/direct trading uses highcharts, e.g.: https://www.td.com/ca/en/asset-management/institutional/funds/FundCard/?phoenixCode=E15024

jeffbl commented 2 years ago

For the quebec.ca graphcs, which exclude Title and SubTitle information, I submitted the following via their web form:

Here at McGill, we are creating a tool to help people who are blind or visually impaired access graphical content on the web (https://image.a11y.mcgill.ca). To showcase our work on charts and graphs, we would like to use the COVID graphs at https://www.quebec.ca/en/health/health-issues/a-z/2019-coronavirus/situation-coronavirus-in-quebec. However, in your HighCharts graphs, you do not include a Title or SubTitle, which makes it difficult to express to blind users via our tool. Can this be fixed?

jeffbl commented 2 years ago

Receveid a boilerplate response, so also sent it to info@quebec.ca, which is the mail address given for reporting accessibility issues with the quebec.ca website.

jeffbl commented 2 years ago

Closing in favor of #113. @jaydeepsingh25 If there are other things to be broken out from this, please make new issues, but the selection of highcharts is completed.

jeffbl commented 2 years ago

hamstudy.org uses highcharts for progress tracking: https://hamstudy.org/tech2018