Remaking http://ncase.me/matrix/ with SVG and d3.js
This technical experiment currently lacks the finesse and wistfulness of the original. I’m most inspired by the genius (yet obvious in retrospect) technique of showing both the original point and the transformed point connected by a line. Even the idea to use a letter is brilliant to me: it is familiar and intuitive, it allows for discrete sampling without introducing other concepts like pixels.
My hope is that by going through the exercise of making it more data-driven I can expand on the concept to introduce things like rotation. Perhaps using d3 will also make the code more concise, but that’s not certain as the original is relatively short.
I’m still working on porting all of the original interactions, but I’m quite pleased with the work in progress.
I wrote all this code inside building-blocks as a way to “dogfood” it and do an initial usability test. Working with multiple files has certainly exposed some gaps, but it was overall quite a pleasant experience.