plotters icon indicating copy to clipboard operation
plotters copied to clipboard

[Feature Request] Information tagging for individual SVG elements

Open TTWNO opened this issue 2 years ago • 3 comments

What is the feature ?

The ability to tag data in an SVG by row/column, data value, etc.

(Optional) Why this feature is useful and how people would use the feature ?

During a hackathon a few weeks ago, I had done some work creating an environment where users of assistive technology (like a screen reader) could interact with visual graphics by displaying multiple representations of the same data, then a web-socket to communicate changes to the data like highlighting a row of data (in the simplified case, a bar on a bar chart).

In order for interactivity to be enabled on both sides, the output of the SVG had to be hand-crafted to contain custom classes relating the data of the SVG to the table that created it; in the simplified example: row number. Essentially, giving a basic level of semantics to the SVG, and how it related to the data. This allows somebody viewing the SVG to click on a bar, and have that information conveyed to the screen reader user using the HTML table via a command like "highlight row 5".

I'm wondering if plotters would be interested in supporting some kind of semantic tagging of various different parts of the SVG, and if it could be done in a generic way? As far as I can tell, all data that can be displayed in the manner plotting libraries normally do is a set of one or more tables and the relationships between them. In theory, this makes the tagging of various pieces of data in the SVG fairly simple.

Ideally this could be done within plotters itself. But if it's not the case that this is simple to do in a generic way, could a method of injecting additional SVG attributes into the generation of the output be possible?

Let me know what you think. I know you're looking for other maintainers at the moment, so I wouldn't be suggesting that you implement it yourself; I'd make a PR for it if you think this is something worth doing.

You can see the PoC code here: https://github.com/TTWNO/inceptionu-july-2023-hackathon

A live site was also created to show the functionality off: https://a11y.tait.tech/

Note that the changes are sent across a universal websocket connection, so if two people attempt to view the page at the same time, the changes will overlap.

Additional Questions

  • Would semantic tagging like this work for other formats like the canvas? Not sure what the structure looks like internally. Then Javascript canvas libraries could hook into this as well.
  • Would HTML table-like output be considered a possible feature? Ideally, using plotters as the same backend to processing all sorts of data would be the best for my project. I realize this technically isn't plotting, so excuse my ignorance if it's an obvious no.

Thank you fro creating a cool libraries with such wide support and compatibility.

TTWNO avatar Aug 08 '23 22:08 TTWNO

i was looking for something similar. if I understand this correctly I could have the lib create my SVG with info tagged into it that I can then use to show in tooltips via js or rust-wasm, right?

extrawurst avatar Nov 08 '23 16:11 extrawurst

Exactly, yes.

TTWNO avatar Nov 08 '23 17:11 TTWNO

I would also like this feature. My use case is to server side render the SVG, then use a web component to add interactivity to the svg

cameronbraid avatar Jul 08 '24 21:07 cameronbraid