What is Visualization Driven Development?

Jason Gilman edited this page Sep 6, 2013 · 7 revisions

Visualization Driven Development (VDD) is the practice of using interactive visualizations to understand the algorithms of our applications. When you were first learning software development you might have learned to develop with something like [LOGO](http://en.wikipedia.org/wiki/Logo_(programming_language) or Scratch. Both of those programming languages and others like them operate in a visual environment. The execution of your code is shown visually as it executes. This has profound implications on our ability to quickly understand how code is executed and find and correct problems.

It's not only useful but also fun. Part of the joy of programming is the joy of creating something. It's extremely satisfying to create something that works, is useful, and solves peoples' problems. Modern software development stunts that. The abstractions of objects, functions, and data from our code are invisible once they're running inside the computer. Visualizations can make these abstractions concrete and tangible. When you can see what your code is doing you know what your code is doing.


These are the steps to follow Visualization Driven Development.

Step 1. Think

There's no excuse not to consider the long view when developing software. Don't let some letter DD (as in TDD, BDD, VDD etc.) replace thinking about the main goal and the path to get there. The first step in developing software (or solving any problem for that matter) is thinking about the problem.

Think about what you're trying to solve. What's the actual problem? What's the likely solution? How can you visualize the solution? (See Visualization Design for tips on designing a visualization.)

Once you've got answers or possible answers to those questions write them down.

Step 2. Build a (Minimal) Visualization

Build a minimal version of the visualization that should show your code executing. You can mock out the data that you expect to produce from your executing code.

We need to have a visualization in place to see something while we are developing. It's useful to know how you want to visualize the code execution before you write the code. Just as Test Driven Development forces you to write code that's testable Visualization Driven Development forces you to structure code so that execution can be captured for visualization. Well structured code tends to be more easily visualized.

There's no hard and fast rule that this has to come before you write your code. You might find you have existing code bases or even third party libraries you want to understand. Visualizations can be retrofitted over existing code.

Step 3. Write Some Code

Start writing the main code of your application. Write just enough code to make the visualization you built in step 2 show something.

Step 4. Visualize Code Execution

You should have some code that you can execute and visualize at this point. If you've built an interactive visualization that can execute your code you can use that to test various scenarios. Or you can exercise your code from the REPL and send the data to the visualization. You should be able to see some problems with your code using your visualization. Add tests that capture any problems shown by the visualization and fix them in code.

Step 5. Repeat

Follow the plan developed in step 1. Update the visualization, tests, and code until you've achieved your goal. Make sure to take breaks and drink plenty of water.

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.