Data visualization is a big part of what we do at Intridea, and in this post I'm sharing what we used to build a world choropleth map in one of our client projects.
What is Raphael ?
Raphael is a small JS library that makes it easy to create vector graphics on the web. It's also (conveniently) compatible with major browsers including IE 6.0. You may have heard about d3.js, another popular data visualization tool which is built on HTML5 and CSS3. We didn't use it because it has some compatibility issues with IE. In this particular use case we needed IE compatibility.
Basic Usage of Raphael
Create Canvas:
Add Elements: elements are created with paper instance we create last step, you can create rect, circle, text, path, etc.
You can actually chain call the method around element which will handful for show codes:
Draw a path:
Before we start building our world choropleth map you may want to check out the demo here. The world map is built with lots of paths; for the paths of countries around the world we need to have countries paths data and luckily we can find that in http://raphaeljs.com/world/world.js
The HTML:
<div id="world_map_container"></div> The Coffeescript Code:
bindHoverToCountry method is used to bind hover events on the country path which will be used to highlight the country when mouse hover the country and display tooltip
You can download the code in github https://github.com/intridea/raphael-choropleth-map. The full codebase is developed with Backbone and Raphael. You can find the Raphael code in https://github.com/intridea/raphael-choropleth-map/blob/master/app/assets/javascripts/views/map_view.js.coffee.
Resources:
raphaeljs.com/reference.html
