Graphics Reference
In-Depth Information
in the font, like the letter “a” or “q.” This is a longstanding trick that came
back into fashion in web design with the introduction of browser support for
dynamically supplied web fonts, enabling them to be reliably supplied as a
componentofthepagethatusesthem,ratherthandependingonthembeing
already resident on a user's computer.
An example of a symbol font is Font Awesome, which was used for the
gender icons in the previous examples. The potential disadvantage of using
a symbol font stems from it being a bit of a hack of a system designed
for something else. The character-to-symbol mapping is unique to the font
used, so if the characters appear in any other font, the result will be
incomprehensible.
Use of web fonts ensures that the right font will be used in a browser.
However, problems can still occur in desktop visualizations with regularity
if, for example, graph files are opened on another computer. If the tool
does not support embedding fonts in the file and the font is missing from
the system (which is very often the case), the intended symbols will not be
displayed.
It can also be a bit tricky to get the characters into the visualization. With a
graph visualization tool like Gephi, the typical method would be to code the
icon text values directly into the source data, which works but is essentially
a blind process. The values will not be intelligible in any view of the source
data. If the visualization tool supports it, the best solution is instead to
specify the icon abstractly through the use of a type name and have the
tool map that to the appropriate character code. As shown in
Figure 16-6
,
this is essentially the approach that Font Awesome provides for web-based
visualization through use of CSS class names.
Figure 16-6:
Specialized symbol fonts like Font Awesome as shown here
provide custom icon libraries in a relatively convenient and efficient form.
Common advantages of font-based icons in a web browser include simple
potential for efficiency of loading. Downloading one font file is much more
efficient than downloading a similar number of symbols individually.
Another advantage universal to both web and desktop includes support for
mapping fill or outline to data-driven colors to visualize properties of the
data.
