People sometimes ask me how I write my interactive tutorials. I started out using d3.js, and five years ago I wrote an interactive tutorial about how I made interactive pages with d3.js. I recreated a diagram from my line drawing tutorial, which was implemented in d3.js. I now use Vue.js v2, so I wrote a new tutorial about how I make interactive pages with Vue. I recreated several diagrams from my circle drawing tutorial.
The page is intended to document how I write my pages. It's not a comprehensive guide to making Explorable Explanations. Everyone has their own style and preferred implementation techniques. I approach it as a document (explanations) with added interactivity (explorables), and the implementation reflects that. But I don't use the same approach for every page; I'll switch to Canvas or WebGL for some projects. Most of the ideas on the page will work just as well with other libraries, but I'm showing Vue because that's what I use most often.
If you are interested in how I make my pages, or how to get started making your own, take a look at my new tutorial. Please give me feedback on what was confusing or didn't work well for you, so that I can improve the page.
Post a Comment