Proportional Symbol Map
Overview
As the name implies, symbols (circles, bubbles), representing the values, are drawn of the proportional size to the size of the value being represented. The size of the bubbles (proportional symbols in maps) does not depend on the size of the region associated with the variable. For example, if we show the value of unemployment on a proportional symbol map of the UK, Dundee would have bigger visual importance then Highland if their unemployment values were so (e.g. 3.5% in Dundee, 1% in Highland).
An example of proportional circles is shown below.
The Bubble series in AnyChart JavaScript Maps is quite similar to the Basic JavaScript Bubble series. You can read about Bubble Charts in the Bubble Chart tutorial, and in this article we will consider significant issues of Bubble charts used with maps.
Creating Bubbles
Bubble series is being created the same as other series on a map. First, we should create the map, set the geoData and define series of bubble type:
// creating the map
map = anychart.map();
// setting the geoData
map.geoData(anychart.maps.australia);
// setting the series
var series = map.bubble(dataSet);
Data
There are two ways of defining bubble placement data properly. Let's look at them.
Latitude and Longitude
First of all, we need to remember, how we define the location of any object (town, country, house, memorial, ship, etc) in the world. Wherever the point is placed on the Earth and however small it is, there are always two geographic coordinates specifying this point location: latitude and longitude.
Latitude specifies the north-south position and longitude is the east-west coordinate of an object on the Earth's surface. Both are measured as angles: latitude is in a range from 0° at the Equator to 90° N at north and 90° S at south (or 90° and -90° accordingly); longitude is being ranged from 0° at the Prime Meridian to +180° eastward and −180° westward.
We use this system of defining the point's location as the main one. While we use "x" and "y" in other charts and choropleth maps, we've got "long" and "lat" to define longitude and latitude.
Let's have a look at the sample below to understand the meaning of described.
// create data set
var dataSet = anychart.data.set([
{'id': 'Sydney', 'size': 106, "lat": -33.51, "long": 151.11},
{'id': 'Cape York', 'size': 103, "lat": -10.41, "long": 142.22},
{'id': 'Cape South-Point', 'size': 109, "lat": -39.08, "long": 142.22},
{'id': 'Cape Byron', 'size': 108, "lat": -28.36, "long": 153.38},
{'id': 'Steep-Point Cape', 'size': 95, "lat": -26.09, "long": 113.09},
{'id': 'Alice Springs', 'size': 100, "lat": -23.69, "long": 133.87},
{'id': 'Adelaide', 'size': 99, "lat": -34.98, "long": 138.42}
]);
Region ID
Now, let's look at another way of defining the points locations on a map, when there are only one field is necessary: "id", which binds by the field defined by geoIdField() method. Set the necessary parameters for the map and the series:
var dataSet = anychart.data.set([
{'id': 'AU.NS', 'size': 7565500},
{'id': 'AU.NT', 'size': 243700},
{'id': 'AU.WA', 'size': 2565600},
{'id': 'AU.SA', 'size': 1682600},
{'id': 'AU.VI', 'size': 5866300},
{'id': 'AU.QL', 'size': 4750500},
{'id': 'AU.TS', 'size': 514700}
]);
// create map chart
map = anychart.map();
// set geodata
map.geoData(anychart.maps.australia);
// create bubble series
var series = map.bubble(dataSet);
// set series geoIdField settings
series.geoIdField("code_hasc");
Note: this sample uses third party proj4.js library, to learn how, why and figure out if you need it please see the Map Projections article.
Size
You can adjust how the bubbles' size is defined. For this we use two methods: maxBubbleSize() and minBubbleSize(). Let's see how it is done:
// set the maximum size of the bubble
map.maxBubbleSize(35);
// set the minimum size of the bubble
map.minBubbleSize(10);
You can set the size in percents of map size as well:
// set the maximum size of the bubble
map.maxBubbleSize('20%');
// set the minimum size of the bubble
map.minBubbleSize('1%');
Altering Bubble Series
Altering the series looks pretty much the same as in basic Bubble Charts. We can easily do it here. Let's look through a couple of samples.
Series colors
To color all bubbles in a series we use the fill() method; to color the hovered bubbles there is a hoverFill() function; for selected bubbles we've got selectFill(). For coloring the stroke we've got stroke(), hoverStroke() and selectStroke() accordingly.
Let's create a sample using things we've learned.
// change the fill and hoverFill colors
series.fill("#EBD670");
series.hoverFill("#C7FF99");
// change the stroke and hoverStroke colors
series.stroke("#C7FF99");
series.hoverStroke("#EBD670");
// set the select colors
series.selectStroke("#66FFCC");
series.selectFill("#879CED");
Also, we can make a monochromatic map using hatch fills. We use hatchFill to add a hatch pattern to the whole series, hoverHatchFill to add hatch to series in hovered state and selectHatchFill to make the selected elements hatched.
// making the chart monochromatic
series.hatchFill("horizontal");
series.hoverHatchFill("diagonal_cross");
series.selectHatchFill("confetti");
series.stroke("black");
series.fill(null);
Note that we should get rid of the main filling color, unless we want the hatch being added over the color.
As usual, we can define the colors through the dataSet, especially if we need different color settings for some of our bubbles.
var dataSet = anychart.data.set([
{'id': 'AU.NS', 'size': 7565500, 'fill': "red", hoverFill: "#FF6666", selectFill: "#800000"},
{'id': 'AU.NT', 'size': 243700, 'fill': "green", hoverFill:"#80B280", selectFill: "#003300"},
{'id': 'AU.WA', 'size': 2565600},
{'id': 'AU.SA', 'size': 1682600},
{'id': 'AU.VI', 'size': 5866300},
{'id': 'AU.QL', 'size': 4750500},
{'id': 'AU.TS', 'size': 514700}
]);
Labels and Tooltips
You can also alter the labels' and tooltips' appearance. Use standard methods such as fontColor() for labels, format tooltips using format() function. You can find everything about this in the Labels and Tooltips tutorial.
Let's now take a look at the couple of samples with labels and/or tooltips. First, let's change the font color with fontColor(), change their size and format them a bit using format() function.
// set the text color
series.labels().fontColor('black');
series.labels().fontSize(10);
// format the labels
series.labels().format(function(){
return(this.getData("name")+"\n"+this.size);
});
Find out more about Text Formatters here.
Labels are enabled by default, they can be turned on and off using the enabled() method as usual.
Multi series
You can add several series to a map, no matter which type. We can create a multi-series Bubble Map or have different kinds of series on a map. Let's first create an Australia Map with choropleth and bubble series.
For this we'd better set the data as array as we should map it properly. Don't forget that bubble and choropleth series have different necessary data fields and the choropleth series has its own coloring settings. Read more about this here.
var dataSet = anychart.data.set([
['AU.NS', 3.5, 8.5],
['AU.NT', 7.1, 12],
['AU.WA', 10.4, 2.9],
['AU.SA', 4.7, 28.2],
['AU.VI', 7.9, 19.4],
['AU.QL', 8, 3.7],
['AU.TS', 3.2, 7.3]
]);
var series1Data = dataSet.mapAs({id:[0], size:[1]});
var series2Data = dataSet.mapAs({id:[0], value:[2]});
We can create a map with several bubble series as well:
// create the data
var dataSet = anychart.data.set([
['AU.NS', 3.5, 8.5],
['AU.NT', 7.1, 12],
['AU.WA', 10.4, 2.9],
['AU.SA', 4.7, 28.2],
['AU.VI', 7.9, 19.4],
['AU.QL', 8, 3.7],
['AU.TS', 3.2, 7.3]
]);
// mapping the data
var series1Data = dataSet.mapAs({id:[0], size:[1]});
var series2Data = dataSet.mapAs({id:[0], size:[2]});
//set series geoId field settings
series_1.geoIdField("code_hasc");
series_2.geoIdField("code_hasc");
As you can see, we can operate the series on a map quite easy and similar to working with basic charts. Find more about Choropleth series in the Choropleth tutorial and some other features of Bubble series in the Bubble tutorial.