SINTIUM

Sintium is a high-performance coordinated view framework which allows for dimensional charting built to work natively with with OpenLayers In SINTIUM a given chart displays an aggregation of some attributes through the position, size, and color of its elements, and also presents a dimension which can be filtered. When the filter or brush changes, all other charts are updated dynamically, using animated transitions. The framework allows for quick memory efficient client-side bisection to allow quick map-reduce functionality and utilizes D3 for some chart rendering.

Installation

There are multiple ways to add SINTIUM to your projec; the simplest easiest method is to include the minified library into your html file and work from there:

    <script src="sintium.js"></script>

You can also fetch it from OpenCDN here:

NOT IMPLEMENTED

Finally if you have access to the complete source-code you can simply do:

    webpack build

For the complete library please see the build instructions for more detailed instructions on how to build, step-build and use it as a ts, es6 or js library. The output from webpack will by default be placed in /dist/ folder, however this is configurable.

Examples

The following examples demonstrate how Sintium can be used to build applications for data visualizations, we'll start by showing how to build a complete application before delving into smaller parts showing how to build SINTIUM applications from scratch. SINTIUM is divided into three parts the Chart code for graphs, the map code for map-applications and the data-mediator for dispatching, filtering and bisecting data.

Complete application

var toolUrl = "https://www.barentswatch.no/api/v1/geodata/download/fishingfacility/?format=JSON";
var toolSource = Sintium.dataSource(toolUrl).build();

var toolLayer = Sintium.vectorLayer("Tools")
   .dataSource(toolSource)
   .clusterByProperty("tooltypename")
   .styleFunction(Sintium.generateBasicStyles("red", "blue"))
   .build();

var baseLayer = Sintium.baseLayer("World map")
   .tileLayer(Sintium.getDefaultLightTileLayer())
   .build();

var map = Sintium.map("map-dom-id")
   .layer(baseLayer)
   .layer(toolLayer)
   .build();

var pieChart = Sintium.pieChart("pie-chart-dom-id")
   .dataSource(toolSource)
   .keyColumn("tooltypename")
   .build();

Data sources

The basic building-block in SINTIUM is a data-source, which is a coordinated container which handles all data dispatchment, mediation etc within the framework. It allows data from various souces to auto-magically work in SINTIUM; the following formats are supported:

• CSV
• GeoJSON
• JSON
• NetCDF
• GRIB
• Text

The data sources can be local files, remote API calls, or streams, basically whatever javascript supports.

Instantiating basic data source

var toolUrl = "https://www.barentswatch.no/api/v1/geodata/download/fishingfacility/?format=JSON";
var toolSource = Sintium.dataSource(toolUrl).build();

Instantiating data source requiring authentication The datasources can utilize various authoentication schemes to communicate with APIs that require authentication without having to excplicitly handle the callbacks

var barentswatchAuthenticator = Sintium.OAuthAuthenticator();
var vesselUrl = "https://www.barentswatch.no/api/v1/geodata/ais/positions?xmin=20&ymin=65&xmax=30&ymax=75";

var vesselSource = Sintium.dataSource(vesselUrl)
   .authorization(barentswatchAuthenticator)
   .build();

Dynamic data Sintium allows for dynamic data insertion through either pubsub systems (signalR, mqtt, etc), api streams or simply js functions to keep populating the datasources with new data in real-time fasion

var generatedSource = Sintium.dataSource()
   .labels(['lon', 'lat', 'randomNumber'])
   .build();

var numberOfFeatures = 100;
var data = [];   
for (var i = 0; i < numberOfFeatures; i++) {
   var randNumber = Math.floor(Math.random() * 200);
   data.push([
      getRandomInRange(-180, 180, 3),
      getRandomInRange(-90, 90, 3),
      randNumber
   ]);
}
generatedSource.setData(data);   

Map applications

SINTIUM utilizes the open-source map library OpenLayers to build map-applications and display data. SINTIUM does build custom layers with custom rendering on top in order to provide better performance than base OpenLayers

Instantiating a basic map In this example a basic map is instantiated on a given HTML dom id.

var map = Sintium.map("map-dom-id")
   .layer(toolLayer)
   .zoomOnClusterClick(true)
   .build();

Instantiating basic vector layer

var toolLayer = Sintium.vectorLayer("Tools")
   .dataSource(toolSource)
   .styleFunction(Sintium.generateBasicStyles("red", "blue"))
   .build();

Instantiating a base layer with night mode support Sintium comes with night mode support, and base layers added to a map can be supplied a tile layer for when night mode is activated.

var baseLayerWithNightMode = Sintium.baseLayer("World map")
   .tileLayer(Sintium.getDefaultLightTileLayer())
   .nightTileLayer(Sintium.getDefaultDarkTileLayer())
   .build();

Instantiating layer with simple clustering In this example, data is added to a map layer which clusters its features in the maps it is added to.

var clusteredToolLayer = sintium.vectorLayer("Tools")
   .dataSource(toolSource)
   .clustered(true)
   .styleFunction(Sintium.generateTriangleClusterStyle(15, "red", "blue"))
   .build();

Instantiating layer and cluster by property In this example, data is added to a map layer which clusters its features on a given feature property in the maps it is added to. Here the layer will cluster on tool type, so only features of the same tool type will be clustered together.

var clusteredToolLayer = Sintium.vectorLayer("Tools")
   .dataSource(toolSource)
   .clustered(true)
   .styleFunction(Sintium.generateTriangleClusterStyle(15, "red", "blue"))
   .build();

Instantiating layer with selection This example shows how selection can be added to layers. Here 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 (for example charts) are updated to reflect this selection. In addition, when clicking a single non-cluster feature we want to show a information module with all feature property values.

var styleFunction = Sintium
   .generateTriangleClusterStyle(15, "red", "blue");

var selectedStyleFunction = Sintium
   .generateTriangleClusterStyle(15, "black", "white")

var selectableToolLayer = Sintium.vectorLayer("Tools")
   .dataSource(toolSource)
   .clustered(true)
   .styleFunction(styleFunction)
   .selectedStyleFunction(selectedStyleFunction)
   .selection(["dragbox.ctrlClick", "cluster.click"], function(event) {
       event.filter();
   })
   .selection(["single.click"], function(event) {
       event.showFeatureInformationModal();
   })
   .build();

Charts

SINTIUM like map applications provide multiple builder interfaces to add charts to your applicaiton. Please see the wiki for a complete list of all available chart types. We will just provide a few example here as most of them are built in the same manner, as d3 charts. Sintium provides extra functionality for instance such as using canvas rendering.

Instantiating a bar chart In this example a bar chart is instantiated on a given HTML dom id.

var barChart = Sintium.barChart("bar-chart-dom-id")
   .dataSource(toolSource)
   .xAxis("setupdatetime")
   .xUnits("days")
   .useCanvas(false)
   .range([new Date(2018, 0, 1), new Date(2018, 12, 6)])
   .brushOn(true)
   .build();

Instantiating a scatter chart In this example a scatter chart is instantiated on a given HTML dom id.

var scatterPlot = Sintium.scatterPlot("scatter-plot-dom-id")
   .dataSource(generateSource)
   .xAxis("lon")
   .yAxis("lat")
   .useCanvas(true)
   .xRange([-180, 180])
   .yRange([-90, 90])
   .brushOn(true)
   .build();

Extensions

Sintium objects can be extended with additional functionality, and Sintium ships with several useful extensions. In this example a layer switcher extension is added to the map. The layer switcher appears as a slide out sidebar menu in the map, and allows users to toggle visibility of layers or groups of layers, as well as toggle layer options.

var layerSwitcher = Sintium.sidebarLayerSwitcher()
   .position("left")
   .build();

var map = Sintium.map("map-dom-id")
   .groupLayers("Tools and vessels", [toolLayer, vesselLayer])
   .layer(generatedLayer)
   .use(layerSwitcher)
   .build();