manual/examples/gpw-data-viewer.html

<!doctype html>
<html>
<meta charset="utf-8">
<head>
<title>gpw data viewer</title>
<style>
canvas {
  max-width: calc(100% - 16px);
}
</style>
</head>
<body>
<canvas></canvas>
</body>
<script type="module">

async function loadFile( url ) {

	const req = await fetch( url );
	return req.text();

}

function parseData( text ) {

	const data = [];
	const settings = { data };
	let max;
	let min;
	// split into lines
	text.split( '\n' ).forEach( ( line ) => {

		// split the line by whitespace
		const parts = line.trim().split( /\s+/ );
		if ( parts.length === 2 ) {

			// only 2 parts, must be a key/value pair
			settings[ parts[ 0 ] ] = parseFloat( parts[ 1 ] );

		} else if ( parts.length > 2 ) {

			// more than 2 parts, must be data
			const values = parts.map( ( v ) => {

				const value = parseFloat( v );
				if ( value === settings.NODATA_value ) {

					return undefined;

				}

				max = Math.max( max === undefined ? value : max, value );
				min = Math.min( min === undefined ? value : min, value );
				return value;

			} );
			data.push( values );

		}

	} );
	return Object.assign( settings, { min, max } );

}

function drawData( file ) {

	const { min, max, ncols, nrows, data } = file;
	const range = max - min;
	const ctx = document.querySelector( 'canvas' ).getContext( '2d' );
	// make the canvas the same size as the data
	ctx.canvas.width = ncols;
	ctx.canvas.height = nrows;
	// but display it double size so it's not too small
	ctx.canvas.style.width = px( ncols * 2 );
	// fill the canvas to dark gray
	ctx.fillStyle = '#444';
	ctx.fillRect( 0, 0, ctx.canvas.width, ctx.canvas.height );
	// draw each data point
	data.forEach( ( row, latNdx ) => {

		row.forEach( ( value, lonNdx ) => {

			if ( value === undefined ) {

				return;

			}

			const amount = ( value - min ) / range;
			const hue = 1;
			const saturation = 1;
			const lightness = amount;
			ctx.fillStyle = hsl( hue, saturation, lightness );
			ctx.fillRect( lonNdx, latNdx, 1, 1 );

		} );

	} );

}

function px( v ) {

	return `${v | 0}px`;

}

function hsl( h, s, l ) {

	return `hsl(${h * 360 | 0},${s * 100 | 0}%,${l * 100 | 0}%)`;

}

loadFile( 'resources/data/gpw/gpw_v4_basic_demographic_characteristics_rev10_a000_014mt_2010_cntm_1_deg.asc' )
	.then( parseData )
	.then( drawData );

</script>
</html>