leaflet-network

leaflet-network

ALPHA leaflet plugin to visualise (weighted) network connectivity between spatial data points. It uses d3.js v4 to visualise the network connections on a L.SVG layer.

There is an interactive notebook example here: https://beta.observablehq.com/@danwild/network-connectivity-template

Node connectivity weights can be represented:

• GLOBAL: node connection weights are scaled against all other connections in the matrix (only SOURCE / downstream displayMode supported).
• LOCAL: node connection weights are scaled to only the connections of the selected target.
• NONE: connection weights are ignored, simplified display.

This plugin only supports Leaflet ^v1.0.0.

install, build

• install: npm install leaflet-network
• build: gulp

usage

Init plugin with map and data (see gh-pages branch for full demo):

// create a basemap
var canvas = L.tileLayer('http://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png', {
	attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; <a href="http://cartodb.com/attributions">CartoDB</a>',
	subdomains: 'abcd',
	maxZoom: 19
});

// setup our leaflet map
var map = L.map('map', {
	layers: [ canvas ],
	center: L.latLng(-25, 134),
	zoom: 5
});

// create a layer control so we can show/hide network layer
var layerControl = L.control.layers();
layerControl.addTo(map);

// init the network layer
var networkLayer = L.networkLayer({

	// optional pane to add the layer, defaults to 'overlayPane'
	// note that the elem must be tagged with a unique id
	pane: {
		name: 'myPane', // the leaflet pane name
		elem: '<HTMLElement>'
	},

	// see expected data format below
	data: data,

	// One of:
	// - SOURCE: visualise connections that are downstream from the target node
	// - SINK:   visualise connections that are upstream from the target node
	// - ANY:    visualise any connections related to the target node (useful if not concerned with SOURCE/SINKs)
	// - BOTH:   visualise connections that are upstream or downstream from the target node, differs to ANY as it
	//   keeps SOURCE/SINK weightings separate, whereas ANY is a simple merge
	displayMode: 'SOURCE',

	// domain is the min/max boundaries of values that will be used to fit data to the range scale, defaults to auto
	// fit data (min, max-10%), often needs tweaking (depends on shape of your data)
	// if this terminology is confusing you, see:
	// https://javascript.tutorialhorizon.com/2015/01/17/d3-fundamentals-understanding-domain-range-and-scales-in-d3js/
	globalScaleDomain: [0, 100],

	// If provided, any data (weights) outside of the clipRange will be ignored
	clipRange: [25, 75],

	// How the connection weights should be scaled
	// One of: ['GLOBAL', 'LOCAL', 'NONE']
	weightMode: 'GLOBAL',

	// the color scale to use to represent connection strengths
	// note that when used with displayMode=BOTH, SOURCE/SINK connections will be
	// displayed on independent scales (to unify scales, use displayMode=ANY).
	colorScale: ["green", "yellow", "red"],

	// color for connections when not scaled colors
	// i.e. weightMode='NONE'
	sourceColor: 'red',
	sinkColor: 'green',
	allColor: 'blue',

	// styling options for node circles
	nodeFillColor: 'red',
	nodeRadius: 5,
	nodeOpacity: 0.5,

	// styling for connection lines
	lineInactiveColor: 'grey',
	lineOpacity: 0.8,
	lineWidth: 2,
	lineWidthActive: 2,
	lineDashStyle: ("20, 3") // e.g. draw 20, dash 3. default null.

	// whether to use arrows to show line direction,
	// arrows derive their width and opacity from line
	arrows: true,

	arrowSpacing: 100, // pixel distance to space arrowheads (there will be at least always one)

	// if set to false, lines will only be shown for active connections
    // (not valid for weightMode: GLOBAL)
    displayInactive: true, // default: true

	// callback function for click event on node, receives target node
	onClickNode: function(node){
	  // e.g. add clear selection button
	},

	// callback function for mouseenter event on node, receives target node
	onMouseEnterNode: function(node){
	  // e.g. set a tooltip
	},

	// callback function for mouseleave event on node, receives target node
	onMouseLeaveNode: function(node){
	  // e.g. remove a tooltip
	}

	// callback function for mouseenter event on line, receives dom elem
	// which has some data attributes, e.g. weight, lat, long
	onMouseEnterLine: function(elem){
	  // e.g. display elem.dataset.weight

	},

	// callback function for mouseleave event on line, receives dom elem
	// which has some data attributes, e.g. weight, lat, long
	onMouseLeaveLine: function(elem){
	  // e.g. hide weight
	}

});

// add layer as an overlay
layerControl.addOverlay(networkLayer, 'Network Example');

public methods

method	params	description
update		trigger a redraw of all elements using current target
setData	data: {Object}	update the layer with new data
setOptions	options: {Object}	update the layer with new options
setTarget	id: {String}	Set the active target node by id
getTargetId		Get ID of the active target node
setDisplayMode	mode: {String}	one of: SOURCE, SINK, ANY, BOTH
getPointById	id: {String}	Get a node by id
isActive		Check if layer is active on the map
getLatLngBounds		Returns leaflet LatLngBounds of the layer
getConnectionsDomain	clipped: {Boolean}, Optional: data: {Object}	Get the domain (min/max) of values in the data array (defaults to current)

data format

var data = [
  {
    "properties": {
      "lat": "",
      "lon": "",
      "id": "uid1"
    },
    "connections": {
      "uid1": 233,    // connection score to self, ignored
      "uid2": 0,      // null connection, could be omited
      "uid2": 37      // defines a connection score of 37 with point uid2
    }
  },
  {...}
]

shout outs

• Mike Bostock for d3.js
• d3noob for d3/leaflet/svg demo