add Chart2Music keyboard and sound accessibility features #6680

aliwelchoo · 2023-07-21T17:53:12Z

Use data and layout to call the chart2music API inside makePlot.

This pull request is for scatter plots only

aliwelchoo · 2023-07-22T11:10:16Z

Closed captions element is required to be visible on the screen to function so need to find a way to integrate it more cleanly
Need to rebase

src/plot_api/accessibility.js

alexcjohnson · 2023-07-24T21:27:25Z

Excited for this!
FYI @julianna-langston @spmealin - I think we can sort out most of what we need but your feedback is of course welcome!

@archmoj thoughts about packaging? Is a 50kb increase in minified bundle acceptable or should we keep chart2music external like MathJax? If we did make it external we'd probably want it included by default in plotly.py output, and we could have Dash detect and autoload it, but plain plotly.js users would need to explicitly load it

archmoj · 2023-07-24T21:36:56Z

package.json

@@ -77,6 +77,7 @@
    "@turf/bbox": "^6.4.0",
    "@turf/centroid": "^6.0.2",
    "canvas-fit": "^1.5.0",
+    "chart2music": "^1.11.0",


Nice MIT library.
To transpile it to es5, please add it to

plotly.js/webpack.config.js

Line 25 in 149c895

include: /node_modules[\\\/](buffer|d3-color|d3-interpolate|is-mobile)[\\\/]/,

Thank you! Knew there'd be something simple I was missing so I could get this into the same style

archmoj · 2023-07-24T21:38:58Z

src/plot_api/accessibility.js

@@ -0,0 +1,71 @@
+"use strict";
+import c2mChart from "chart2music";


To pass current es5 build tests, this file should be written in es5 style similar other files to src.

Do we still need to be writing in es5? Won't webpack take that and give us the desired output? I'd love it if we can start accepting (and eventually converting existing code to) more modern syntax.

For es modules, we have a config rule in place.
I did try to add a rule to transpile this file during build processes; but npm run build wasn't successful in the past hour.
If one could help with setting up the webpack config, it would be great 🙏

Thank you for these tips again! I've made some attempts at this (putting chart2music and/or accessibility.js into the webpack config but struggling with "Cannot find module 'chart2music'" whenever I use require instead of import. I think I'm still missing something

archmoj · 2023-07-24T21:41:33Z

src/plot_api/accessibility.js

+        var {type, x = [], y = [], name = i, text = []} = trace;
+        if(type === 'scatter') {
+            var traceData = [];
+            if ('y' in trace) {


In scatter traces with orientation: 'h', we should use trace.x instead of trace.y.

archmoj · 2023-07-24T21:42:17Z

src/plot_api/accessibility.js

+        }
+        else {
+            // 'Accessibility not implemented for trace type: ' + trace.type
+            return;


Perhaps we should use continue instead of return here.

Yes I think so. There's some overview text c2m reads out when you first focus on the chart, right? Perhaps we can have any skipped traces briefly mentioned there?

I can look into this. Need to look into where that closed captions text element goes in general, not sure about outputting our own messages into it, it's more than just the overview at the start, also reads off the data as you navigate it.

But this general point is a good one, ideally want to be able to support more than just scatter traces and want to support figures containing unsupported traces alongside supported ones.

Then there's also the opportunity for a config option to say which traces should be in accessibility mode

This is an interesting use case. I've created a feature request for chart2music to add config so that you can specify skipped traces (aka unsupported layers). If you think that would work for you, I'll go ahead and get started on a PR for chart2music.

@julianna-langston that would be great! I think that's going to be really important for this project, so that plotly.js and Dash users who care about this can turn on chart2music in all of their charts, knowing that the result will not always be complete but will always be as useful as it can be and will tell them what they're missing. And then over time as both the plotly.js and the chart2music sides add more features, existing applications will automatically improve.

Chart2Music v1.12 now has an unsupported chart type. Examples and documentation

julianna-langston · 2023-07-25T01:04:38Z

src/plot_api/accessibility.js

+
+    c2mChart({
+        title: title_text,
+        type: "line",


If this PR is for scatter plots, you probably want to have type: "scatter".

In the future, if someone wants to support more chart types, chart2music supports an array. So, if you have 2 traces, 1 scatter and 1 line, you could convert that to chart2music's type: ["line", "scatter"]. Just fyi.

Thank you. I think I'll end up extending the scope to as many types as we can

Thank you for supporting our project, @julianna-langston

…usic_dev

archmoj · 2024-02-28T19:08:37Z

Alright, I opened #6909 and merge it into chart2music_dev branch. All the tests are green there. So let's pull/merge that here.

ayjayt · 2024-02-29T00:37:16Z

thanks @archmoj!

ayjayt · 2024-03-10T03:57:47Z

Todo 1: #6680 (comment)
Todo 2: #6680 (comment)

just copying this here because it all got lost with the big merge

ayjayt · 2024-03-11T03:40:38Z

julianna-langston/chart2music#416

ayjayt · 2024-03-18T01:30:48Z

This is on track (it's not obvious here because my last two blocks I've been focused on the c2m repository)! When the infrastructure is done (probably next weekend), it will be ready for systematic integration with all of plotly's plot types. I will get us started with 2 or 3 (aliwelchoo already did a lot of linear), but I'm not as familiar with all of plotly's plot types as some of you so I will write documentation to make it easy, organized, and systematic to:

discover which of plotly's graph types aren't supported yet
write the pursuant support

I promise it will be very straightforward.

Coding-with-Adam · 2024-03-18T14:50:31Z

Thank you so much with your support on this, @ayjayt

archmoj · 2024-03-20T20:38:06Z

We fixed a problem on CircleCI (#6935).
Please pull upstream/master and merge it into this branch.

ayjayt · 2024-04-01T17:30:01Z

I'm back 😎, lets see what we can´t finish today :-)

Alistair-Welch added 7 commits July 21, 2023 12:43

initial commit, single scatter plot

6fb9c65

single scatter plot

87b4c5c

options and info

64ae505

data and trace labels

d37d24f

false default

d0467bb

remove debugging prints

3a73776

use index if no x provided

b4df959

aliwelchoo changed the title ~~Add Chart2Music keyboard and sound accessibility features~~ add Chart2Music keyboard and sound accessibility features Jul 21, 2023

Alistair-Welch added 5 commits July 22, 2023 09:27

Lib requirement

97b608f

layout destructuring

6205d62

layout defaults

7e40cde

destructure trace

6d9185b

test sourcetype module

935cf54

remove sourcetype

44deae2

archmoj added type: feature type: community labels Jul 24, 2023

alexcjohnson reviewed Jul 24, 2023

View reviewed changes

src/plot_api/accessibility.js Outdated Show resolved Hide resolved

aliwelchoo marked this pull request as draft July 24, 2023 21:34

archmoj reviewed Jul 24, 2023

View reviewed changes

julianna-langston reviewed Jul 25, 2023

View reviewed changes

aliwelchoo marked this pull request as ready for review July 26, 2023 16:59

aliwelchoo marked this pull request as draft July 26, 2023 17:00

Alistair-Welch added 3 commits July 28, 2023 08:34

into es5

c38ab67

include mjs files

c6a27be

transpile accessibility

cac174c

archmoj added 17 commits February 28, 2024 11:00

improve name of _bundle option

cd0c603

fix empty plugins

5ba702d

fix esbuild config setup

4b50e9a

adjust esbuild config

05b3940

skip requirejs and amdefine tests for now

4bf46a2

drop babel step

faaff88

fix disabling attribute meta compression

70f6ef0

fix __dirname in test_mock

7e69158

install karma-esbuild

8498c54

use esbuild with karma and jasmine

13c9a5e

drop babel

7ab0faf

drop amdefine test

dc0dcbe

simplify minified_bundle case

204a20d

clear IE option in karma config

6004bd5

fx

1aa9dba

reduce parallelism for jasmine tests

4e49206

Merge remote-tracking branch 'origin/build-with-esbuild' into chart2m…

f7be666

…usic_dev

Merge branch 'master' into chart2music

4a260af

ayjayt added 2 commits March 20, 2024 15:48

Merge branch 'master' into chart2music

f67c513

Merge branch 'master' into chart2music

41baab9

gvwilson self-requested a review May 2, 2024 14:41

gvwilson self-assigned this May 27, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

add Chart2Music keyboard and sound accessibility features #6680

add Chart2Music keyboard and sound accessibility features #6680

aliwelchoo commented Jul 21, 2023

aliwelchoo commented Jul 22, 2023

alexcjohnson commented Jul 24, 2023

archmoj Jul 24, 2023

aliwelchoo Jul 24, 2023

archmoj Jul 24, 2023

alexcjohnson Jul 24, 2023

archmoj Jul 24, 2023

aliwelchoo Jul 30, 2023

archmoj Jul 24, 2023

archmoj Jul 24, 2023

alexcjohnson Jul 24, 2023

aliwelchoo Jul 24, 2023

julianna-langston Jul 25, 2023

alexcjohnson Jul 25, 2023

julianna-langston Aug 28, 2023

julianna-langston Jul 25, 2023 •

edited

aliwelchoo Jul 25, 2023

Coding-with-Adam Jul 25, 2023

archmoj commented Feb 28, 2024

ayjayt commented Feb 29, 2024

ayjayt commented Mar 10, 2024

ayjayt commented Mar 11, 2024

ayjayt commented Mar 18, 2024 •

edited

Coding-with-Adam commented Mar 18, 2024

archmoj commented Mar 20, 2024

ayjayt commented Apr 1, 2024

		@@ -0,0 +1,71 @@
		"use strict";
		import c2mChart from "chart2music";

add Chart2Music keyboard and sound accessibility features #6680

Are you sure you want to change the base?

add Chart2Music keyboard and sound accessibility features #6680

Conversation

aliwelchoo commented Jul 21, 2023

aliwelchoo commented Jul 22, 2023

alexcjohnson commented Jul 24, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

julianna-langston Jul 25, 2023 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

archmoj commented Feb 28, 2024

ayjayt commented Feb 29, 2024

ayjayt commented Mar 10, 2024

ayjayt commented Mar 11, 2024

ayjayt commented Mar 18, 2024 • edited

Coding-with-Adam commented Mar 18, 2024

archmoj commented Mar 20, 2024

ayjayt commented Apr 1, 2024

julianna-langston Jul 25, 2023 •

edited

ayjayt commented Mar 18, 2024 •

edited