Merge pull request #5 from balladaniel/dev_normalization

Data normalization feature: normalizeByField, updates for Examples

Author: balladaniel

README.md

@@ -20,12 +20,13 @@ Aims to simplify data visualization and creation of elegant thematic web maps wi
 - Supports ColorBrewer2 color ramps and custom color ramps (thanks to [chroma.js](https://github.com/gka/chroma.js))
 - Various SVG shapes/symbols for Point features
 - For size/width based symbology, min and max values can be adjusted to create a telling visualization with distinguishable classes
+- Normalization by another attribute field
+- Rounding of class boundary values to *n* decimals or up/down to the nearest 10, 100, 1000 etc. numbers
 - Handling of null/nodata feature attributes
 - Legend generation with options for:
     - class order (ascending/descending)
     - legend header (title)
     - custom HTML templating of legend rows, including the display of feature counts in classes
-    - rounding of class boundary values to n decimals or up/down to the nearest 10, 100, 1000 etc. numbers
     - modifying class boundary values in legend by dividing/multiplying by a number (to easily change unit of measurement from m to km for example)
     - positioning (L.control options)
     - row gap adjustments
@@ -59,7 +60,7 @@ const layer = L.dataClassification(data, {
     // required:
     mode: 'quantile',
     classes: 4,
-    field: 'density',
+    field: 'population',
     // optional:					
     pointMode: 'size',
     pointSize: {min: 2, max: 10},
@@ -81,9 +82,10 @@ const layer = L.dataClassification(data, {
     reverseColorRamp: false,
     middlePointValue: 0,
     classRounding: 2,
+    normalizeByField: 'areakm2',
     legendTitle: 'Density (pop/km²)',
     legendPosition: 'bottomleft',
-	legendRowGap: 5,
+    legendRowGap: 5,
     legendAscending: false,	
     legendTemplate: {
         highest: '{low} and above [{count}]',
@@ -148,6 +150,7 @@ const layer = L.dataClassification(data, {
 - `reverseColorRamp <boolean>`: if true, reverses the chosen color ramp, both in symbology on map and legend colors. Useful when you found a great looking colorramp (green to red), but would prefer reversed colors to match visual implications about colors: green implies positive, red implies negative phenomena. (default: false)
 - `middlePointValue <number>`: adjust boundary value of middle classes (only when classifying into even classes). Useful for symmetric classification of diverging data around 0. Only use a value within the range of the two middle classes.    
 - `classRounding <integer>`: class boundary value rounding. When positive numbers are used for this option, class boundary values are rounded to x decimals, zero will round to whole numbers, while negative numbers will round values to the nearest 10, 100, 1000, etc. Example: with a setting of "1", a value of 254777.253 will get rounded up to 254777.3, with "0" it will be 254777, with "-2" it will become 254800. (default: null - no rounding happens, values are used as-is)
+- `normalizeByField <string>`: attribute field name to normalize values of `field` by. Useful for choropleth maps showing population density. Case-sensitive!
 - `legendTitle <string>`: legend header (usually a description of visualized data, with a unit of measurement). HTML-markdown and styling allowed. To hide header, set this as ''. (by default it inherits target attribute field name, on which the classification is based on)
 - `legendPosition <string>`: ['topleft'|'topright'|'bottomleft'|'bottomright'] legend position, L.control option. (default: 'bottomleft')
 - `legendRowGap <number>`: legend symbology row gap in pixels. You can also alter this in the attached CSS file. (default: 3)

examples/banner.png

@@ -26,7 +26,7 @@
 
 			#map {
 				position: absolute;
-				margin:  auto;
+				margin: auto;
 				top: 0;
 				bottom: 0;
 				left: 0;
@@ -131,6 +131,7 @@
 					mode: 'quantile',
 					classes: 5,
 					field: 'density',
+					polygonMode: 'color',
 					colorRamp: 'YlGnBu',
 					noDataColor: '#505050',
 					legendAscending: false,
@@ -149,56 +150,74 @@
 			// Line features example. Attribute to test with: 'length'
 			fetch('data/rivers_yukon.geojson').then(r => r.json()).then(d => {
 				function tooltip(feature, layer) {
-					layer.bindTooltip('<b>' + feature.properties.name + '</b><br>' + String(feature.properties.length)+' m');
+					layer.bindTooltip('<b>' + feature.properties.name + '</b><br>' + String(feature.properties.discharge)+' m³/s<br>'+ String(Math.round(feature.properties.discharge*35.3147))+' cuft/s');
 					layer.on('mousemove',e=>{
 						e.target.getTooltip().setLatLng(e.latlng);
 					});
+
+					// line highlighting
+					var origstyle;
+					function highlight(e) {
+						origstyle = {
+							weight: e.target.options.weight,
+							color: e.target.options.color
+						}
+						e.target.setStyle({
+							color: '#f22',
+						});
+					}
+					function resetStyle(e) {
+						e.target.setStyle(origstyle);
+					}
+					layer.on({
+						mouseover: highlight,
+						mouseout: resetStyle
+					});
+					// line highlighting end
 				}
 				window.testdata3 = L.dataClassification(d, {
 					mode: 'quantile',
 					classes: 4,
-					field: 'length',
+					field: 'discharge',
 					lineMode: 'width',
 					lineWidth: {
-						min: 3,
-						max: 10
-					},
-					classRounding: -4,
-					legendTitle: 'River length (km)',
-					unitModifier: {
-						action: 'divide',
-						by: 1000
+						min: 2,
+						max: 11
 					},
+					classRounding: -2,
+					legendTitle: 'Mean river discharge (m³/s)',
 					legendTemplate: {
 						highest: '{low} and above',
 						lowest: 'under {high}'
 					},
-    				attribution: "Rivers (10m scale): <a href='https://www.naturalearthdata.com/' target='_blank'>Natural Earth</a>",
+    				attribution: "Rivers (10m scale): <a href='https://www.naturalearthdata.com/' target='_blank'>Natural Earth</a>, Discharge data: <a href='https://www.usgs.gov/' target='_blank'>USGS</a>",
         			pane: 'front',			
 					onEachFeature: tooltip
 				}).addTo(map);
 			});
-			//testdata3.bringToFront();
 
 			map.fitBounds([[17, -150],[68, -65]]);
 
 			var infopanel = L.control({position: 'bottomright'});
 			infopanel.onAdd = function (map) {
 				var div = L.DomUtil.create('div', 'info');
 				div.innerHTML += 
-					'<div style="display: flex; flex-direction: column; max-width: 500px; text-align: center;">' +
+					'<div style="display: flex; flex-direction: column; max-width: 500px; text-align: center; row-gap: 8px">' +
 						'<div style="font-weight: bold; margin-bottom: 5px;">' + 
 							'Leaflet-dataclassification plugin demo page: "combined"' + 
 						'</div>'+ 
-						'<div style="justify-content: center; ">' +
+						'<div style="text-align: justify">' +
 							'This is an example page showcasing some of the features of Leaflet plugin <i>leaflet-dataclassification</i> for three layers simultaneously. '+
 							'Feature tooltips on hover (native feature of Leaflet) were added to provide an easy check of attribute values used. '+
 							'<br><i>Note: population density for North Dakota has been manually removed to showcase handling of Null data (nodata) in feature attributes.</i>'+
 							'<br><br>'+
+						'</div>'+ 
+						'<div>'+ 
 							'Single-step data classification, symbology and legend creation for GeoJSON data powered thematic maps.'+
 							'<br><br>'+
-							'Project page: <a href="https://github.com/balladaniel/leaflet-dataclassification">https://github.com/balladaniel/leaflet-dataclassification</a>'
+							'Project page: <a href="https://github.com/balladaniel/leaflet-dataclassification">https://github.com/balladaniel/leaflet-dataclassification</a>'+
 						'</div>'+ 
+							'<a href="https://github.com/balladaniel/leaflet-dataclassification" target="_blank"><img src="banner.png" style="max-width: 100%;"></img></a>'+
 					'</div>';
 				return div;
 			}