Visualizing your Geospatial Graph Data – Part 1

A couple of month’s ago, we launched KeyLines 2.7.1. Behind the inconspicuous name was one of our most anticipated pieces of functionality yet – KeyLines Geospatial.

For some time, our customers had been requesting a way to understand geographic trends in their graph data.

Our existing automated layouts – although highly effective at uncovering trends in connected data – struggled to convey geolocational patterns.

KeyLines Geospatial – currently in Alpha release, and due for Beta release next month – is a stylish, simple yet effective way to visualize both the locational, and the connective, aspects of geospatial graph data.

Instead of positioning nodes in a layout by their X and Y properties, they can be positioned on top of a map by their latitude and longitude, complete with links.

It works just like any other map, with pan and zoom. Users can also transition from Map View to Network View with the click of a button, and incorporate other KeyLines functionality like Time Bar or Filters:

KeyLines Geospatial is possible thanks to the integration of Leaflet – a popular open source JavaScript library for mapping.

Adding Geospatial to your app

Adding support for maps in your existing applications is easy.

All you need is to include the Leaflet javascript library (available via the Download page in the SDK) on your webpage and provide the longitude and latitude positions for each node, e.g.

var chart = {
 type: 'LinkChart',
 items: [
   {
     id: 'node1', t: 'label', type: 'node', u: 'person.png', x: 100, y: 150,
     pos: {
       lat: 52.2022,    // Must be in range -90 to 90
       lng: 0.1282      // Must be in range -180 to 180
     }
   }
 ]
};

Now you can easily switch between the existing graph layout and the map.

Customizing the map

One of the big attractions of Leaflet is its ability to display map tiles from any 3rd party collection. These tiles are what gives the map its look, it can range anywhere from a simple overview of countries, towns and cities to satellite imagery.

By default it is already setup to provide all the functionality you need but if you want to customise it, all you have to do is pass in the new map style settings into KeyLines and it will do the rest.

Heres an example of how to use tiles from OpenTopoMap.org:

chart.map().options({
     tiles:{
          url:'http://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', 
	  maxZoom: 16,
	  attribution: 'Map data: © 
	       <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, 
	       <a href="http://viewfinderpanoramas.org">SRTM</a> | Map style: © 
	       <a href="https://opentopomap.org">OpenTopoMap</a> 
	       (<a   href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)'
     }
});

It’s that simple!

Try it yourself

Are you intrigued to find the patterns in your graph data?

You can register for a free trial, or get in touch for a personalized demo of the KeyLines network visualization toolkit,

The post Visualizing your Geospatial Graph Data – Part 1 appeared first on .