2c:null 2d:["$","title",null,{"children":"Scale Bar | Fati CHEN | Observable"}] 32:T567,function createScale( x, { width = 500, maxDepth = 0, displayWidth = 40, height = 20, unit = "", format = (i) => i } = {} ) { const ticks = getTicks(x, { width, displayWidth, maxDepth }); const last = ticks[ticks.length - 1]; const tickPairs = d3.pairs(ticks); const half = height / 2; const $scale = d3.create("svg:g"); $scale .selectAll("text") .data(ticks) .join("text") .call(attrs, { x, y: 12, "text-anchor": (v, i) => i === 0 ? "start" : v === last ? "end" : "middle" }) .text(format); const $bar = $scale .append("g") .attr("transform", "translate(0, 18)") .call( build({ append: "rect", x: x(0), y: 0, width: x(last) - 10, height, fill: "white", "stroke-width": 2, stroke: "black" }) ) .call( build({ append: "text", x: x(last) + 5, y: half, "dominant-baseline": "middle", call: (g) => g.text(unit) }) ) .call((g) => g .append("g") .selectAll("rect") .data(tickPairs) .join("rect") .call(attrs, { x: (v) => x(v[0]), y: (v, i) => (i % 2) * half, width: (v) => x(v[1]) - x(v[0]), height: half }) ); return $scale.node(); }33:[] 30:{"id":"0320e583ea9185fe","slug":"scale-bar","title":"Scale Bar","thumbnail":"e42960e66791cd31929e0c77055fa5e4687a2f7a28da26f0cae6061e4cdf723b","access_level":"public","create_time":"$D2021-10-13T13:06:35.538Z","update_time":"$D2021-10-13T19:31:43.414Z","view_time":null,"first_public_time":"$D2021-10-13T19:27:24.995Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"ffbcf8ce47e293f4","login":"stardisblue","name":"Fati CHEN","avatar_url":"https://avatars-next.observableusercontent.com/c3f14cf2d58aebca19459fc111e35113235be85745ae353f37b7731ea9a84d79","tier":"starter_2024"},"version":668,"publish_version":668,"role":null,"authored":false,"authors":[{"type":"individual","id":"7affeb11879b11eb","login":"stardisblue","name":"Fati CHEN","avatar_url":"https://avatars-next.observableusercontent.com/c3f14cf2d58aebca19459fc111e35113235be85745ae353f37b7731ea9a84d79","tier":null}],"members":[{"type":"individual","id":"7affeb11879b11eb","login":"stardisblue","name":"Fati CHEN","avatar_url":"https://avatars-next.observableusercontent.com/c3f14cf2d58aebca19459fc111e35113235be85745ae353f37b7731ea9a84d79","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Scale Bar","cells":[{"id":0,"value":"# Scale Bar\n\nhttps://observablehq.com/@jgaffuri/nice-scale-bar","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"viewof range = Inputs.range([100, 10e7], {\n label: \"Max Range\",\n value: 100,\n transform: Math.log,\n step: 1\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":314,"value":"viewof domainMax = Inputs.range([100, width - 20], {\n label: \"width\",\n value: 600,\n step: 1\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":163,"value":"viewof minWidth = Inputs.range([5, 100], {\n label: \"min step width\",\n value: 25,\n step: 1\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"viewof maxDepth = Inputs.range([1, 6], {\n label: \"max depth\",\n value: 5,\n step: 1\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"viewof barWidth = Inputs.range([100, width - 20], {\n label: \"Bar width\",\n value: 600,\n step: 1\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"htl.svg`