Need map visualization tool which treats countries like bars in a bar chart

Question

I've been searching the internet for a package which can create a simply global map. There are several which I've searched, webgl globe, kartograph, cartodb, R etc.

None of these have what I'm looking for.

What I'm looking for: I want a map of the globe, which has two colours for the each country. there would be a background colour, then the second colour would fill from the bottom by x percent based on an input. For example, if I created a map of gun owners as a percentage over the US map, the background colour would be cream and the second colour would fill the map 55% which represents the amount of gun owners.

So, basically, the second colour in the map would act like a bar chart which fills the colour of the country by the % being applied to the country/area.

Please let me know if any .js library or which tools might be able to do this.

Answer 1

Just take any SVG map of the world and change every country into a mask with two rects below it. Do the rest with a simple loop and svgTopOfTwoElements.style.setProperty("height", heightPercentage, ""). Just search google for getting started with SVG from javascript (it's practically the same as working with HTML elements). The only possible concern would be that 17% of the users don't support SVG (IE8-), but for the ease of use you get in return I would believe this to be an acceptable price.