How to do better visualizations with D3? According to Tamara Munzner, a Computer Science professor in University of British Columbia, computer-based visualization systems provide visual representations of datasets intended to help people carry out some tasks more effectively. In the space of visualization design, there are: 1) Huge space of design alternatives; 2) many possibilities now known to be ineffective; and 3) guidelines that continue to evolve. So here are my humble opinions on how to improve and evaluate the quality of my future data visualizations:
Know your data type -
Tamara Munzner classifies data types as follows:
Tabular
- Categorical
- Ordered
- Ordinal
- Quantitative
Relational
Spatial
Know your hardware -
Colin Ware talks about physiology, neurosciences, and limitations of visual memories as well as short-term memories in his Visual Thinking for Design book. By understanding our perceptual capabilities, we will gain more solid theoretical background for better practices.
Find the best match for data and graphs -
For visual encoding, first we need to analyze the abstract data dimensions of our datasets. Then we want to consider all the possible visual channels like position, color, tilt, shape, size, texture, area, volume, ...etc. There are definitely more than one ways to encode the data, so this is why an experienced designer could generate their own guidelines in their tasks.
Final adjustments -
The final step is to understand your tools well. For this project I use D3 as a tool, so it is important for me to know JavaScript, jQuery, HTML, SVG, and DOM well before I can actually make best use of this JavaScript library.