2b:null 2c:["$","title",null,{"children":"How to make a nice scale bar | jgaffuri | Observable"}] 31:T7c8,{ const y = 40; const xMargin = 20; const height = 100; //the container rectangle, in gray const svg = d3 .create("svg") .attr("width", maxLengthPix + 2 * xMargin) .attr("height", height) .style("background-color", "#eee"); const sbStrokeWidth = 2; const sbWidth = 15; //main scale bar line const scaleBar = svg .append("rect") .attr("x", xMargin) .attr("y", y) .attr("width", niceLengthPixel) .attr("height", sbWidth) .style("fill", "white") .style("stroke", "black") .style("stroke-width", sbStrokeWidth); //first tick text const tickStrokeWidth = 3; svg .append("text") .attr("x", xMargin) .attr("y", y - 7) .text(getLabel(0, false)); //division if (divisionNumber > 1) { const divisionWidth = niceLengthPixel / divisionNumber; //division rectangles for (let i = 0; i < divisionNumber; i++) { const isOdd = i % 2; svg .append("rect") .attr("x", xMargin + i * divisionWidth) .attr("y", y + (isOdd ? sbWidth / 2 : 0)) .attr("width", divisionWidth) .attr("height", sbWidth / 2) .style("fill", "black") .style("stroke", "none"); } //tick texts for (let i = 1; i < divisionNumber; i++) { svg .append("text") .attr("x", xMargin + i * divisionWidth) .attr("y", y - 7) .text(getLabel((niceLengthM[0] / divisionNumber) * i, false)) .style("text-anchor", "middle"); } } else { //no division scaleBar.style("fill", "black"); } //last tick text svg .append("text") .attr("x", niceLengthPixel + xMargin) .attr("y", y - 7) .text(getLabel(niceLengthM[0], true)) .style("text-anchor", "end"); //scale text, below the bar svg .append("text") .attr("x", niceLengthPixel / 2 + xMargin) .attr("y", y + 40) .text("Scale: 1:" + scale.toLocaleString()) .style("text-anchor", "middle"); return svg.node(); }32:T451,divisionNumber = { //the scale bar is already too small to be divided if (niceLengthPixel < divisionMinLengthPixel) return 1; let subLP = 0; //try dividing by the scaleBarStartDigit subLP = niceLengthPixel / scaleBarStartDigit; if (subLP < divisionMinLengthPixel) { //try dividing by 2 if (niceLengthPixel / 2 < divisionMinLengthPixel) return 2; return 1; } //try dividing by the scaleBarStartDigit * 2 subLP = niceLengthPixel / scaleBarStartDigit / 2; if (subLP < divisionMinLengthPixel) return scaleBarStartDigit; //try dividing by the scaleBarStartDigit * 4 subLP = niceLengthPixel / scaleBarStartDigit / 4; if (subLP < divisionMinLengthPixel) return 2 * scaleBarStartDigit; //try dividing by the scaleBarStartDigit * 5 subLP = niceLengthPixel / scaleBarStartDigit / 5; if (subLP < divisionMinLengthPixel) return 4 * scaleBarStartDigit; //TODO these three previous steps could be handled into a loop, with some recursion mechanism. It would however be good to limit the number of divisions, or to hierarchise them. return 5 * scaleBarStartDigit; }33:[{"id":"f23d4df848ad485532e698127cfb7b4ea8502348bd4f9e9adc529e5f012b81efdad5c4e476cbf9e03c8acda7fcdaf00e5458c72c0919ac907a977d3e1e3448ef","href":"https://static.observableusercontent.com/files/f23d4df848ad485532e698127cfb7b4ea8502348bd4f9e9adc529e5f012b81efdad5c4e476cbf9e03c8acda7fcdaf00e5458c72c0919ac907a977d3e1e3448ef","name":"scalebar.png","type":"image/png","lastModified":1631781602700.196,"size":14226}] 2f:{"id":"30910e5cdb6d8982","slug":"nice-scale-bar","title":"How to make a nice scale bar","thumbnail":"39c045801f34cecac591bfcaf4561fcf9a47c8efecee60dc69bdb416808e1d9f","access_level":"public","create_time":"$D2021-09-15T13:51:45.637Z","update_time":"$D2022-11-18T17:34:18.880Z","view_time":null,"first_public_time":"$D2021-09-16T08:56:38.255Z","fork":{"id":"bd116742b1f91cf4","slug":"simple-d3","title":"Simple D3","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":20,"starred":false,"owner":{"type":"team","id":"5f78b093af2e7092","login":"jgaffuri","name":"jgaffuri","avatar_url":"https://avatars-next.observableusercontent.com/6a614d4bdc38fdf3e8462e2ab8fed865c094d58907a82e9b357bacec416b8fca","tier":"starter_2024"},"version":899,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"b69434aca236a98c","login":"jgaffuri","name":"jgaffuri","avatar_url":"https://avatars-next.observableusercontent.com/6a614d4bdc38fdf3e8462e2ab8fed865c094d58907a82e9b357bacec416b8fca","tier":null}],"members":[{"type":"individual","id":"b69434aca236a98c","login":"jgaffuri","name":"jgaffuri","avatar_url":"https://avatars-next.observableusercontent.com/6a614d4bdc38fdf3e8462e2ab8fed865c094d58907a82e9b357bacec416b8fca","tier":null,"role":"editor"},{"type":"individual","id":"dc51b4f7240f0553","login":"joewdavies","name":"Joe Davies","avatar_url":"https://avatars-next.observableusercontent.com/9b3334fa93f66c399554670429d5728ef2f24d2d28e3933c6c7e1fef7ff8eb7e","tier":null,"role":"editor"}],"comments":[{"id":"8775561ce63fb907","reply_to_id":null,"content":"TODO: Labels can have different units on a same scale bar... It should not happen.","create_time":"$D2021-09-17T14:32:40.840Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"b69434aca236a98c","login":"jgaffuri","name":"jgaffuri","avatar_url":"https://avatars-next.observableusercontent.com/6a614d4bdc38fdf3e8462e2ab8fed865c094d58907a82e9b357bacec416b8fca","tier":null}},{"id":"d6dd2b3ef5e79816","reply_to_id":null,"content":"See https://dpi.lv/","create_time":"$D2022-11-18T17:34:53.263Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"b69434aca236a98c","login":"jgaffuri","name":"jgaffuri","avatar_url":"https://avatars-next.observableusercontent.com/6a614d4bdc38fdf3e8462e2ab8fed865c094d58907a82e9b357bacec416b8fca","tier":null}}],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"How to make a nice scale bar","cells":[{"id":0,"value":"# How to make a nice scale bar\n\nHere are some hints to make a scale bar with nice rounded values and divisions, for a map.\n\nUsually, a scale bar has to fit within a rectangular component, with limited dimensions. It is unlikely that the scale bar length corresponds to a nice rounded value (such as *100km*) which can be easily divided into other nice values (such as *25km*, *50km*, *75km*). In such case, it is more suitable to shorten a bit the scale bar to a lower length value which makes it nicer (see [here](https://pro.arcgis.com/fr/pro-app/latest/help/layouts/scale-bars.htm) for example).\n\nThis page gives some elements to do that.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":539,"value":"FileAttachment(\"scalebar.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":422,"value":"md`# Result`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":690,"value":"md`See below: Whatever the scale value, the scale bar is automatically shorten to show 'nice' rounded values. The gray rectangle in the background shows the space where the scale bar has to fit.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":114,"value":"viewof scale = Inputs.range([1, 100000], {\n label: \"Scale denominator (or zoom factor):\",\n //step: 0.1,\n value: 10000,\n width: width / 2,\n transform: Math.log\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":279,"value":"viewof maxLengthPix = Inputs.range([100, width], {\n label: \"Maximum scale bar length, in pixels:\",\n step: 1,\n value: width / 2,\n width: width / 2\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":14,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":342,"value":"md`# Explanation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":346,"value":"md`## Computing a 'nice' scale bar length`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":289,"value":"md`Let's start with how much measures a screen pixel of your screen, in m. It is 1/96 of inch (as explained [here](https://www.pixelto.net/px-to-mm-converter)):`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":894,"value":"screenDPIResolution = 166","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":295,"value":"pixelPhysicalSizeM = (25.4 / screenDPIResolution) * 0.001","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":311,"value":"md`And now, using the scale factor, here is how much the same screen pixel measures, in ground m:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":292,"value":"pixelSizeM = scale * pixelPhysicalSizeM","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":314,"value":"md`Thus, here is the maximum length of the scale bar, in ground m, given its maximum length in pixels:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":353,"value":"maxLengthM = maxLengthPix * pixelSizeM","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":357,"value":"md`This is the value we need to shrink and make 'nice', that is rounded and easy to divide. For example, it should be a power of ten, multiplied by 1, 2, 3 or 5.\n\nThe function below computes these 'nice' values. It returns an array with the 'nice' length, and its first digit.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":161,"value":"niceScaleBarLength = function (scaleBarLength) {\n //compute the 'nice' power of ten\n const pow10 = Math.pow(\n 10,\n Math.floor(Math.log(scaleBarLength) / Math.log(10))\n );\n\n //check if 5 times this value fits\n if (5 * pow10 <= scaleBarLength) return [5 * pow10, 5];\n\n //check if 3 times this value fits\n if (3 * pow10 <= scaleBarLength) return [3 * pow10, 3];\n\n //check if 2 times this value fits\n if (2 * pow10 <= scaleBarLength) return [2 * pow10, 2];\n\n //returns the power of ten\n return [pow10, 1];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":326,"value":"md`So, using that function, here is the 'nice' scale bar length to use, in ground m:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":329,"value":"niceLengthM = niceScaleBarLength(maxLengthM)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":337,"value":"md`And finally, in pixel:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":338,"value":"niceLengthPixel = niceLengthM[0] / pixelSizeM","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":380,"value":"md`## Division`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":383,"value":"md`Once we know how long the scale bar is, we can consider dividing it. The number of divisions depends on the size of the scale bar of course (the longer, the more divisions) and also on the digit the 'nice length' starts with:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":388,"value":"scaleBarStartDigit = niceLengthM[1]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":604,"value":"md`The divisions should not get too small. Here is a threshold value, in pixels:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":607,"value":"divisionMinLengthPixel = 50","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":761,"value":"md`And here is how to compute the number of divisions to use, using these parameters:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":718,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":469,"value":"md`## Label`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":476,"value":"md`This function makes nice labels, with suitable unit, depending on the value, in ground meters:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":447,"value":"getLabel = function (valueM, withUnit = true) {\n //mm\n if (valueM < 0.01)\n return (valueM * 1000).toLocaleString() + (withUnit ? \" mm\" : \"\");\n //cm\n if (valueM < 1)\n return (valueM * 100).toLocaleString() + (withUnit ? \" cm\" : \"\");\n //m\n if (valueM < 1000)\n return (valueM * 1).toLocaleString() + (withUnit ? \" m\" : \"\");\n //km\n return (valueM / 1000).toLocaleString() + (withUnit ? \" km\" : \"\");\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"