Use D3 with Ember

Live demo of Lights Out! Thanks to Dan, Chris, and Jeff for organizing the Meetup!

 

Advertisements

Lights Out

Two months ago, I got to use D3 to help visualize the steps for getting something approved and interact with these steps. I affectionally call my code Roadmap.

roadmap-screenshot
An everyday example.

I had a great time because (1) the way we draw things in D3 reminded me of Matlab, whom I will always love; (2) I got to re-learn graph theory (fun fact: all digraphs have a topological sort—being able to sort is always nice and being able to in linear time even more so); and (3) I got to play with Post-it notes to make up an algorithm for drawing graphs on desktop and mobile.

roadmap-planning.jpg
Office supplies to the rescue.

I also had a hard time finding out how to use D3 in Ember. Because Ember is rather a rare species, there was only 1 tutorial that helped me understand what I needed to do. Thanks to that tutorial, I was able to create a prototype of Roadmap over a weekend, use Ember’s mixin feature effectively, and write extensive tests to show that Roadmap really works. In case you want to learn Ember and D3, let me show you what I learned.

We will create a game from the 90s called Lights Out. The game consists of a 5 x 5 grid of lights, which you can press like buttons. When the game starts, some of the lights are on. When you press a light, that light and its adjacent ones—top, right, bottom, and left, if they exist—are switched from on to off, or off to on. The goal of the game is for you to turn off all lights, preferably in as few moves as possible.

Continue reading “Lights Out”

Hello JS World!

Over the past few months, I have converted from a Matlab to a JavaScript user. It’s free, powerful, and in demand. As a result, I will start writing code in JS, maybe occasionally in Matlab. As always, I will write about math.

My recommendations:

  • 3JS: For super awesome graphics
  • D3: For data lovers
  • Ember: For ambitious team projects
  • React + Redux: For easy learning
  • Node: For everything

Happy 2018 everyone!