As a Frontend Developer you will often be tasked with creating UI for data visualization purposes, various UI elements containing bar charts, line charts, area charts, all kinds of charts that your little heart can imagine – or currently can’t. Finding and familiarizing yourself with solutions that can tackle the big “bad” (read: Big Data) may be a slightly daunting task for a newbie, so I’ve decided to lend you a helping hand and present you with one of the best jQuery data visualization libraries currently available.

Vector Maps is an Open Source jQuery library released under the MIT license on GitHub. It is used for – you guessed it, generating visually stunning and interactive Vector Maps for Data Visualization purposes. Hell, it’s so good that even yours truly had to contribute to its development.

Let’s say that you need to create a UI for representing the visitors your magnificently-awesome website is getting in a visually attractive and comprehensible manner. Forget about the tables champ, they are boring, you aim to impress.

First thing that you have to do is download the jQuery Vector Map library from the following link and include it in your project – a fairly straightforward process, don’t you agree?

GitHub Repository
https://github.com/10bestdesign/jqvmap

Besides the typical, libraries’ main JS & CSS files, you will also need to include a third one containing the map data of your choice – which is in this particular case “jquery.vmap.world.js” file from the “/dists/maps” directory.

<link href="jqvmap/assets/jqvmap.min.css" rel="stylesheet" />
<script src="jqvmap/assets/jqvmap.min.js" type="text/javascript"></script>
<script src="jqvmap/assets/jquery.vmap.world.js" type="text/javascript"></script>

Any DOM element can be used as a container for generating the fabulous Vector Map of the World. However, make sure that the width & height of that lucky DOM element is specified before uttering the magic words.

<div id="my-world" style="width: 800px; height: 600"></div>

Dataset that can be processed by the library should be in the country-to-number format like in the example below. Numbers for the US have been artificially inflated…’cause ‘Murica.

{
    ...
    "de" : 3691,
    "nl" : 1446,
    "us" : 154338,
    "fr" : 2026,
    ...
}

Now comes the easy part, simply select your desired DOM element and execute vectorMap function – passing your dataset as shown in the following example.

$("#my-world").vectorMap({
    "map"         : "world_en", // Map Must Be Specified
    "enableZoom"  : false,
    "values"      : dataset
});

That’s it, you have just learned how to use jQuery Vector Map library for Data Visualization purposes. If you would like to learn more, feel free to review the documentation and demo linked below.

Documentation
https://www.10bestdesign.com/jqvmap/documentation

CodePen Demo
https://codepen.io/djordje-jocic/full/KKwrxmJ