#+TITLE: Making of: Line drawing tutorial #+DATE: <2017-05-15> #+begin_comment is used in my html preprocessor to put stuff into the section of the page; org-mode doesn't have a way to do that normally #+end_comment #+begin_export html #+end_export People ask me how I write my interactive tutorials. I can point at the HTML+CSS+JS but that doesn't show the /process/. On this page I'll recreate the first half of my [[https://www.redblobgames.com/grids/line-drawing/][line drawing tutorial]], showing the an implementation using [[https://d3js.org/][D3.js v4]]. The implementation style will be similar if you use jQuery. I also have [[https://www.redblobgames.com/making-of/circle-drawing/][another page showing an implementation using the Vue/React/Svelte declarative style]]. In this tutorial I'm implementing diagrams using SVG instead of Canvas or WebGL. I usually choose SVG in part because DOM-manipulating libraries like D3 and Vue make HTML and SVG easier to work with. The goal is to implement interactive diagrams like this: #+begin_export html