123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120 |
- <!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>
|