O'Reilly logo

Social Data Visualization with HTML5 and JavaScript by Simon Timms

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Visualizing

One of the more effective visualization techniques is to show the relative strengths of different categories by showing a scaled image. We saw this technique applied in the Twitter chapter using bubbles. We can take that to the next step by using images instead of just circles.

The first step is to locate logos for Android and iOS that are already SVGs. As it turns out, Wikipedia is a great source for this and their images are all licensed under creative commons, meaning we can use them in our visualizations. One of the really great features of SVG is that you can easily merge two images together through the use of definitions. If you open up an SVG like the Android logo at http://upload.wikimedia.org/wikipedia/commons/e/e1/Android_dance.svg ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required