Selections in map

This example shows how to add selection can be added to layers. We want to filter out none selected item in the data source when a cluster feature is clicked or when multiple features are selected with a dragbox. When one of these types of selection is made in the map, all other objects using the data source (in this case an ordinal bar chart) are updated to reflect this selection. The data source is instantiated with population center data. The map shows population centers, while the ordinal chart shows population count by scale ranking. 
// Instantiating data source with population center data
var populationCentersSource = Sintium.dataSource({
    url: "https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_50m_populated_places.geojson",
});

// Instantiating layer with population center data
var populationCentersLayer = Sintium.vectorLayer({
    layerId: "Population Centers",
    dataSource: populationCentersSource,
    clustered: true,
    styleFunction: Sintium.generateCircleClusterStyle(12, "#2980b9", "#34495e"),
    selectedStyleFunction: Sintium.generateCircleClusterStyle(12, "#34495e", "#2c3e50"),
    selections: [
        Sintium.selection(['dragbox.ctrlClick', 'cluster.click'], function(e) {
            e.crossfilter();
        })
    ],
    geometryProperty: "geometry"
});

// Instantiating map
var map = Sintium.map({
    domId: "map",
    layers: [populationCentersLayer]
});

// Instantiating charts
var ordinalBarChartPopulation = Sintium.barChart({
    domId: "population-by-scale-rank",
    dataSource: populationCentersSource,
    xAxis: "SCALERANK",
    xAxisLabel: "Scale rank",
    yAxis: "POP_MAX",
    yAxisLabel: "Population",
    margins: [20, 10, 45, 55],
    yTickFormatShort: true,
    elasticY: true
});

var ordinalBarChartCities = Sintium.barChart({
    domId: "cities-by-scale-rank",
    dataSource: populationCentersSource,
    xAxis: "SCALERANK",
    xAxisLabel: "Scale rank",
    yAxisLabel: "Cities",
    margins: [20, 10, 45, 55],
    elasticY: true
});

<div id="map" style="width: 100%; height: 500px;"></div>
<div id="population-by-scale-rank" style="width: 100%; height: 180px;"></div>
<div id="cities-by-scale-rank" style="width: 100%; height: 180px;"></div>