CartABl: Instrumenting the authoring of interactive maps and figures

Olivier Aubert - www.olivieraubert.net
@olivier_aubert@piaille.fr

FOSDEM 2025 - 01/02/2025

What is it?

Accessible instrument to author interactive graphics (SVG)

Demo of result

Genesis

Targeted scenario

Pipeline adobe -> SVG -> publish

Becomes:

adobe -> SVG -> add interactivity -> publish

with the possibility of some iterations (back to graphics edition)

Existing work

• Somehow existing features in either Inkscape (Interactive mockup extension) or Illustrator ("SVG Interactivity")
  • Limited ergonomy
  • Both require to write js, which is not adequate for many users
• Data inspiration, e.g. Vega Voyager, Tableau : DND graphical approach, but using data as source

How to write software to bridge the gap for graphics?

Technical details - runtime

• Goal: single autonomous SVG file (easy deployment)
• Small runtime (LGPL) as a JS file embedded in the SVG
• Interaction rules defined as declarative elements stored as SVG metadata.
  • Very basic Event / Action / Parameters model for now
  • No condition, no state - KISS for a start
• Custom CSS stylesheet

Technical details - editor

Actions catalogue

Open in editor

Some more features

• Ability to merge rules from an existing file

  → allows re-edition of original SVG

• Events are emitted by the SVG

  → can be further integrated in an HTML page

Shortcomings

• Requires identified elements
• Sensitivity to Adobe Illustrator export settings
  • Styling: Presentation attributes, Inline style, Internal CSS (factorized CSS)
  • ID generation: Unique, Minimal, Layer names

• Voluntary limitation of framework model and of possible events/actions at first, to build up from needs (bottom-up approach) rather than possibilities.

  See gallery https://igarun.univ-nantes.io/CartABl/

To come

• Internationalization
• Diagnostics/advice on SVG structure
• Extended events and actions
  • possible model extension (conditions, state…)
• Shortcuts for identified patterns (e.g. step-by-step display)
• Building of a library of animation components (as small SVG files that can be merged)

Research questions

• Interdisciplinary Instrumental Genesis
• Innovative uses through user-lead innovation

From Instrumental Genesis…

Co-evolution of the instruments and the practices they make possible

…to Interdisciplinary Instrumental Genesis

Interdisciplinary work

Cultural differences between fields

• geographers used to graphic semiology, but less familiar with interaction features and technology possibilities
• research in dataviz in the field of interactive graphics (esp. vega/vega-lite by Jeff Heer)
• Importance of dialogue and building a common language

User-lead innovation

Empowering users

• Making things accessible
• Giving space for experimentation
• Building communities

The end

igarun.univ-nantes.io/CartABl/

Feedback and ideas welcome!