var options1 = {
    id: "demo1",
    /* You also can use below code to bind data from file
    layers: {
        type: "Image",
        source: {
            name: "ImageVector",
            source: {
                name: 'Vector',
                url: 'https://openlayers.org/en/v3.19.1/examples/data/geojson/countries.geojson',
                format: 'GeoJSON'    
            }
        },
        data: {
            file: {
                type: 'csv',
                url: 'path/to/file'
            },
            process: function(data) {
                data = data.filter(function(d) {
                    return d.YEAR == "2011" && d.ALCOHOLTYPE == "SA_TOTAL";
                }).sort(function(a, b) { 
                    a.Numeric = a.Numeric == "" ? 0 : a.Numeric;
                    b.Numeric = b.Numeric == "" ? 0 : b.Numeric;
                    return parseFloat(a.Numeric) - parseFloat(b.Numeric); 
                });

                data.forEach(function(d, i) {
                    d['rank'] = 186 - i;
                });

                return data;
            },
            condition: function(f, d) {
                return f.getId() == d.COUNTRY;
            }
        },
        style: function(f) {
            var total = f.get('data')['Display Value'],
                fillColor = '#4a1486';
            if (total == undefined)
                fillColor = '#ccc';
            else if (total < 1)
                fillColor = '#f2f0f7';
            else if (total >= 1 && total < 3)
                fillColor = '#dadaeb';
            else if (total >= 3 && total < 5)
                fillColor = '#bcbddc';
            else if (total >= 5 && total < 7)
                fillColor = '#9e9ac8';
            else if (total >= 7 && total < 9)
                fillColor = '#807dba';
            else if (total >= 9 && total < 12)
                fillColor = '#6a51a3';
            return [new ol.style.Style({
                fill: new ol.style.Fill({
                    color: fillColor
                }),
                stroke: new ol.style.Stroke({
                    color: '#c0c0c0',
                    width: 1
                })
            })]
        }
    },
    */
    tooltip: {
        format: function(data) {return data.name + ": " + (data['Display Value'] || 0) + " liters/person a year" + "World Rank: " + (data.rank || 184) + " of 186 countries"}
    }
};

var map = new C9.Map(options1);
map.draw();

//use createLayerFromGeojson to quickly create layer from geojson file or url
//to bind data, c9 require a file or plain data, a condition function(feature, data) to bind exactly data to each feature
//you can also process data before binding by defining process function

map.createLayerFromGeojson({
    url: 'https://openlayers.org/en/v3.19.1/examples/data/geojson/countries.geojson', 
    data: {
        file: {
            type: 'csv',
            url: 'data-coded.csv'
        },
        process: function(data) {
            data = data.filter(function(d) {
                return d.YEAR == "2011" && d.ALCOHOLTYPE == "SA_TOTAL";
            }).sort(function(a, b) { 
                a.Numeric = a.Numeric == "" ? 0 : a.Numeric;
                b.Numeric = b.Numeric == "" ? 0 : b.Numeric;
                return parseFloat(a.Numeric) - parseFloat(b.Numeric); 
            });

            data.forEach(function(d, i) {
                d['rank'] = 186 - i;
            });

            return data;
        },
        condition: function(f, d) {
            return f.getId() == d.COUNTRY;
        }
    },
    style: function(f) {
        var total = f.get('data')['Display Value'],
            fillColor = '#4a1486';
        if (total == undefined)
            fillColor = '#ccc';
        else if (total < 1)
            fillColor = '#f2f0f7';
        else if (total >= 1 && total < 3)
            fillColor = '#dadaeb';
        else if (total >= 3 && total < 5)
            fillColor = '#bcbddc';
        else if (total >= 5 && total < 7)
            fillColor = '#9e9ac8';
        else if (total >= 7 && total < 9)
            fillColor = '#807dba';
        else if (total >= 9 && total < 12)
            fillColor = '#6a51a3';
        return [new ol.style.Style({
            fill: new ol.style.Fill({
                color: fillColor
            }),
            stroke: new ol.style.Stroke({
                color: '#c0c0c0',
                width: 1
            })
        })]	
}})