JavaScript interactivity with ai2html Illustrator exports (including D3)

If you want to use JavaScript or D3 with ai2html-exported Adobe Illustrator .ai graphics, it doesn't very work by default! But by exporting some layers to SVG and embedding them in your HTML you'll almost be there.

===== THE STEPS =====

1) Export some of your layers as SVG by adding :svg to their name
2) Add inline_svg: true to your settings
3) Use the layers palette to name single elements you want to access by ID
4) Use the layers palette to group multiple elements you want to access by [data-name=""]

For that last one: yes, classes and IDs are kind of possible, but I find that the easiest route.

Step through the process and you'll be on your way to ai2html-based interactive graphics and data visualizations in no time!

(Sorry my mic keeps crackling and popping, I have no idea what's going on there.)

=====CODE======

The ai2html HTML block you'll add as a separate text block is this: https://gist.github.com/jsoma/cc34430...

Be sure to include the "ai2html-html" as the first line!

===== LINKS =====

ai2html tutorial playlist:    • How to use ai2html for data viz  
ai2html walkthrough github: https://github.com/jsoma/ai2html-walk...
ai2html homepage: http://ai2html.org/
MDN SVG documentation: https://developer.mozilla.org/en-US/d...

===== CHAPTERS =====

00:00 Intro
04:02 Separate interactivity layer
07:00 Export layer as SVG
10:00 Assigning objects ids and selecting them
15:25 Assigning groups ids and selecting them
20:15 Using data-name instead of ids