// Data

    var fishSource = Sintium.dataSource({
        url: "https://sintium.no/data_2018.csv",
        useThread: true,
        csvHasHeader: true,
        useCrossfilter: true,
        dateFormat: "dd.MM.yyyy"
    });

    var windDataSource = Sintium.dataSource({
        url: "https://sintium.no/wind.csv",
        csvHasHeader: true,
        useCrossfilter: true
    });

    // Charts

    var pieChart = Sintium.pieChart({
        domId: 'pie-chart',
        dataSource: fishSource,
        keyColumn: "Fartøytype",
        legend: true,
        labels: false,
        colorScheme: Sintium.colorScheme.HIGHCHART_DEFAULTS
    });

    var sunburst = Sintium.sunburstChart({
        domId: 'sunburst',
        dataSource: fishSource,
        keyColumns: ["ArtGruppe", "Art"]
    });

    var rowChart = Sintium.rowChart({
        domId: 'rows',
        dataSource: fishSource,
        keyColumn: "Landingsfylke",
        elasticX: true,
        colorScheme: Sintium.colorScheme.SPECTRAL
    });

    var windRose = Sintium.windRose({
        domId: "wind-rose",
        dataSource: windDataSource,
        margins: [0, 30, 0, 0],
        buckets: [0,3,6,9,12,15,Infinity],
        directionColumn: "WindDirection",
        valueColumn: "WindSpeed",
        latColumn: "Latitude",
        lonColumn: "Longitude"
    });

    // Grid

    var grid = Sintium.widgetGrid({
        domId: "widget-grid"
    });

    grid.addWidget(pieChart, {
        width: 6,
        height: 4
    });

    grid.addWidget(sunburst, {
        x: 6,
        width: 6,
        height: 4
    });

    grid.addWidget(rowChart, {
        y: 4,
        width: 12,
        height: 4
    });
    
    grid.addWidget(windRose, {
        y: 14,
        width: 6,
        height: 6
    });

    <div id="wind-rose"></div>
    <div id="widget-grid" style="width: 100%; height: 1150px;"></div>
    <div id="pie-chart"></div>
    <div id="sunburst"></div>
    <div id="rows"></div>
    <div id="data-table"></div>