27:null 28:["$","title",null,{"children":"iSDAsoil: agricultural lime calculator | Jamie Collinson | Observable"}] 2d:T641,plotHref = { // create pH plot let canvas = document.getElementById("pHmap"); let soilpH = await geotiff.fromUrl("https://s3.eu-central-1.wasabisys.com/africa-soil/layers30m/sol_ph_h2o_m_30m_0..20cm_2001..2017_africa_epsg4326_v0.1.tif"); let image = await soilpH.getImage(); let bounds = [pixelFromLatLng(image, topLeft), pixelFromLatLng(image, bottomRight)]; const rasters = await image.readRasters({ window: [bounds[0][0], bounds[0][1], bounds[1][0], bounds[1][1]], }); let [data] = rasters; let { width, height } = rasters; let filteredData = data.filter(x => x != 255); let plot = new plotty.plot({ canvas: canvas, data: data, width: width, height: height, domain: [Math.min(...filteredData), Math.max(...filteredData)], noDataValue: 255, colorScale: 'viridis' }); plot.render(); yield canvas.toDataURL(); // create liming plot let canvas2 = document.getElementById("limeMap") // lime requirement calculation let limeData = data.map(x => (x==255) ? 255 : Math.max(0, 53 - x) * 2); let filteredLimeData = limeData.filter(x => x != 255); let plot2 = new plotty.plot({ canvas: canvas2, data: limeData, width: width, height: height, domain: [Math.min(...filteredLimeData), Math.max(...filteredLimeData)], noDataValue: 255, colorScale: 'viridis' }); plot2.render(); //yield canvas2.toDataURL(); // convert from 0-255 scale and from hectares to 30m^2 pixel size mutable totalLimeRequired = (900/10000) * filteredLimeData.reduce((acc, x) => acc + x, 0) / 10; }2e:Tb74,{ // Set the scene size. const WIDTH = pageWidth; const HEIGHT = WIDTH / 1.6; // Create a WebGL renderer var threeCanvas = document.getElementById("threeCanvas"); const renderer = new THREE.WebGLRenderer({ antialias: true, canvas: threeCanvas, }); renderer.setClearColor(0xd3d3d3); renderer.shadowMap.enabled = true; yield renderer; // Create scene const scene = new THREE.Scene(); // Start the renderer. renderer.setSize(WIDTH, HEIGHT); const rawTiff = await geotiff.fromUrl("https://s3.eu-central-1.wasabisys.com/africa-soil/layers30m/dtm_elevation_aw3d30.nasadem_m_30m_s0..0cm_2017_africa_proj.laea_v0.1.tif"); const tifImage = await rawTiff.getImage(); let proj4string = "+proj=laea +lat_0=5 +lon_0=20 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs"; // Swap lat/lon -> lon/lat due to difference in projection let start = proj4("EPSG:4326", proj4string, [topLeft[1], topLeft[0]]); let end = proj4("EPSG:4326", proj4string, [bottomRight[1], bottomRight[0]]); // Swap lon/lat -> lat/lon back for pixel coords let bounds = [pixelFromLatLng(tifImage, [start[1], start[0]]), pixelFromLatLng(tifImage, [end[1], end[0]])]; const rasters = await tifImage.readRasters({ window: bounds[0].concat(bounds[1]), }); let [data] = rasters; let { width, height } = rasters; // Our initial plane geometry const geometry = new THREE.PlaneGeometry( width, height, width - 1, height - 1 ); // Fill z values of the geometry let min = Math.min(...data); data.forEach((x, i) => { geometry.getAttribute('position').setZ(i, x == -32767 ? 0 : 0.1 * (x - min)); }); const texture = new THREE.TextureLoader().load(plotHref); const material = new THREE.MeshLambertMaterial({ wireframe: false, side: THREE.DoubleSide, map: texture, }); const terrain = new THREE.Mesh(geometry, material); terrain.rotation.x = -Math.PI / 2; scene.add(terrain); // setup lighting const light = new THREE.DirectionalLight(0xFFFFFF, 1); light.position.set(0, 200, 0); light.target.position.set(0, 0, 0); scene.add(light); scene.add(light.target); // Create camera const VIEW_ANGLE = 45; const ASPECT = WIDTH / HEIGHT; const NEAR = 0.1; const FAR = 10000; const camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR); camera.position.set(0, 200, 150); // Add the camera to the scene. scene.add(camera); // Add orientation grid var grid = new THREE.GridHelper(1000, 10); scene.add(grid); const axesHelper = new THREE.AxesHelper(100); //scene.add(axesHelper); // Add controls const controls = new THREE.OrbitControls(camera, renderer.domElement); controls.autoRotate = true; controls.autoRotateSpeed = 1.0; function render() { requestAnimationFrame(render); controls.update(); renderer.render(scene, camera); } render(); }2f:[] 2b:{"id":"1c48938b8a4f5da3","slug":null,"title":"iSDAsoil: agricultural lime calculator","thumbnail":"22ba5955ebafcad5e1b8725eb6d863a336d514cf595dbbe185546d69299b3428","access_level":"unlisted","create_time":"$D2021-03-27T11:03:09.956Z","update_time":"$D2021-04-08T15:01:06.838Z","view_time":null,"first_public_time":null,"has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"62500f6a71ade57f","login":"jamiecollinson","name":"Jamie Collinson","avatar_url":"https://avatars-next.observableusercontent.com/a7574ff9c4e861208e4fc560c413fb1aebbbd22c9ad14f14452939769d4674de","tier":"starter_2024"},"version":1059,"publish_version":1059,"role":null,"authored":false,"authors":[{"type":"individual","id":"391360c5bfe2f7f7","login":"jamiecollinson","name":"Jamie Collinson","avatar_url":"https://avatars-next.observableusercontent.com/a7574ff9c4e861208e4fc560c413fb1aebbbd22c9ad14f14452939769d4674de","tier":null}],"members":[{"type":"individual","id":"391360c5bfe2f7f7","login":"jamiecollinson","name":"Jamie Collinson","avatar_url":"https://avatars-next.observableusercontent.com/a7574ff9c4e861208e4fc560c413fb1aebbbd22c9ad14f14452939769d4674de","tier":null,"role":"editor"},{"type":"individual","id":"6c49e7f983a06640","login":"mattmiller","name":"Matt Miller","avatar_url":"https://avatars-next.observableusercontent.com/8d3be0ae1dd7156b4471a5add4f8f7f19bbea622d76538a228425badc327b51b","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"iSDAsoil: agricultural lime calculator","cells":[{"id":0,"value":"md`# iSDAsoil: agricultural lime calculator`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"map = {\n let container = DOM.element('div', { style: `width:${width}px;height:${width/1.6}px` });\n yield container;\n \n if (L.leafletShades != undefined) setupLeafletShades(container);\n else setTimeout(() => setupLeafletShades(container), 500);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":231,"value":"container = html`\n

pH, predicted mean at 0-20cm depth

\n ${legend({\n color: d3.scaleSequential([4.7, 5.8], d3.interpolateViridis),\n title: \"pH\",\n width: 450\n })}\n

Lime requirement

\n ${legend({\n color: d3.scaleSequential([0, 1.3], d3.interpolateViridis),\n title: \"t/Ha\",\n width: 450\n })}\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1022,"value":"html`

Total lime required: ${totalLimeRequired.toFixed(1)} tonnes

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1029,"value":"html`

View terrain

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"md`# Setup`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"mutable topLeft = [-1.7622, 29.7138]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"mutable bottomRight = [-1.7897, 29.7419]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":232,"value":"pageWidth = width // redefining to avoid namespace clash","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1013,"value":"mutable totalLimeRequired = 0","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"L = require(\"leaflet\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"leafletShades = await require(\"leaflet-shades/dist/leaflet-shades\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":227,"value":"geotiff = require(\"geotiff\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":228,"value":"plotty = require(\"plotty/dist/plotty.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":366,"value":"function setupLeafletShades(container) {\n let map = L.map(container, {\n editable: true,\n scrollWheelZoom: false,\n });\n let osmLayer = L.tileLayer(\n 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png', \n {\n attribution: '© OpenStreetMap contributors'\n }\n ).addTo(map);\n \n map.setView([-1.77595, 29.72785], 14);\n \n let rect = L.rectangle([[-1.7622, 29.7138], [-1.7897, 29.7419]]).addTo(map);\n rect.enableEdit()\n \n let shades = L.leafletShades({bounds: rect.getBounds()});\n shades.addTo(map);\n \n shades.on('shades:bounds-changed', function(event) {\n let northWest = event.bounds.getNorthWest();\n let southEast = event.bounds.getSouthEast();\n mutable topLeft = [northWest.lat, northWest.lng];\n mutable bottomRight = [southEast.lat, southEast.lng];\n })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":236,"value":"$2d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":436,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":247,"value":"function pixelFromLatLng(image, [lat, lng]) {\n // from http://geoexamples.com/d3-raster-tools-docs/intr/geotransform.html\n let GT = geoTransform(image);\n // N.B. swap lat/lng from coordinates to pixel X/Y\n let Xpixel = (lng - GT[0]) / GT[1];\n let Ypixel = (lat - GT[3]) / GT[5];\n return [Math.floor(Xpixel), Math.floor(Ypixel)];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"function geoTransform(image) {\n // equation from http://geoexamples.com/d3-raster-tools-docs/intr/reading-raster-data.html\n let tiepoint = image.getTiePoints()[0];\n let pixelScale = image.getFileDirectory().ModelPixelScale;\n return [tiepoint.x, pixelScale[0], 0, tiepoint.y, 0, -1*pixelScale[1]];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":433,"value":"THREE = {\n const THREE = window.THREE = await require(\"three/build/three.min.js\");\n await require(\"three/examples/js/controls/OrbitControls.js\").catch(() => {});\n return THREE;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":558,"value":"proj4 = require('proj4')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":991,"value":"import {legend, swatches} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":995,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2c:"$2b:body"