-
Notifications
You must be signed in to change notification settings - Fork 3
Visualization Design
The details indicated here are just one set of ways to think about designing a visualization. There are many other resources available online and in book form to help design visualizations.
We should design a visualization knowing the audience and the purpose. The audience is you and your fellow developers. This is much easier than building a normal visualization for the web. You know what information needs to be conveyed to explain the idea. You know the metaphors that will make sense. You know technical details like what browsers the audience will be using. The purpose of the visualization is to communicate what's happening inside the computer when you're code is running. It should be communicated at a level that makes sense for the audience. IE. we don't need to worry about the behavior of electrons in piece of copper.
The trick is that you're not visualizing code. You're visualizing code execution. You want to understand the computer's interpretation of your code. We know that code can be thought of as data. Code execution can also be captured as data. (See the 2013 Clojure/West talk by Zach Tellman Code Execution as Data.) VDD Core is one way that this data can be captured and sent to the browser for visualization. Once the data in a browser we can visualize it in numerous ways using the data visualization tools that already exist.
Consider how you want to view code execution over time. It could be all shown in a single visualization that captures data changing across time. Traditional charts like the line graph, scatter plot, and bar charts are good for showing simplistic data over time. These are also easy to implement in many different libraries.
Timelines are another way to visualize change over time. The developer tools built into your web browser usually provide several timelines to show network requests, rendering, and JavaScript events. The timeline can show all of the overall events and allow drilling down into events by selecting them. Selecting an event would provide a mini visualization of the data in the event.
Code execution can also be shown by visualizing each discrete chunk of data from a sequence as a separate "frame" in an animation. The player component (TODO fix link to player component.) combined with a visualization showing each step can be used to show this.
Or you may not care about visualizing execution over time. You may only care about viewing the final state.
Once you've thought about how to visualize time you can determine how to visualize the entities within your software.
Identify the things in your code that you want to visualize. If you're using Object Oriented Development these would most likely be similar to the classes that you've defined. If you're using Functional Programming these would be the names you would use for the data flowing through your functions. You should pick the entities necessary to communicate what's happening during code execution.
The entities must be made tangible on the screen. Choose a visual representation for the entities you picked in step 1. This step often has to be done in concert with Step 3, Choose a Layout. Depending on the layout chosen the visual representation of each noun may be different. It's useful to treat this as a separate step in which you consider all of the possible visual representations for each entity.
If the entity is simple like a string name it can just be the text. Numbers can also be represented as text. Depending on what the number represents it can be more useful to include another representation of the number that's visually distinct. This could be the size of a drawn object like the length of a bar or the radius of a circle. Or it could be represented by a color or the opacity of an object. The number as text should always be visible or accessible via a tool-tip alongside it's visual representation.
More complicated entities can be represented by a combination of simpler visual entities. Each attribute of the entity becomes a characteristic of the visual representation.
After creating a list of the possibly entity visual representations in Step 2 you need to choose how to layout the entities. Entities can be laid out many different ways. Information can be organized simply using HTML elements and CSS or you can use more advanced layouts like D3 layouts.
We don't need to over do things. Choose the simplest method of visualization that communicates what's happening.
Visualizations should ideally have an interactive component. This allows the visualization to interact and test the code. Alternatively you can interact using the REPL. Both are useful depending on your work flow. The examples in VDD Core Examples all have some form of interactivity. This is mainly accomplished by creating a text area where test data can be entered and submitted. The method of input could also be integrated with the visual components such as clicking and dragging on a map to enter an example spatial area.