8 JavaScript libraries for data visualization in the form of interactive maps
Data visualization has become an integral part of the life of almost every web developer. If plotting graphs, charts, maps and dashboards so far has never been your headache, just wait a bit: surely you will soon join our “club”.
This article provides a general, but involved, view of the eight most interesting, in my opinion, JavaScript libraries for building interactive geovizualizations. In general, there are now many such solutions, and choosing the optimal one for a particular project is sometimes a difficult task, at least in time. With this publication I will try to at least slightly simplify the lives of those who are just beginning to understand this topic. By the way, this is a slightly modified translation of my recent article on Onextrapixel ( original in English ).
')
Just in case, I’ll clarify right away: in general, the JavaScript library for creating maps can be divided into two types. Some simply allow you to display the geographic location of one or more objects. For such a task, you can use maps like Google Maps or OpenStreetMaps as a source. In principle, such solutions are enough, and the result of their work is approximately as follows:
Another type - and I want to talk about it today - is a JavaScript library, with the help of which you can create data visualization by creating beautiful interactive maps . They show either the connections between the quantities in different geographic regions, or the movement of any objects relative to their location, etc. - all that is extremely important in terms of data analysis and business intelligence.
amMap is a special JavaScript (HTML5) mapping library developed by the amCharts team. It does not need any external dependencies and makes it quite simple to make beautiful choropleth, bubble, dot (point), connector and flow cards, supporting many useful interactive features.
In particular, amMap makes it easy to “dive” into one or another selected map area using a drill down or, for example, use any pictures as markers - a rather curious thing.
To get started with amMap, you need to download a zip file with binaries. By the way, it already contains 455 maps in each of the supported formats (JavaScript / SVG). Documentation at amMap is not very large and comes down mostly to a set of questions and answers.
API description: yes .
Dependencies: no.
License: free of charge (branded cards) or for a fee (from $ 140).
AnyMap is one of the popular JavaScript (HTML5) libraries for data visualization, created by AnyChart . As in the case of amMap, to create a map with its help does not require much effort, as well as connecting any external
resources or third-party libraries (jQuery, etc.). AnyMap also supports all the basic types of series that you may need: choropleth, bubble, dot, connector, flow.
AnyMap's main interactive features include a drill down for a more in-depth study of specific areas, an event model for event handling (user interactivity), a color scale for automatically coloring a map using preset settings.
Looking ahead a bit, I’ll say that, in my opinion, AnyMap is more like D3 than amMap or Highmaps. It as if combines the possibilities of "boxed" solutions and at the same time is well expandable and controllable by the developer, allows you to completely customize vizualization by adding or changing various elements and easily create your own maps.
AnyMap binaries are in a ZIP file and contain many examples, and on AnyNChart CDN hundreds of maps are available in a variety of formats: GeoJSON, TopoJSON, SHP, SVG. It is also worth noting that this library has rich documentation and an extensive description of the API, which, by the way, is quite easy to understand and - again - with a lot of samples.
API description: yes .
Dependencies: no.
License: free of charge (branded cards) or paid (from $ 79).
D3.js is a powerful, in terms of possible results, library for data visualization with open source. Unlike the other mentioned JavaScript libraries, D3 is rather a framework that gives maximum creative freedom. Although the creation of interactive cards is not as obvious as, say, in solutions from amCharts, AnyChart or Highcharts.
In particular, to make such a wonderful interactive map, as in the illustration, you will need to study a sufficiently large amount of materials. Although, I must say, it is worth it, because in the end you can make a really awesome, original visualization.
In fact, there are many features available in D3, including full customization of behavior, event model, etc. In general, I would say that this is the ideal solution for web applications. Although, unfortunately, D3 does not provide its own maps. This means that they will have to be independently searched in open sources, but this is hardly a big problem now.
There is no documentation as such for D3, however there is a well-written API and many different tutorials, examples and other useful materials literally all over the Internet.
API description: yes .
Dependencies: no.
License: free.
The Google giant has its own JavaScript library for data visualization - Google Charts . It contains opportunities for building interactive map-visualizations, called geocharts here, apparently that they should not be confused with ordinary maps, which are needed only to display the location of objects.
There is only one map on Google Geocharts, and this is a world map. However, you can select the region that the focus will be drawn to when drawing using the zoom.
Unfortunately, the local API does not support scrolling, zooming, dragging. Also, Google does not offer any type of series for maps other than choropleth and bubble. Once these shortcomings saddened me quite mildly, to put it mildly, but this was a positive thing: in the end, I had to start searching and studying all kinds of other libraries, and now I am sharing the results of this micro-research with you.
Anyway, GeoCharts is a great solution for those people and projects who do not need large and complex features, but who are looking primarily for speed and stability instead of some special beauty and customization.
API description: yes .
Dependencies: no.
License: free.
Highmaps is the “younger sister” of Highcharts and Highstock, popular libraries developed by Highsoft . Its key advantages are open source with all its advantages, small size, high rendering speed and a wide range of interactive features such as drill down, etc.
Among the series supported in Highmaps are choropleth and bubble. In addition, using this library, you can draw lines to mark roads, rivers, and connectors. Although to make, say, a flow-card here is not as easy as in the same amMap and AnyMap.
It is also worth noting that neither Highcharts nor Highmaps work without jQuery, so to use them, this dependency must be enabled (or, of course, there is another option to search for another library for data visualization - haha).
A positive point - Highmaps has a large number of maps in SVG and GeoJSON formats. She also has a lot of documentation that allows you to quickly and successfully understand all sorts of settings.
API description: yes .
Dependencies: jQuery.
License: free (branded cards) and paid (from $ 390).
jQuery Mapael is another very decent, well-made open source library for creating dynamic vector maps. It is based on jQuery and Raphael JS, so these dependencies need to be kept in mind when building choropleth, bubble or connector cards it supports.
A set of their own, ready to use maps is in the Mapael repository . Documentation and description of the API are combined into one article but, frankly, getting started with this library is quite easy and with the help of this detailed tutorial .
API description: yes .
Dependencies: jQuery and Raphael.
License: free.
The library for interactive maps jVectorMap is open source, like a number of others listed in the article. It will not work without jQuery. Although it may seem to someone that such an external dependency makes this (or any other) library not very easy-universal, this should not be a big problem nowadays, because jQuery by a large margin takes the first place among JavaScript libraries for sites and by popularity, and by market share.
Unfortunately, the choice of available types of series here is not too large: in jVectorMap only choropleth and marker maps are offered, but at the same time - we give this library its due - they are made quite soundly. In addition, here you can use any pictures as markers, as well as there are drill down and a number of other interactive features.
JVectorMap has a rather small description of the API and there is no documentation in its usual form, at least for me. However, there is a small, but still very useful tutorial Getting Started . Your maps are used, but only in GeoJSON format.
API description: yes .
Dependencies: jQuery.
License: free and paid (from $ 39).
Kartograph is another open source solution with all the benefits. This library is characterized by an abundance of visual effects such as shadows, blur, etc.
It is also interesting that, in addition to the traditional choropleth and bubble types of series, there are still 3D columns (or, as they are sometimes called, vertical 3D bars).
There is no ready collection of maps in Kartograph. But the library works with any cards in the SVG format. She also offers the Kartograph.py utility for creating maps.
Although Kartograph has dependencies and will not work without Raphael JS (used as a drawing engine) and jQuery, this library makes the process of creating maps really quite understandable and seamless, while the documentation and description of the API of this library, combined into one article, make it quite easy and conveniently get the right interactive maps for your projects.
API description: yes .
Dependencies: jQuery and Raphael.
License: free.
All of the JavaScript libraries I have listed for visualizing data using interactive maps are cross-browser. (Well, in the XXI century, otherwise, probably, and can no longer be.) Some of them even support older browsers, such as Internet Explorer 6. (Although this, I hope, will soon cease to be important, at the end of 2010- x.)
All the free libraries I mentioned do a pretty good job of creating interactive maps. But on the other hand, they do not provide such broad support as commercial ones, and, frankly, they are not that strong in customization (well, except for D3, of course).
Speaking of commercial libraries - by the way, they can usually be used free of charge for non-commercial and personal purposes - I cannot fail to point out AnyMap and Highmaps for their detailed documentation and API descriptions, as well as for large pools of all sorts of examples / demo of JavaScript maps with good quality interactivity.
Thanks for attention. I hope this article will be useful for someone with the goal of quickly grasping the core essence of top JavaScript libraries designed to visualize data through interactive maps. Please share in the comments your own thoughts, conclusions, understandings and, of course, the names of your favorite libraries, if all of a sudden I, in your opinion, rightly did not touch them in this article.
Have a nice day, everyone!
This article provides a general, but involved, view of the eight most interesting, in my opinion, JavaScript libraries for building interactive geovizualizations. In general, there are now many such solutions, and choosing the optimal one for a particular project is sometimes a difficult task, at least in time. With this publication I will try to at least slightly simplify the lives of those who are just beginning to understand this topic. By the way, this is a slightly modified translation of my recent article on Onextrapixel ( original in English ).
')
Just in case, I’ll clarify right away: in general, the JavaScript library for creating maps can be divided into two types. Some simply allow you to display the geographic location of one or more objects. For such a task, you can use maps like Google Maps or OpenStreetMaps as a source. In principle, such solutions are enough, and the result of their work is approximately as follows:
Another type - and I want to talk about it today - is a JavaScript library, with the help of which you can create data visualization by creating beautiful interactive maps . They show either the connections between the quantities in different geographic regions, or the movement of any objects relative to their location, etc. - all that is extremely important in terms of data analysis and business intelligence.
JavaScript libraries for interactive map visualizations
amMap (from amCharts)
amMap is a special JavaScript (HTML5) mapping library developed by the amCharts team. It does not need any external dependencies and makes it quite simple to make beautiful choropleth, bubble, dot (point), connector and flow cards, supporting many useful interactive features.
In particular, amMap makes it easy to “dive” into one or another selected map area using a drill down or, for example, use any pictures as markers - a rather curious thing.
To get started with amMap, you need to download a zip file with binaries. By the way, it already contains 455 maps in each of the supported formats (JavaScript / SVG). Documentation at amMap is not very large and comes down mostly to a set of questions and answers.
API description: yes .
Dependencies: no.
License: free of charge (branded cards) or for a fee (from $ 140).
AnyMap (from AnyChart)
AnyMap is one of the popular JavaScript (HTML5) libraries for data visualization, created by AnyChart . As in the case of amMap, to create a map with its help does not require much effort, as well as connecting any external
resources or third-party libraries (jQuery, etc.). AnyMap also supports all the basic types of series that you may need: choropleth, bubble, dot, connector, flow.
AnyMap's main interactive features include a drill down for a more in-depth study of specific areas, an event model for event handling (user interactivity), a color scale for automatically coloring a map using preset settings.
Looking ahead a bit, I’ll say that, in my opinion, AnyMap is more like D3 than amMap or Highmaps. It as if combines the possibilities of "boxed" solutions and at the same time is well expandable and controllable by the developer, allows you to completely customize vizualization by adding or changing various elements and easily create your own maps.
AnyMap binaries are in a ZIP file and contain many examples, and on AnyNChart CDN hundreds of maps are available in a variety of formats: GeoJSON, TopoJSON, SHP, SVG. It is also worth noting that this library has rich documentation and an extensive description of the API, which, by the way, is quite easy to understand and - again - with a lot of samples.
API description: yes .
Dependencies: no.
License: free of charge (branded cards) or paid (from $ 79).
D3.js (from Mike Bostock)
D3.js is a powerful, in terms of possible results, library for data visualization with open source. Unlike the other mentioned JavaScript libraries, D3 is rather a framework that gives maximum creative freedom. Although the creation of interactive cards is not as obvious as, say, in solutions from amCharts, AnyChart or Highcharts.
In particular, to make such a wonderful interactive map, as in the illustration, you will need to study a sufficiently large amount of materials. Although, I must say, it is worth it, because in the end you can make a really awesome, original visualization.
In fact, there are many features available in D3, including full customization of behavior, event model, etc. In general, I would say that this is the ideal solution for web applications. Although, unfortunately, D3 does not provide its own maps. This means that they will have to be independently searched in open sources, but this is hardly a big problem now.
There is no documentation as such for D3, however there is a well-written API and many different tutorials, examples and other useful materials literally all over the Internet.
API description: yes .
Dependencies: no.
License: free.
Google GeoCharts (by Google)
The Google giant has its own JavaScript library for data visualization - Google Charts . It contains opportunities for building interactive map-visualizations, called geocharts here, apparently that they should not be confused with ordinary maps, which are needed only to display the location of objects.
There is only one map on Google Geocharts, and this is a world map. However, you can select the region that the focus will be drawn to when drawing using the zoom.
Unfortunately, the local API does not support scrolling, zooming, dragging. Also, Google does not offer any type of series for maps other than choropleth and bubble. Once these shortcomings saddened me quite mildly, to put it mildly, but this was a positive thing: in the end, I had to start searching and studying all kinds of other libraries, and now I am sharing the results of this micro-research with you.
Anyway, GeoCharts is a great solution for those people and projects who do not need large and complex features, but who are looking primarily for speed and stability instead of some special beauty and customization.
API description: yes .
Dependencies: no.
License: free.
Highmaps (from Highsoft)
Highmaps is the “younger sister” of Highcharts and Highstock, popular libraries developed by Highsoft . Its key advantages are open source with all its advantages, small size, high rendering speed and a wide range of interactive features such as drill down, etc.
Among the series supported in Highmaps are choropleth and bubble. In addition, using this library, you can draw lines to mark roads, rivers, and connectors. Although to make, say, a flow-card here is not as easy as in the same amMap and AnyMap.
It is also worth noting that neither Highcharts nor Highmaps work without jQuery, so to use them, this dependency must be enabled (or, of course, there is another option to search for another library for data visualization - haha).
A positive point - Highmaps has a large number of maps in SVG and GeoJSON formats. She also has a lot of documentation that allows you to quickly and successfully understand all sorts of settings.
API description: yes .
Dependencies: jQuery.
License: free (branded cards) and paid (from $ 390).
jQuery Mapael (by Vincent Broute)
jQuery Mapael is another very decent, well-made open source library for creating dynamic vector maps. It is based on jQuery and Raphael JS, so these dependencies need to be kept in mind when building choropleth, bubble or connector cards it supports.
A set of their own, ready to use maps is in the Mapael repository . Documentation and description of the API are combined into one article but, frankly, getting started with this library is quite easy and with the help of this detailed tutorial .
API description: yes .
Dependencies: jQuery and Raphael.
License: free.
jVectorMap (by Kirill Lebedev)
The library for interactive maps jVectorMap is open source, like a number of others listed in the article. It will not work without jQuery. Although it may seem to someone that such an external dependency makes this (or any other) library not very easy-universal, this should not be a big problem nowadays, because jQuery by a large margin takes the first place among JavaScript libraries for sites and by popularity, and by market share.
Unfortunately, the choice of available types of series here is not too large: in jVectorMap only choropleth and marker maps are offered, but at the same time - we give this library its due - they are made quite soundly. In addition, here you can use any pictures as markers, as well as there are drill down and a number of other interactive features.
JVectorMap has a rather small description of the API and there is no documentation in its usual form, at least for me. However, there is a small, but still very useful tutorial Getting Started . Your maps are used, but only in GeoJSON format.
API description: yes .
Dependencies: jQuery.
License: free and paid (from $ 39).
Kartograph (from Gregor Aisch)
Kartograph is another open source solution with all the benefits. This library is characterized by an abundance of visual effects such as shadows, blur, etc.
It is also interesting that, in addition to the traditional choropleth and bubble types of series, there are still 3D columns (or, as they are sometimes called, vertical 3D bars).
There is no ready collection of maps in Kartograph. But the library works with any cards in the SVG format. She also offers the Kartograph.py utility for creating maps.
Although Kartograph has dependencies and will not work without Raphael JS (used as a drawing engine) and jQuery, this library makes the process of creating maps really quite understandable and seamless, while the documentation and description of the API of this library, combined into one article, make it quite easy and conveniently get the right interactive maps for your projects.
API description: yes .
Dependencies: jQuery and Raphael.
License: free.
Conclusion
All of the JavaScript libraries I have listed for visualizing data using interactive maps are cross-browser. (Well, in the XXI century, otherwise, probably, and can no longer be.) Some of them even support older browsers, such as Internet Explorer 6. (Although this, I hope, will soon cease to be important, at the end of 2010- x.)
All the free libraries I mentioned do a pretty good job of creating interactive maps. But on the other hand, they do not provide such broad support as commercial ones, and, frankly, they are not that strong in customization (well, except for D3, of course).
Speaking of commercial libraries - by the way, they can usually be used free of charge for non-commercial and personal purposes - I cannot fail to point out AnyMap and Highmaps for their detailed documentation and API descriptions, as well as for large pools of all sorts of examples / demo of JavaScript maps with good quality interactivity.
Thanks for attention. I hope this article will be useful for someone with the goal of quickly grasping the core essence of top JavaScript libraries designed to visualize data through interactive maps. Please share in the comments your own thoughts, conclusions, understandings and, of course, the names of your favorite libraries, if all of a sudden I, in your opinion, rightly did not touch them in this article.
Have a nice day, everyone!
Source: https://habr.com/ru/post/318600/
All Articles