julianna-langston / chartjs2music Goto Github PK

With focus on a chart, pressing the right arrow should navigate to the first data point on the chart. Instead, the first data point is skipped and the second data point is navigated to. If a chart only has a single data point, it is not possible to navigate the chart using the keyboard.

Hello.

I noticed when using this plugin, and I interact with the charts on a touch device, charts which support this plugin prevent scrolling of the page on swipe of the canvas area. Additionally, I'm unable to tap the legend items to toggle datasets on and off. It seems any sort of touch action becomes disabled on the canvas. I'm wondering if there's a way to allow this. I'm not sure whether it's a result of this plugin or Chart2Music itself, and I was unable top find anything in the docs.

Thanks!

I'm using vue-chartjs and receive an error when the chart doesn't have any data points:

It looks like a check just needs to be added to ensure data is present (and potentially elsewhere, this is just the first point of failure):

A workaround could be to only register the chart2Music plugin if the chart has data, but the vue-chartjs only allows global plugin registration and I have multiple charts on my page and any one could potentially be empty.

When navigating the data points of a chart using the arrow keys, the tooltip is displayed for the current data point (as expected). When pressing TAB to navigate away from the chart, the tooltip for the last data point visited remains visible.

Description

I am using c2m library to produce sonification for the line plot of Python's data visualization library Seaborn. I can successfully generate the sonification for all data points, but I am struggling to achieve the visual sync as there is only one path for the whole line in the HTML.

Resources

a. I am producing a line plot using this basic example.
b. Stored the generated plot in SVG format using the default function of matplotlib.pyplot and assigned id as MyChart to it
c. Imported this SVG and wrote the necessary c2m code for producing the sonification of line plot

Expected Behavior

The sonification should be properly synchronized with the highlighting of the specific html #path of the Seaborn line plot with the usage of arrow keys used for interacting with the map. Each data point should get highlighted while navigating through the line chart, along with the sound for that.

Actual Behavior

Sonification with respect to all data points works perfectly on arrow keys. The whole line is represented in one path html element. Hence not able to change the color for a specific data point while navigating.

This is a single-line chart
I need help adding code from c2m to highlight data points when only one path element is present in HTML.
a. Is there a way to add markers from the onFocusCallback function that will get highlighted while navigating?
b. Is it possible to rotate the x-ticks while displaying the line chart like we can format them before displaying?

HTML Template
lineplot_sonification.txt

Reproduction Steps:

a. Download the above lineplot_sonification.txt and save it as an HTML file
b. Open this HTML and try the sonification for seaborn lineplot

Description

I am using c2m library to produce sonification for the heatmap of Python's data visualization library Seaborn. I can successfully generate the sonification for all data points, but I am struggling to achieve the visual sync from onFocusCallback with the sonification.

Resources

a. I am producing a heatmap from the basic examples given in the seaborn heatmap example
b. Stored the generated plot in SVG format using the default function of matplotlib.pyplot and assigned id as MyChart to it
c. Imported this SVG and wrote the necessary c2m code for producing the sonification of heatmap

Expected Behavior

The sonification should be properly synchronized with the highlighting of the specific html #path of the Seaborn heatmap with the usage of arrow keys used for interacting with the map. Each data cell should get highlighted while navigating through the heatmap along with the sound for that cell.

Actual Behavior

Sonification with respect to all cells works perfectly on arrow keys for all data points. Only the first horizontal row is highlighted along with sonification of cells. Except the first 12 horizontal cells, all the cells are able to produce the sonification but are not getting highlighted.

I am using an example that generated the heatmap for the number of passengers 12 years by month.
Data is passed in a dictionary where the key is a month, and values are an array of data points for each year of that month.
Example:
{'Jan': [112, 118, 132, 129, 121, 135, 148, 148, 136, 119, 104, 118],
'Feb': [115, 126, 141, 135, 125, 149, 170, 170, 158, 133, 114, 140]}

I need help in the code of onFocusCallback that will generate the visual sync for this data passed when a user navigates in the heatmap using arrow keys.

I tried writing a for loop inside onFocusCallback, but it highlights multiple cells simultaneously and does not give expected behaviour.

Screenshots

Image 1 shows the sonification and visual sync of the cell for the month January and year 1953

Image 2 shows the sonification and visual not synced with the data cell for the month of March and year 1954

HTML Template

heatmap_sonification.txt

Reproduction Steps:
a. Download the above heatmap_sonification.txt and save it as an HTML file
b. Open this HTML and try the sonification for seaborn heatmap
c. Code for onFocusCallback can be found in the script tag. Currently, for loop inside the onFocusCallback which I wrote to access the data for visual sync for each month is removed.