2e:null 2f:["$","title",null,{"children":"Rainfall in Malaysia | Jakub Hampl | Observable"}] 34:T497,md`# Rainfall in Malaysia This page shows a live feed of the rainfall data over Malaysia. Malaysia has a network of hydrological stations (currently ${combined.features.length} of them) which measure rainfall and water levels in rivers. This visualisation attempts to show a map of rainfall based on the ${rainfall_only.features.length} stations that measure rainfall. The main approach taken here is to color the map in such a way, that every point on the map is colored by the color of it's nearest rainfall station (i.e. this is a [Voronoi Diagram](https://en.wikipedia.org/wiki/Voronoi_diagram) of sorts). All rainfall data is from [Public Infobanjir](http://publicinfobanjir.water.gov.my). The colors are: - no rainfall - light - moderate - heavy - very heavy - Voronoi cells where the station is offline are not drawn at all `35:T690,{ // the map lives in a div, which I generate using the \`html\` template // literal function and yield immediately, thus giving it offsetWidth // and offsetHeight. let container = html`

Rainfall Level	${rainfall}
Level	${rainfallmsg}
Status	${rfstationstatus}
Station Name	${stationname}
District	${district}

`) .addTo(map); }); }) await Promises.delay(10); map.resize(); // Be careful to clean up the map's resources using \`map.remove()\` whenever // this cell is re-evaluated. try { yield invalidation; } finally { map.remove(); } }36:T557,{ const transform = ({rfstationstatus, rainfallmsg}) => { if (rfstationstatus == 'ON') { switch(rainfallmsg) { case 'NODATA': return 'no rainfall'; case null: return 'sensor off'; default: return rainfallmsg.toLowerCase(); } } return 'sensor off'; }; const color = darkMode ? 'white' : 'black'; const domain = ["no rainfall", "light", "moderate", "heavy", "very heavy", "sensor off"]; return vegalite({ config: { axis: { labelColor: color, titleColor: color }, legend: { labelColor: color, titleColor: color } }, data: { values: rainfall_only.features.map(({properties}) => ({result: transform(properties)})) }, mark: 'bar', width: width - 150, height: 250, encoding: { x: { field: 'result', type: 'nominal', scale: { domain }, axis: { title:'Rainfall status', labelAngle: 0 } }, y: { aggregate: 'count', field: '*', type: "quantitative", axis: {title: 'Count'} }, color: { field: 'result', type: 'nominal', scale: { domain, range: ["rgb(73, 143, 226)", "#7ED321", "#FFEF00", "#FF9B00", "#FF0012", "rgba(0,0,0,0.6)"] } } } }) } 37:T41c,vegalite({ config: { axis: { labelColor: darkMode ? 'white' : 'black', titleColor: darkMode ? 'white' : 'black' }, legend: { labelColor: darkMode ? 'white' : 'black', titleColor: darkMode ? 'white' : 'black' } }, data: {values: voronoi2.features.map(f=>f.properties)}, vconcat: [{ width: width - 50, mark: 'bar', "transform": [{"filter": {"selection": "brush"}}], encoding: { x: {bin: {base: 50, maxbins: 100}, field: 'area', type: 'quantitative', axis: {title: null} }, y: {aggregate: 'count', field: '*', type: "quantitative", axis: {title: 'Count'}} } }, { width: width - 50, height: 80, mark: 'bar', selection: { brush: {"type": "interval", "encodings": ["x"]} }, encoding: { x: {bin: {base: 50, maxbins: 100}, field: 'area', type: 'quantitative', axis: {title: 'Area (km²)'} }, y: {aggregate: 'count', field: '*', type: "quantitative", axis: {title: 'Count'}} } }] }) 38:T69c,{ // the map lives in a div, which I generate using the \`html\` template // literal function and yield immediately, thus giving it offsetWidth // and offsetHeight. let container = html`

Rainfall Level	${rainfall}
Level	${rainfallmsg}
Status	${rfstationstatus}
Station Name	${stationname}
District	${district}

`) .addTo(map); }); }); await Promises.delay(10); map.resize(); // Be careful to clean up the map's resources using \`map.remove()\` whenever // this cell is re-evaluated. try { yield invalidation; } finally { map.remove(); } }39:Tb00,{ // the map lives in a div, which I generate using the \`html\` template // literal function and yield immediately, thus giving it offsetWidth // and offsetHeight. let container = html`

`; yield container; // Create the \`map\` object with the mapboxgl.Map constructor, referencing // the container div let map = new mapboxgl.Map({ container, center: [ 112, 2 ], zoom: 5, style: darkMode ? 'mapbox://styles/mapbox/dark-v9' : 'mapbox://styles/mapbox/light-v9', scrollZoom: true }); map.on('load', () => { map.addLayer({ id: 'voronoi', type: 'fill', source: { type: 'geojson', data: voronoi1 }, paint: { "fill-color": ['get', 'color'], "fill-opacity": 0.8 } }); const data = { type: 'FeatureCollection', features: combined.features.filter(f => f.properties.stationtype !== 'RF' && f.properties.wlstationstatus === 'ON').map(f => { f.properties.circleColor = (function(level) { switch(level) { case "NORMAL": return "rgb(73, 143, 226)"; case "ALERT": return "#FFEF00" case "WARNING": return "#FF9B00" case "DANGER": return "#FF0012" default: return "rgba(0,0,0,0)"; } })(f.properties.waterlevelmsg); return f; }) }; console.log(data) map.addLayer({ id: 'riverLevel', type: 'circle', source: { type: 'geojson', data: data }, paint: { "circle-color": ['get', 'circleColor'], "circle-radius": 3, "circle-stroke-width": 1, "circle-stroke-color": "#fff" }, filter: ["==", "$type", "Point"] }); map.on('click', 'voronoi', function (e) { const {rainfall, rainfallmsg, rfstationstatus, stationname, district} = e.features[0].properties; new mapboxgl.Popup() .setLngLat(e.lngLat) .setHTML(`

Rainfall Level	${rainfall}
Level	${rainfallmsg}
Status	${rfstationstatus}
Station Name	${stationname}
District	${district}

`) .addTo(map); }); }); await Promises.delay(10); map.resize(); // Be careful to clean up the map's resources using \`map.remove()\` whenever // this cell is re-evaluated. try { yield invalidation; } finally { map.remove(); } }3a:Tb16,{ const formatLevel = (v) => { const getFontColor = (msg) => { switch (msg) { case 'LIGHT': case 'NORMAL': case 'MODERATE': case "ALERT": case 'HEAVY': case "WARNING": return 'black'; case 'VERY HEAVY': case 'DANGER': return "white"; case "NODATA": case "OFF": return 'currentColor'; } } const getColor = (msg) => { switch (msg) { case 'LIGHT': case 'NORMAL': return "#7ED321"; case 'MODERATE': case "ALERT": return "#FFEF00"; case 'HEAVY': case "WARNING": return "#FF9B00"; case 'VERY HEAVY': case 'DANGER': return "#FF0012"; case "NODATA": return 'rgba(49, 93, 107, 0.2)'; case "OFF": return 'rgba(0,0,0,0)'; } } if (v) { return `${v}`; } else { return '-'; } }; const formatDate = (v) => { var now = new Date(); var then = new Date(v); var diff = now - then; var out = ""; var years, days, hours, mins, sec; if ((years = diff / (365 * 24 * 60 * 60 * 1000)) > 1) { out += Math.round(years) + ' year' + (Math.round(years) > 1 ? 's ' : ' '); } else if ((days = diff / (24 * 60 * 60 * 1000)) > 1) { out += Math.floor(days) + 'd '; diff = diff % (24 * 60 * 60 * 1000); } else if ((hours = diff / (60 * 60 * 1000)) > 1) { out += Math.floor(hours) + 'h '; diff = diff % (60 * 60 * 1000); if (hours < 10) { if ((mins = diff / (60 * 1000)) > 1) { out += Math.floor(mins) + 'm '; diff = diff % (60 * 1000); } if (hours < 1 && (sec = diff / 1000) > 1) { out += Math.floor(sec) + 's '; } } } if (out == '') { out = `${v}`; } else { out += 'ago'; } return `${out}`; } return table(combined.features.map(({properties}) => Object.assign({}, properties, { water_level_status: properties.stationtype === 'RF' ? null : properties.wlstationstatus === "ON" ? properties.waterlevelmsg : 'OFF', rainfall_status: properties.stationtype === 'WL' ? null : properties.rfstationstatus === "ON" ? properties.rainfallmsg : 'OFF', })), {columns: [ 'stationid', 'district', {key: 'lastupdate', name: 'Updated', render: formatDate}, 'stationtype', {key: 'water_level_status', render: formatLevel}, {key: 'rainfall_status', render: formatLevel}, 'waterlevel', 'rainfall', 'last1hrf' ], limit: 1000}) }3b:T64b,voronoi1Precomputed = { let importScripts, _, turf; // this is actually ignored to escape the static analyser return greenlet(async function(rainfallOnly, malaysia, radius) { importScripts('https://cdn.jsdelivr.net/npm/lodash@4.17.5/lodash.min.js', 'https://npmcdn.com/@turf/turf/turf.min.js') const malaysiaGeojson = turf.flatten(malaysia); const activeOnly = rainfallOnly.features.filter(f => f.properties.rfstationstatus === 'ON') const voronoi = _.zip(turf.voronoi(turf.featureCollection(activeOnly)).features, activeOnly) .filter(([v, r]) => v) .map(([v, r]) => turf.feature(v.geometry, Object.assign({center: r.geometry}, r.properties))) console.log(malaysiaGeojson.features) const clippedVoronoi = voronoi.map(feature => { var intersections = malaysiaGeojson.features .map(mg => turf.intersect(mg, feature)) .filter(_.identity); if (intersections.length == 0) return null; return Object.assign( intersections.reduce((a,b) => turf.union(a,b)) , {properties: feature.properties}) }).filter(_.identity); const colors = { LIGHT: '#7ED321', MODERATE: '#FFEF00', HEAVY: '#FF9B00', 'VERY HEAVY': '#FF0012' }; const getColor = function(msg, status) { return colors[msg] || 'rgb(73, 143, 226)'; } return turf.featureCollection( clippedVoronoi.map(f => _.merge({}, f, {properties: { color: getColor(f.properties.rainfallmsg, f.properties.rfstationstatus) }}) )) })(rainfall_only, malaysia) }3c:T63c,voronoi2 = { let importScripts, _, turf; // this is actually ignored to escape the static analyser return greenlet(async function(rainfallOnly, malaysia) { importScripts('https://cdn.jsdelivr.net/npm/lodash@4.17.5/lodash.min.js', 'https://npmcdn.com/@turf/turf/turf.min.js') const malaysiaGeojson = turf.flatten(malaysia) const voronoi = _.zip(turf.voronoi(rainfallOnly).features, rainfallOnly.features) .filter(([v, r]) => v) .map(([v, r]) => turf.feature(v.geometry, r.properties)) const clippedVoronoi = voronoi.map(feature => { var intersections = malaysiaGeojson.features .map(mg => turf.intersect(mg, feature)) .filter(_.identity); if (intersections.length == 0) return null; return Object.assign( intersections.reduce((a,b) => turf.union(a,b)) , {properties: feature.properties}) }).filter(_.identity); const getColor = (msg, status) => { switch (msg) { case 'LIGHT': return "#7ED321"; case 'MODERATE': return "#FFEF00"; case 'HEAVY': return "#FF9B00"; case 'VERY HEAVY': return "#FF0012"; default: if (status === 'ON') { return 'rgb(73, 143, 226)'; //#315D6B } else { return 'rgba(0,0,0,0)'; } } } return turf.featureCollection( clippedVoronoi.map(f => _.merge({}, f, {properties: { color: getColor(f.properties.rainfallmsg, f.properties.rfstationstatus), area: turf.area(f) / 1000000 }}) )) })(rainfall_only, malaysia) }3d:[] 32:{"id":"bbc6b989ca6a2028","slug":"rainfall-prototype","title":"Rainfall in Malaysia","thumbnail":"f3dea30f6215d48c2e19679fca4d58b3d043763d7aff895e37d0be6db60a61fb","access_level":"public","create_time":"$D2018-02-02T12:58:33.396Z","update_time":"$D2019-06-06T13:41:29.198Z","view_time":null,"first_public_time":"$D2018-02-06T10:22:07.382Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"a2f700b6ce27b844","login":"gampleman","name":"Jakub Hampl","avatar_url":"https://avatars-next.observableusercontent.com/6ee048ed02abfd79e76f2f9dd7c7e8658c47b116d846f2f9ca8814ecdde18ffc","tier":"starter_2024"},"version":882,"publish_version":882,"role":null,"authored":false,"authors":[{"type":"individual","id":"34d15c3b1cc754ed","login":"gampleman","name":"Jakub Hampl","avatar_url":"https://avatars-next.observableusercontent.com/6ee048ed02abfd79e76f2f9dd7c7e8658c47b116d846f2f9ca8814ecdde18ffc","tier":null}],"members":[{"type":"individual","id":"34d15c3b1cc754ed","login":"gampleman","name":"Jakub Hampl","avatar_url":"https://avatars-next.observableusercontent.com/6ee048ed02abfd79e76f2f9dd7c7e8658c47b116d846f2f9ca8814ecdde18ffc","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"d5f9f7c6d814937d","slug":"prototypes","title":"Prototypes","owner":{"id":"a2f700b6ce27b844","login":"gampleman","name":"Jakub Hampl"}},"type":"notebook","body":{"title":"Rainfall in Malaysia","cells":[{"id":0,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":255,"value":"md`To see the status off the rainfall stations in a more quantitative way, I've shown the same data below in a traditional chart:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":230,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":288,"value":"md`## Resolution\n\nLet's figure out how much resolution this has. For comparison, Edinburgh has an area of 264km². Use the bottom histogram to zoom the top one.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":259,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":449,"value":"md`Based on this, we can attempt a slightly different visualization, where we exclude the sensors that are off (since these don't really contribute to the picture). This may grow the Voronoi cells significantly, so we cap them to a circle with the following radius:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":419,"value":"viewof radius = {\n const w = Math.min(width, 640);\n const scale = d3.scalePow().exponent(1.5).domain([1, 130]).range([1, w]);\n const fmt = scale.tickFormat(8);\n const form = html`

\n\n## Appendix\n\nSome stuff needed to render this. Perhaps the most notable here is that many of the computations run in a separate thread to keep the UI of the notebook responsive. I wonder if this is something that could be built in?\n\n### Data\n\nFirst let's fetch all the data that we need for this:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"viewof combined = (timer, fetchGeoJSON('https://data.easos.my/geoserver/easos-flooding/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=easos-flooding:rainfall_latest&outputFormat=application%2Fjson'))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":684,"value":"md`This is the map that we use for clipping, as you can see it is not a very detailed shape, so this introduces plenty of the artifacts visible:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":392,"value":"viewof malaysia = fetchGeoJSON('https://gist.githubusercontent.com/gampleman/0903af7279c6c60e6d5c85ca33361960/raw/b21a86ceb808307208970b24045cfe9bc9a6f744/malaysia.geojson')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":693,"value":"md`For some futher analysis of the quality of the dataset, here it is in a convenient tabular format:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":617,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"rainfall_only = ({type: 'FeatureCollection', features: combined.features.filter(({properties}) => properties.stationtype !== 'WL')})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":575,"value":"md`Finally let's compute this altoghether into the actual shapes we want (this part runs in a bunch of webworkers)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":414,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":472,"value":"voronoi1 = {\n let importScripts,turf; // this is actually ignored to escape the static analyser\n \n return greenlet(async function(voronoi1Precomputed, radius) {\n \n importScripts('https://npmcdn.com/@turf/turf/turf.min.js')\n\n\t\n return turf.featureCollection(\n voronoi1Precomputed.features.map(feature => \n \tObject.assign(\n \t\tturf.intersect(feature ,turf.circle(feature.properties.center, radius)) || {},\n \t\t{properties: feature.properties}\n \t\t)\n ).filter(f => f.geometry)\n .map(f => Object.assign(f, {properties: Object.assign(f.properties, {area: turf.area(f) / 1000000})}))\n )\n \n})(voronoi1Precomputed, radius)\n} ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":316,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":588,"value":"md`### Dependencies\n\nHere we include all the stuff needed to run this notebook.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"mapboxgl = {\n let mapboxgl = await require('mapbox-gl@0.51.0');\n mapboxgl.accessToken = 'pk.eyJ1IjoiZ2FtcGxlbWFuIiwiYSI6ImNpaDZieDFkMjBhNGp1amx4bXJyc3p3YTIifQ.UGhclQinv28O-CJDScQe_w';\n return mapboxgl;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"html`

Some CSS included here

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":553,"value":"timer ={ \n yield;\n while (true) {\n yield Promises.delay(15 * 60 * 1000);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"vegalite = require(\"@observablehq/vega-lite@0.1\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":313,"value":"greenlet = import('https://unpkg.com/greenlet@0.1.2/dist/greenlet.m.js?module').then(m=> m.default)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":735,"value":"darkMode = document.body.classList.contains(\"observablehq--dark\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":798,"value":"d3 = require('d3-scale')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":395,"value":"import { fetchJSON, fetchGeoJSON } from '@gampleman/fetch-geojson'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":506,"value":"import {checkbox} from '@nitaku/checkbox'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":550,"value":"import { table } from \"@gampleman/table\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3d","stdlib":"1","titling":"auto"}} 33:"$32:body"