2c:null 2d:["$","title",null,{"children":"Topographic scales | Michael Bricknell | Observable"}] 32:T47b,viewof colorRamp = { const width = 600; const height = 40; const marginLeft = 10; const marginRight = 25; const svg = d3 .create("svg") .attr("width", width + marginLeft + marginRight) .attr("height", height + 40); const minElev = min < 0 ? d3.min(filteredBathyDomain) : 0; const maxElev = d3.max(filteredLandDomain); const xScale = d3.scaleLinear().domain([minElev, maxElev]).range([0, width]); // Draw discrete bands for each color const allBreaks = [ minElev, ...tickValues.filter((v) => v > minElev && v < maxElev), maxElev ]; allBreaks.forEach((breakPoint, i) => { if (i < allBreaks.length - 1) { const color = breakPoint < 0 ? bathyScale(breakPoint) : landScale(breakPoint); svg .append("rect") .attr("x", marginLeft + xScale(breakPoint)) .attr("width", xScale(allBreaks[i + 1]) - xScale(breakPoint)) .attr("height", height) .attr("fill", color); } }); svg .append("g") .attr("transform", `translate(${marginLeft},${height})`) .call(d3.axisBottom(xScale).tickValues(tickValues)); return svg.node(); }33:T585,colorRampVertical = { const width = 20; const height = 400; const marginTop = 10; const marginBottom = 10; const marginLeft = 10; const svg = d3 .create("svg") .attr("width", width + 60 + marginLeft) .attr("height", height + marginTop + marginBottom); svg .append("rect") .attr("width", width + 60 + marginLeft) .attr("height", height + marginTop + marginBottom) .attr("fill", "white"); const minElev = min < 0 ? d3.min(filteredBathyDomain) : 0; const maxElev = d3.max(filteredLandDomain); const yScale = d3.scaleLinear().domain([minElev, maxElev]).range([height, 0]); const allBreaks = [ minElev, ...tickValues.filter((v) => v > minElev && v < maxElev), maxElev ]; allBreaks.forEach((breakPoint, i) => { if (i < allBreaks.length - 1) { const color = breakPoint < 0 ? bathyScale(breakPoint) : landScale(breakPoint); svg .append("rect") .attr("x", marginLeft) .attr("y", marginTop + yScale(allBreaks[i + 1])) .attr("width", width) .attr("height", yScale(breakPoint) - yScale(allBreaks[i + 1])) .attr("fill", color); } }); svg .append("g") .attr("transform", `translate(${width + marginLeft}, ${marginTop})`) .call( d3 .axisRight(yScale) .tickValues(tickValues.filter((v) => v >= minElev && v <= maxElev)) ); return svg.node(); }34:T5c6,colorRampText = { const ramp = ["nv 0 0 0 0"]; if (min < 0) { // Anchor at actual minimum const firstBathyColor = d3.rgb(filteredBathyColors[0]); ramp.push( `${Math.round(min)} ${Math.round(firstBathyColor.r)} ${Math.round( firstBathyColor.g )} ${Math.round(firstBathyColor.b)} 255` ); filteredBathyDomain.forEach((elev, i) => { const color = d3.rgb(filteredBathyColors[i]); ramp.push( `${Math.round(elev)} ${Math.round(color.r)} ${Math.round( color.g )} ${Math.round(color.b)} 255` ); }); const lastBathyColor = d3.rgb( filteredBathyColors[filteredBathyColors.length - 1] ); ramp.push( `0 ${Math.round(lastBathyColor.r)} ${Math.round( lastBathyColor.g )} ${Math.round(lastBathyColor.b)} 255` ); } ramp.push( `0.5 ${d3.rgb(landColors[0]).r} ${d3.rgb(landColors[0]).g} ${ d3.rgb(landColors[0]).b } 255` ); filteredLandDomain.forEach((elev, i) => { const color = d3.rgb(filteredLandColors[i + 1]); ramp.push( `${Math.round(elev)} ${Math.round(color.r)} ${Math.round( color.g )} ${Math.round(color.b)} 255` ); }); const lastLandColor = d3.rgb( filteredLandColors[filteredLandColors.length - 1] ); ramp.push( `${Math.round(max)} ${Math.round(lastLandColor.r)} ${Math.round( lastLandColor.g )} ${Math.round(lastLandColor.b)} 255` ); return ramp.join("\n"); }35:[] 30:{"id":"563343a5e7646c26","slug":null,"title":"Topographic scales","thumbnail":"478c38d3dc0a60896c0b23e096a10afe956d4bc532513c0852b2c696e997c3dd","access_level":"public","create_time":"$D2026-05-26T12:55:15.624Z","update_time":"$D2026-05-26T13:45:56.716Z","view_time":null,"first_public_time":"$D2026-05-26T12:55:15.624Z","has_unpublished_edits":null,"fork":{"id":"56e1a474c826a2c3","slug":"iran","title":"Mapa - Iran Topographic","owner":{"id":"aa36944c9e64c088","login":"mbrickmaps","name":"Michael Bricknell"}},"stars":0,"starred":false,"owner":{"type":"team","id":"aa36944c9e64c088","login":"mbrickmaps","name":"Michael Bricknell","avatar_url":"https://avatars-next.observableusercontent.com/2f0578a8eeb34ee1c8a3bd6be41477c4bc13989c0c53551154178a64c9f2945f","tier":"pro_2024"},"version":1692,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"8a8aec8a4dd1da2d","login":"mbrickmaps","name":"Michael Bricknell","avatar_url":"https://avatars-next.observableusercontent.com/669d4a33f00b7dbf619507bedb374f580b5457ee3c0717ba47d37e4869518958","tier":null}],"members":[{"type":"individual","id":"8a8aec8a4dd1da2d","login":"mbrickmaps","name":"Michael Bricknell","avatar_url":"https://avatars-next.observableusercontent.com/669d4a33f00b7dbf619507bedb374f580b5457ee3c0717ba47d37e4869518958","tier":null,"role":"editor"},{"type":"team","id":"aa36944c9e64c088","login":"mbrickmaps","name":"Michael Bricknell","avatar_url":"https://avatars-next.observableusercontent.com/2f0578a8eeb34ee1c8a3bd6be41477c4bc13989c0c53551154178a64c9f2945f","tier":"pro_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Topographic scales","cells":[{"id":0,"value":"# Topographic scales","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1688,"value":"https://en.wikipedia.org/wiki/Altitudinal_zonation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":544,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":594,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":550,"value":"min = -10931","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":552,"value":"max = 8627","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":596,"value":"tickValues = [\n ...new Set([min, ...filteredBathyDomain, 0, ...filteredLandDomain, max])\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":566,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":548,"value":"bathyScale = d3\n .scaleThreshold()\n .domain(filteredBathyDomain)\n .range(filteredBathyColors)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":546,"value":"landScale = d3\n .scaleThreshold()\n .domain(filteredLandDomain)\n .range(filteredLandColors)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1630,"value":"bathyColors = [\n \"#081c3b\",\n \"#12305a\",\n \"#1c4477\",\n \"#30629f\",\n \"#4e80bd\",\n \"#6c9edb\",\n \"#8abcef\",\n \"#a8d0ff\"\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":561,"value":"landColors = [\n \"#78ab4d\",\n \"#c9c864\",\n \"#e8d77d\",\n \"#ba9b50\",\n \"#a17743\",\n \"#825d33\",\n \"#8c643c\",\n \"#a07850\",\n \"#b4966e\",\n \"#c8b496\",\n \"#ffffff\"\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":610,"value":"numBreaksBathy = bathyColors.length","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":612,"value":"numBreaksLand = landColors.length","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":651,"value":"bathyDomain = [-9000, -7000, -5000, -3000, -1000, -200, -50]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":653,"value":"landDomain = [\n 200, 500, 800, 1200, 1600, 1800, 2000, 2200, 2500, 3500, 5000, 7000\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":665,"value":"filteredBathyDomain = bathyDomain.filter(d => d >= min);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":667,"value":"filteredLandDomain = landDomain.filter((d) => d <= max)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":669,"value":"filteredBathyColors = bathyColors.slice(bathyColors.length - filteredBathyDomain.length - 1);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":671,"value":"filteredLandColors = landColors.slice(0, filteredLandDomain.length + 1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 31:"$30:body"