Still have questions?
Contact support

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.

JsFiddle Playground

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}
]);

JsFiddle Playground

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");

JsFiddle Playground

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);

JsFiddle Playground

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%');

JsFiddle Playground

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");

JsFiddle Playground

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);

JsFiddle Playground

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}
]);

JsFiddle Playground

Labels and Tooltips

You can also alter the labels' and tooltips' appearance. Use standard methods such as fontColor() for labels, format tooltips using textFormatter() 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 textFormatter() function.

// set the text color 
series.labels().fontColor('black');
series.labels().fontSize(10);

// format the labels
series.labels().textFormatter(function(){
    return(this.getDataValue("name")+"\n"+this.size);
});

JsFiddle Playground

Find out more about Text Formatters here.

Labels are enabled by default, they can be turned on and off using the enable() method as usual.

JsFiddle Playground

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]});

JsFiddle Playground

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");

JsFiddle Playground

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.