// Set up datasource for heatmap (ocean temperatures)
var heatMapSource = Sintium.dataSource({
    source: "https://sintium.no/data.csv",
    csvHasHeader: true,
    useCrossfilter: true
});

// Create heatmap from datasource
var heatMapLayer = Sintium.gridHeatmapLayer({
    layerId: "Ocean Temperature",
    dataSource: heatMapSource,
    latProperty: 'latitude',
    lonProperty: 'longitude',
    valueProperty: 'temperature',
    info: 'Heat map layer showing temperature',
    range: [-3, 20]
});

// Set up a light and dark base map
var baseLayer = Sintium.baseLayer({
    layerId: "World Map Light",
    layer: Sintium.getDefaultLightTileLayer(),
    darkLayer: Sintium.getDefaultDarkTileLayer()
});

// Set up a layerswitcher to change between the light and dark base maps
var layerSwitcher = Sintium.sidebarLayerSwitcher({
    position: "left"
});

// Set up the map with layers and extensions
var map = Sintium.map({
    domId: "map",
    layers: [baseLayer, heatMapLayer],
    use: [layerSwitcher]
});

// Set up bar chart for selecting temperature range
var barChart = Sintium.barChart({
    domId: "bar-chart",
    dataSource: heatMapSource,
    height: 100,
    xAxis: "temperature",
    xRange: [-2.0, 20.0],
    showYAxis: false,
    brushOn: true
});

<div id="map" style="width: 100%; height: 500px;"></div>
<div id="bar-chart" style="width: 100%; height: 150px;"></div>