In this tutorial I want to describe the process of data visualization with jVectorMap. At the moment data could be visualized with jVectorMap in several ways. You can use color, opacity or marker size to represent some values on the map. I want to demonstrate jVectorMap abilities in data visualization on the example, which shows dynamic of unemployment rate in the USA from 2005 to 2009. The final result is available in the examples section. To build our map we will use three sets of data: unemployment statistic by metropolitan areas and states and population statistic by metropolitan area. While the unemployment statistic will be presented using the color gradients, the population will be visualized using the size of markers representing metro areas. All the data used in the this tutorial is available on the site of U.S. Census Bureau with their powerful FactFinder service. To collect all the data and convert it to a suitable format I use simple script written in Ruby language which I like for neat syntax and endless set of libraries for any purpose. The full source code of the project is available from the GitHub repository. So once all the data is packed in one JSON file and ready to use we can start to build the visualization. First we need some html stub with all the scripts and CSS files connected. The stub will have only two elements on the page: container of the map and container for the slider which will be used to switch the The data in our example is received via AJAX request and once the it is loaded the map could be initialized. Now let’s make make the labels which are shown when mouse cursor is over region or label more readable. To achieve this we need to set callbacks for the hover events and modify labels inside of them: Now the last step is to define action on the slider movement. Slider used in this example is a standard component from the jQuery UI framework. By default we visualize data for the last year in the report. If slider is moved we need to update data according to the date chosen. DataSeries class have setValues method for that: Source.

Menu
whatsapp button