31:T76d,md`# Introducing d3-geo-scale-bar [d3-geo-scale-bar](https://github.com/HarryStevens/d3-geo-scale-bar) is a [D3.js](https://d3js.org/) module that makes it easy to add scale bars to maps created with [d3-geo](https://github.com/d3/d3-geo).

${width < 480 ? "Top A scale bar indicates kilometers in the southwest United States. Bottom A differently styled scale bar shows miles." : "Top Three different scale bars indicate distance in the southwest United States. Bottom-left Two scale bars show kilometers and miles in northern India. Bottom-right A scale bar indicates yards near the National Mall."} In cartography, scale bars help viewers understand the geographic extent of maps. Professional cartographers seldom omit them from reference maps, yet scale bars are commonly missing from interactive maps published on the internet. To be sure, not every map needs a scale bar. For one thing, scale bars indicate distance, but they are not necessarily precise across the entirety of the map; think twice before using them with projections that show large parts of the sphere or that have significant local distortions. They are also often out of place on thematic maps like [choropleth](https://observablehq.com/@d3/choropleth) and [bubble](https://observablehq.com/@d3/bubble-map) maps. To download d3-geo-scale-bar, read its source code, or contribute to the project, visit [its GitHub page](https://github.com/HarryStevens/d3-geo-scale-bar/). Otherwise, dive in to the tutorial below! - [Basic Usage](#basicUsage) - [Styling](#styling) - [Zooming](#zooming) - [Transitions](#transitions) - [Space Bars](#spaceBars)`32:T76b,{ const aspect = 1.12, height = mapWidth * aspect; projectionIndia.fitSize([mapWidth, height], geoJsonIndia); const wrapper = d3.select(DOM.element("div")); const svg = wrapper.append("svg") .attr("width", mapWidth) .attr("height", height); svg.selectAll(".india") .data(geoJsonIndia.features) .enter().append("path") .attr("class", "india") .attr("d", d3.geoPath(projectionIndia)) .attr("fill", "#eee") .attr("stroke", "#bbb") .attr("stroke-linecap", "round") .attr("stroke-linejoin", "round"); scaleBarTop .projection(projectionIndia) .size([mapWidth, height]); const top = svg.append("g") .attr("transform", `translate(0, -5)`) // Nest the scale bar within a g element so you can move it up. .append("g") .call(scaleBarTop); top.selectAll("rect") .remove(); top.selectAll(".tick").select("text") .attr("text-anchor", (d, i, e) => i === e.length - 1 ? "start" : "middle") .attr("dx", (d, i, e) => i === e.length - 1 ? -10 : 0) .attr("font-family", "serif") .attr("font-size", 14); scaleBarBottom .projection(projectionIndia) .size([mapWidth, height]); const bottom = svg.append("g").call(scaleBarBottom); bottom.selectAll("rect") .remove(); bottom.selectAll(".tick").select("text") .attr("text-anchor", (d, i, e) => i === e.length - 1 ? "start" : "middle") .attr("dx", (d, i, e) => i === e.length - 1 ? -10 : 0) .attr("font-family", "serif") .attr("font-size", 14); svg.selectAll(".domain") .attr("shape-rendering", "crispEdges"); wrapper.append("div") .style("font-family", "sans-serif") .style("font-size", "13px") .style("color", "#555") .text("Click/tap the left margin to view the code for this map."); return wrapper.node(); }33:T484,{ const wrapper = d3.select(DOM.element("div")); const svg = wrapper.append("svg") .attr("width", mapWidth) .attr("height", mapHeight); const g = svg.append("g"); g.selectAll("path") .data(geoJsonUsa.features) .enter().append("path") .attr("fill", "#eee") .attr("stroke", "#bbb") .attr("d", d3.geoPath(projection)); const bar = svg.append("g") .attr("class", "scale-bar-wrapper") .call(scaleBarZoom); // Call d3.zoom on your SVG element svg.call(d3.zoom() .scaleExtent([1, 10]) .translateExtent([[0, 0], [mapWidth, mapHeight]]) .on("zoom", event => { const t = event.transform; g.attr("transform", t); // Pass the k property of the zoom's transform // to the scale bar's scaleFactor. // Then call the scaleBar again. scaleBarZoom.zoomFactor(t.k); bar.call(scaleBarZoom); }) ); wrapper.append("div") .style("font-family", "sans-serif") .style("font-size", "13px") .style("color", "#555") .text("You can zoom and pan this map."); return wrapper.node(); }34:T4b9,{ const wrapper = d3.select(DOM.element("div")); const svg = wrapper.append("svg") .attr("width", mapWidth) .attr("height", mapHeight); const g = svg.append("g"); g.selectAll("path") .data(geoJsonUsa.features) .enter().append("path") .attr("fill", "#eee") .attr("stroke", "#bbb") .attr("d", d3.geoPath(projection)); const bar = svg.append("g") .call(scaleBarWapoZoom); bar.select(".domain").style("stroke-width", 1.5); // Call d3.zoom on your SVG element svg.call(d3.zoom() .scaleExtent([1, 10]) .translateExtent([[0, 0], [mapWidth, mapHeight]]) .on("zoom", event => { const t = event.transform; g.attr("transform", t); scaleBarWapoZoom .label(`${+(scaleBarWapoZoom.distance() / t.k).toFixed(1)} ${scaleBarWapoZoom.units()}`) .zoomFactor(t.k); bar.call(scaleBarWapoZoom); }) ); wrapper.append("div") .style("font-family", "sans-serif") .style("font-size", "13px") .style("color", "#555") .text("You can zoom and pan this map. Click/tap the left margin to view the code."); return wrapper.node(); }35:T687,{ const wrapper = d3.select(DOM.element("div")); const svg = wrapper.append("svg") .attr("width", mapWidth) .attr("height", mapHeight); const g = svg.append("g"); g.selectAll("path") .data(geoJsonUsa.features) .enter().append("path") .attr("fill", "#eee") .attr("stroke", "#bbb") .attr("d", d3.geoPath(projection)); // Append g elements for the bars // and apply the generators. // Here, we also call a style generator // to apply several styles to the bars. const barBottom = svg.append("g") .call(scaleBarBottomZoom) .call(styleBar); const barTop = svg.append("g") .call(scaleBarTopZoom) .call(styleBar); // Call d3.zoom on your SVG element svg.call(d3.zoom() .scaleExtent([1, 10]) .translateExtent([[0, 0], [mapWidth, mapHeight]]) .on("zoom", event => { const t = event.transform; g.attr("transform", t); // Apply the zoom factor to both bars scaleBarBottomZoom .zoomFactor(t.k); scaleBarTopZoom .zoomFactor(t.k); // Call the scale bar generators // and the style generator // on both bars' g elements. barBottom .call(scaleBarBottomZoom) .call(styleBar); barTop .call(scaleBarTopZoom) .call(styleBar); }) ); wrapper.append("div") .style("font-family", "sans-serif") .style("font-size", "13px") .style("color", "#555") .text("You can zoom and pan this map. Click/tap the left margin to view the code."); return wrapper.node(); }36:T78e,{ let i = 0, country = geoJsonWorld.features[i]; const size = Math.min(width, 500), projection = d3.geoMercator() .fitSize([size, size], country), path = d3.geoPath(projection); scaleBarTransition .projection(projection) .size([size, size]); let prevPath = path(country); const wrapper = d3.select(DOM.element("div")), svg = wrapper.append("svg") .attr("width", size) .attr("height", size), outline = svg.append("path") .attr("stroke", "#bbb") .attr("fill", "#eee") .attr("d", prevPath), text = svg.append("text") .attr("paint-order", "stroke fill") .attr("dy", 16) .attr("font-family", "sans-serif") .attr("stroke", "white") .attr("stroke-linecap", "round") .attr("stroke-linejoin", "round") .attr("stroke-opacity", .9) .attr("stroke-width", 4) .text(country.properties.ADMIN), bar = svg.append("g") .call(scaleBarTransition); wrapper.append("div") .style("font-family", "sans-serif") .style("font-size", "13px") .style("color", "#555") .text("Click/tap the left margin to view the code for this map."); yield wrapper.node(); while (true){ yield Promises.delay(1500, wrapper.node()); i = i === geoJsonWorld.features.length - 1 ? 0 : i + 1; country = geoJsonWorld.features[i]; projection.fitSize([size, size], country); const currPath = path(country), interpolator = flubber.interpolate(prevPath, currPath); outline .transition().duration(1000) .attrTween("d", _ => interpolator); text .text(country.properties.ADMIN); bar .transition().duration(500) .call(scaleBarTransition) prevPath = currPath; } }37:Tdd3,{ const projection = d3.geoConicEquidistant(), height = fitWidth(projection); projection.fitSize([width, height], hull); const reproject = geoRasterReproject() .projection(projection) .size([width, height]); const el = d3.select(DOM.element("div")); yield el.node(); const titles = el.append("div"); titles.append("div") .style("display", "inline-block") .style("font-weight", 600) .style("margin-right", "20px") .text(`Landings on the near side of the moon, ${d3.min(landings, d => d.year)}–${d3.max(landings, d => d.year)}`); const legend = titles.selectAll(".legend") .data(["USA", "USSR", "China"]) .enter().append("div") .attr("class", "legend") .style("margin-right", "10px") .style("display", "inline-block"); legend.append("div") .style("width", "8px") .style("height", "8px") .style("background", d => d === "USA" ? "steelblue" : d === "USSR" ? "tomato" : "yellow") .style("border", d => `1px solid ${d === "USA" ? "blue" : d === "USSR" ? "red" : "gold"}`) .style("border-radius", "50%") .style("margin-right", "5px") .style("display", "inline-block"); legend.append("div") .style("display", "inline-block") .text(d => `${d} (${landings.filter(f => f.country === d).length})`); el .style("width", width + "px") .style("height", ((width <= 403 ? 100 : width <= 675 ? 70 : 40) + height + 8) + "px"); const canvas = el.append("canvas") .style("opacity", .8) .style("position", "absolute") .attr("width", width) .attr("height", height); reproject.context(canvas.node().getContext("2d"))(moon); const svg = el.append("svg") .style("position", "absolute") .attr("width", width) .attr("height", height); el.append("div") .style("margin-top", height + "px") .style("font-family", "sans-serif") .style("font-size", "13px") .style("color", "#555") .text("Click/tap the left margin to view the code for this map."); scaleBarMoon .projection(projection) .size([width, height]); svg.append("g") .call(scaleBarMoon) .selectAll("text") .attr("paint-order", "stroke fill") .attr("stroke", "white") .attr("stroke-linecap", "round") .attr("stroke-linejoin", "round") .attr("stroke-opacity", .5) .attr("stroke-width", 3); const position = svg.selectAll(".position") .data(landings) .enter().append("g") .attr("class", "position") .attr("transform", d => `translate(${projection([d.lon, d.lat])})`) position.append("circle") .attr("r", 4) .attr("fill", d => d.country === "USA" ? "steelblue" : d.country === "USSR" ? "tomato" : "yellow") .attr("stroke", d => d.country === "USA" ? "blue" : d.country === "USSR" ? "red" : "gold"); position.append("text") .style("display", d => width < 600 && d.mission !== "Apollo 11" ? "none" : "block") .attr("paint-order", "stroke fill") .attr("stroke", "white") .attr("stroke-linecap", "round") .attr("stroke-linejoin", "round") .attr("stroke-opacity", .5) .attr("stroke-width", 3) .attr("font-family", "sans-serif") .attr("font-size", 14) .attr("text-anchor", d => d.label.includes("e") ? "start" : "end") .attr("transform", d => `translate(${d.label.includes("e") ? 7 : -7}, ${d.label.includes("n") ? 0 : 10})`) .text(d => d.mission) }38:T70f,landings = [ {"mission":"Chang'e 3","year":2013,"country":"China","lat":44.12,"lon":-19.51,"label":"ne"}, {"mission":"Luna 24","year":1976,"country":"USSR","lat":12.7145,"lon":62.2129,"label":"ne"}, {"mission":"Luna 21","year":1973,"country":"USSR","lat":25.85,"lon":30.45,"label":"ne"}, {"mission":"Apollo 17","year":1972,"country":"USA","lat":20.18809,"lon":30.77475,"label":"se"}, {"mission":"Apollo 16","year":1972,"country":"USA","lat":-8.97341,"lon":15.49859,"label":"sw"}, {"mission":"Luna 20","year":1972,"country":"USSR","lat":3.533333,"lon":56.55,"label":"ne"}, {"mission":"Apollo 15","year":1971,"country":"USA","lat":26.13224,"lon":3.634,"label":"sw"}, {"mission":"Apollo 14","year":1971,"country":"USA","lat":-3.64544,"lon":-17.47139,"label":"se"}, {"mission":"Luna 17","year":1970,"country":"USSR","lat":38.28,"lon":-35,"label":"nw"}, {"mission":"Luna 16","year":1970,"country":"USSR","lat":-0.683333,"lon":56.3,"label":"se"}, {"mission":"Apollo 12","year":1969,"country":"USA","lat":-3.01381,"lon":-23.4193,"label":"ne"}, {"mission":"Surveyor 5","year":1967,"country":"USA","lat":1.41,"lon":23.18,"label":"nw"}, {"mission":"Apollo 11","year":1969,"country":"USA","lat":0.67409,"lon":23.47298,"label":"se"}, {"mission":"Surveyor 7","year":1968,"country":"USA","lat":-41.01,"lon":-11.41,"label":"ne"}, {"mission":"Surveyor 6","year":1967,"country":"USA","lat":0.49,"lon":-1.4,"label":"se"}, {"mission":"Surveyor 3","year":1967,"country":"USA","lat":-2.94,"lon":-23.34,"label":"sw"}, {"mission":"Luna 13","year":1966,"country":"USSR","lat":18.87,"lon":-62.05,"label":"nw"}, {"mission":"Surveyor 1","year":1966,"country":"USA","lat":-2.474,"lon":-43.339,"label":"sw"}, {"mission":"Luna 9","year":1966,"country":"USSR","lat":7.08,"lon":-64.37,"label":"nw"} ];39:[{"id":"0e6b678eeca6c069ab8ed1384772f8a2277f884427614e7a4ad474acf3c5b4469f070f56966df3063a7a5af08c9a0f653b1c7a803a393c8d7ccb0d407dadb9ea","href":"https://static.observableusercontent.com/files/0e6b678eeca6c069ab8ed1384772f8a2277f884427614e7a4ad474acf3c5b4469f070f56966df3063a7a5af08c9a0f653b1c7a803a393c8d7ccb0d407dadb9ea","name":"usa.json","type":"application/json","lastModified":1579369708080.633,"size":342937},{"id":"e123afdb9a194ff2c6d127770ba6299283454e741c01cd3729a600a43a6ba319889c81fd1795b095bff1ecc80ccc7ab3004a1a13550c3b07ac06525cc1c0b49f","href":"https://static.observableusercontent.com/files/e123afdb9a194ff2c6d127770ba6299283454e741c01cd3729a600a43a6ba319889c81fd1795b095bff1ecc80ccc7ab3004a1a13550c3b07ac06525cc1c0b49f","name":"world-50m.json","type":"application/json","lastModified":1580787658638.886,"size":3762602},{"id":"e9b7d6811f464e21769b2bf3ae5b31a15e1f1dcfd5446ddd39be8e7fe949bf9966e98abbbcd81ec73465372d96c80d667196112c77d1c3240d521675527aa52f","href":"https://static.observableusercontent.com/files/e9b7d6811f464e21769b2bf3ae5b31a15e1f1dcfd5446ddd39be8e7fe949bf9966e98abbbcd81ec73465372d96c80d667196112c77d1c3240d521675527aa52f","name":"2k_moon.jpg","type":"image/jpeg","lastModified":1580872347597.872,"size":1053869},{"id":"86c9da5b3b47d2bcc930cc3b9db56114c0c575ac471f86a2c5445a61705da21ca66775c9474e2b4a0b730c94950b12e23f8ffcca81cf1a7b9b3d65538b7fa82c","href":"https://static.observableusercontent.com/files/86c9da5b3b47d2bcc930cc3b9db56114c0c575ac471f86a2c5445a61705da21ca66775c9474e2b4a0b730c94950b12e23f8ffcca81cf1a7b9b3d65538b7fa82c","name":"india.json","type":"application/json","lastModified":1580948870956.255,"size":1487087},{"id":"9fa313e4c0657b75d0fbe8fe0910174c246798a9e2bbcc6788174d9d90b9a61eb90a6eb6cba2c6e80709dadebda293b38db2dbdfd7aeec7148ccb49fa37f1431","href":"https://static.observableusercontent.com/files/9fa313e4c0657b75d0fbe8fe0910174c246798a9e2bbcc6788174d9d90b9a61eb90a6eb6cba2c6e80709dadebda293b38db2dbdfd7aeec7148ccb49fa37f1431","name":"double-bar.png","type":"image/png","lastModified":1580948613534.996,"size":16921},{"id":"51a26c6d6f242086959a72c4d0ce3c8526a6a9e083f2e375fd8fc0733359f06a70350df9ec13bc5959e6528e175da33a1b89833fd71c95bc01919c716db11fb9","href":"https://static.observableusercontent.com/files/51a26c6d6f242086959a72c4d0ce3c8526a6a9e083f2e375fd8fc0733359f06a70350df9ec13bc5959e6528e175da33a1b89833fd71c95bc01919c716db11fb9","name":"intro-mobile.png","type":"image/png","lastModified":1581014111836.47,"size":34754},{"id":"e7f725d19d9bfd4015818ab17368a5b8ce6b3b42e6bf8057231224adf5eddd9c68601cba7d689eff9a588c62a38213d9a08b24ef0bb3b791ef443f4e9c53b906","href":"https://static.observableusercontent.com/files/e7f725d19d9bfd4015818ab17368a5b8ce6b3b42e6bf8057231224adf5eddd9c68601cba7d689eff9a588c62a38213d9a08b24ef0bb3b791ef443f4e9c53b906","name":"intro-desktop@1.png","type":"image/png","lastModified":1581013576883.78,"size":85606},{"id":"bbcb4924ee4aefe63737f55fbcd65b746af13e7b8da0e94e6fdbec390abc8d5e42eb55cc8aa08e633867179d85751248d3137a4f69a717dc9a9467621d3f600c","href":"https://static.observableusercontent.com/files/bbcb4924ee4aefe63737f55fbcd65b746af13e7b8da0e94e6fdbec390abc8d5e42eb55cc8aa08e633867179d85751248d3137a4f69a717dc9a9467621d3f600c","name":"dc-central@1.json","type":"application/json","lastModified":1581014845229.126,"size":4060127}] 2f:{"title":"Introducing d3-geo-scale-bar","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"basicUsage = md`## Basic usage\n\nd3.[geoScaleBar](https://github.com/HarryStevens/d3-geo-scale-bar#geoScaleBar) returns a configurable function that will generate a scale bar when used with selection.[call](https://github.com/d3/d3-selection#selection_call), in the same way an axis can be added to a chart with d3.[axisBottom](https://github.com/d3/d3-axis#axisBottom). Just as you must pass a [scale](https://github.com/d3/d3-scale) to an axis generator, you must pass a [projection](https://github.com/d3/d3-geo#projections) to the scale bar generator.\n\nFor example, if you are making a map of the continental United States, you might use an Albers projection.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"projection = d3.geoAlbers()\n .fitSize([mapWidth, mapHeight], geoJsonUsa);","pinned":true,"hidden":false,"mode":"ojs"},{"id":61,"value":"{\n const svg = d3.select(DOM.svg(mapWidth, mapHeight));\n \n svg.selectAll(\"path\")\n .data(geoJsonUsa.features)\n .enter().append(\"path\")\n .attr(\"fill\", \"#eee\")\n .attr(\"stroke\", \"#bbb\")\n .attr(\"d\", d3.geoPath(projection));\n \n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":80,"value":"md`Now, create the scale bar generator, passing in the projection as well as the dimensions of the map.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":114,"value":"scaleBar = d3.geoScaleBar()\n .projection(projection)\n .size([mapWidth, mapHeight]);","pinned":true,"hidden":false,"mode":"ojs"},{"id":121,"value":"{\n const svg = d3.select(DOM.svg(mapWidth, mapHeight));\n \n svg.selectAll(\"path\")\n .data(geoJsonUsa.features)\n .enter().append(\"path\")\n .attr(\"fill\", \"#eee\")\n .attr(\"stroke\", \"#bbb\")\n .attr(\"d\", d3.geoPath(projection));\n \n // Call the scale bar like this.\n svg.append(\"g\")\n .call(scaleBar);\n \n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":124,"value":"md`You have created a scale bar, but it is not where you want it. If it were an axis, you would place it on the chart by setting the translate value of the axis’s transform property. On a map, however, the relationship between geographic distance and pixel distance often varies depending upon where you are. Therefore, to place the scale bar, you use scaleBar.[left](https://github.com/HarryStevens/d3-geo-scale-bar#scaleBar_left) and scaleBar.[top](https://github.com/HarryStevens/d3-geo-scale-bar#scaleBar_top). Each position should be a number between 0 and 1, where 0 is the left/top corner of the map and 1 is the right/bottom.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":134,"value":"scaleBarPositioned = d3.geoScaleBar()\n .projection(projection)\n .size([mapWidth, mapHeight])\n .left(.05)\n .top(.85)\n .tickFormat(d3.format(\",\")); // A formatter function adds a comma to \"1,000\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":140,"value":"{\n const wrapper = d3.select(DOM.element(\"div\"));\n const svg = wrapper.append(\"svg\")\n .attr(\"width\", mapWidth)\n .attr(\"height\", mapHeight);\n \n svg.selectAll(\"path\")\n .data(geoJsonUsa.features)\n .enter().append(\"path\")\n .attr(\"fill\", \"#eee\")\n .attr(\"stroke\", \"#bbb\")\n .attr(\"d\", d3.geoPath(projection));\n \n svg.append(\"g\")\n .call(scaleBarPositioned);\n \n wrapper.append(\"div\")\n .style(\"font-family\", \"sans-serif\")\n .style(\"font-size\", \"13px\")\n .style(\"color\", \"#555\")\n .text(\"Click/tap the left margin to view the code for this map.\");\n \n return wrapper.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":843,"value":"styling = md`## Styling\n\nYou can customize the scale bar’s appearance by configuring the generator. The Washington Post, for example, uses a single line for the bar and centers the units above the bar. Most of The Post’s readers are from the United States, so miles are used instead of kilometers.\n\nTry commenting out or changing the lines below to see what each does.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":150,"value":"scaleBarWapo = d3.geoScaleBar()\n .projection(projection)\n .size([mapWidth, mapHeight])\n .left(left)\n .top(top)\n .units(d3.geoScaleMiles) // The units will be miles instead of kilometers\n .distance(500) // The distance of the scale bar\n .label(\"500 miles\") // The label on top of the scale bar\n .labelAnchor(\"middle\") // The position of the label (you can also pass \"start\" and \"end\")\n .tickSize(null) // The height of the bar\n .tickValues(null); // The tick values below the bar will be removed","pinned":true,"hidden":false,"mode":"ojs"},{"id":156,"value":"{\n const wrapper = d3.select(DOM.element(\"div\"));\n \n const svg = wrapper.append(\"svg\")\n .attr(\"width\", mapWidth)\n .attr(\"height\", mapHeight);\n \n svg.selectAll(\"path\")\n .data(geoJsonUsa.features)\n .enter().append(\"path\")\n .attr(\"fill\", \"#eee\")\n .attr(\"stroke\", \"#bbb\")\n .attr(\"d\", d3.geoPath(projection));\n \n svg.append(\"g\")\n .call(scaleBarWapo)\n .select(\".domain\")\n .attr(\"stroke-width\", 1.5);\n \n wrapper.append(\"div\")\n .style(\"font-family\", \"sans-serif\")\n .style(\"font-size\", \"13px\")\n .style(\"color\", \"#555\")\n .text(\"Click/tap the left margin to view the code for this map.\");\n \n return wrapper.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":200,"value":"md`Use these sliders to adjust the position of the scale bar.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":196,"value":"viewof left = Inputs.range([0, 1], {\n label: \"left\",\n step: .05,\n value: .1\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":207,"value":"viewof top = Inputs.range([0, 1], {\n label: \"top\",\n step: .05,\n value: .9\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":763,"value":"md`Additional styling is available through scaleBar.[orient](https://github.com/HarryStevens/d3-geo-scale-bar#scaleBar_orient). For instance, suppose you wanted to reproduce the scale bar style from [this map by Chris Henrick](http://chrishenrick.com/images/DK_01_South-America.jpg):\n\n

\n\nYou can have one bar oriented upwards by passing d3.[geoScaleTop](https://github.com/harrystevens/d3-geo-scale-bar#geoScaleTop) to scaleBar.[orient](https://github.com/harrystevens/d3-geo-scale-bar#scaleBar_orient):`","pinned":false,"hidden":false,"mode":"ojs"},{"id":772,"value":"scaleBarTop = d3.geoScaleBar()\n .orient(d3.geoScaleTop) // The other orientation is d3.geoScaleBottom, which is the default\n .top(.1)\n .left(.5)\n .distance(250)\n .label(null)\n .tickPadding(3) // How far the tick text labels are from the lines\n .tickFormat((d, i, e) => i === e.length - 1 ? `${d} Kilometers` : d)\n .tickValues([0, 250])","pinned":true,"hidden":false,"mode":"ojs"},{"id":774,"value":"md`And another one that measures miles by passing d3.[geoScaleMiles](https://github.com/harrystevens/d3-geo-scale-bar#geoScaleMiles) to scaleBar.[units](https://github.com/harrystevens/d3-geo-scale-bar#scaleBar_units):`","pinned":false,"hidden":false,"mode":"ojs"},{"id":779,"value":"scaleBarBottom = d3.geoScaleBar()\n .units(d3.geoScaleMiles) // Other options are d3.geoScaleFeet, d3.geoScaleKilometers, and d3.geoScaleMeters\n .orient(d3.geoScaleBottom) // Redundant as this is the default\n .top(.1)\n .left(.5)\n .distance(250)\n .label(null)\n .tickPadding(3) // How far the tick text labels are from the lines\n .tickFormat((d, i, e) => i === e.length - 1 ? `${d} Miles` : d)\n .tickValues([0, 250]);","pinned":true,"hidden":false,"mode":"ojs"},{"id":783,"value":"md`We’ll put these bars on a map of India using an [Albers India projection](https://spatialreference.org/ref/sr-org/albers-india/proj4/).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1168,"value":"projectionIndia = proj4d3(`+proj=aea +lat_2=12 +lat_1=28 +lat_0=20 +lon_0=78 +x_0=2000000 +y_0=2000000`)","pinned":true,"hidden":false,"mode":"ojs"},{"id":786,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":220,"value":"zooming = md`## Zooming\n\nAn advantage of maps published on the internet, as opposed to in print, is that you can explore them by zooming and panning. In D3.js, you can use [d3-zoom](https://github.com/d3/d3-zoom) to apply [zooming and panning to your maps](https://observablehq.com/@d3/zoomable-raster-vector).\n\nAs a map zooms, you can keep the scale bar in sync with scaleBar.[zoomFactor](https://github.com/HarryStevens/d3-geo-scale-bar#scaleBar_zoomFactor).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":242,"value":"scaleBarZoom = d3.geoScaleBar()\n .zoomClamp(false) // Set this to true to keep the bar's width constant\n .projection(projection)\n .size([mapWidth, mapHeight])\n .left(.05)\n .top(.85)\n .tickFormat(d => d3.format(\",\")(+d.toFixed(1))); // A formatter function rounds the tick values and adds a comma to \"1,000\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":237,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":254,"value":"md`You can also apply zooming to a customized scale bar.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":262,"value":"scaleBarWapoZoom = d3.geoScaleBar()\n .projection(projection)\n .size([mapWidth, mapHeight])\n .left(.1)\n .top(.9)\n .units(d3.geoScaleMiles)\n .distance(500)\n .label(\"500 miles\")\n .labelAnchor(\"middle\")\n .tickSize(null)\n .tickValues(null);","pinned":true,"hidden":false,"mode":"ojs"},{"id":265,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1158,"value":"md`In the example above, as the map zooms, the width of the scale bar remains constant while the distance it represents changes. To modify this behavior, you can set scaleBar.[zoomClamp](https://github.com/harrystevens/d3-geo-scale-bar#scaleBar_zoomClamp) to false.\n\nIn the below example, we use two scale bars to show miles and kilometers as the map zooms.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1195,"value":"scaleBarBottomZoom = d3.geoScaleBar()\n .projection(projection)\n .size([mapWidth, mapHeight])\n .left(.1)\n .top(.9)\n .units(d3.geoScaleMiles)\n .label(null)\n .tickPadding(2)\n .tickSize(0)\n .tickFormat((d, i, e) => i === e.length - 1 ? `${d} mi.` : d)\n .zoomClamp(false);","pinned":true,"hidden":false,"mode":"ojs"},{"id":1166,"value":"scaleBarTopZoom = d3.geoScaleBar()\n .projection(projection)\n .size([mapWidth, mapHeight])\n .left(.1)\n .top(.9)\n .orient(d3.geoScaleTop)\n .label(null)\n .tickPadding(2)\n .tickSize(0)\n .tickFormat((d, i, e) => i === e.length - 1 ? `${d} km.` : d)\n .zoomClamp(false);","pinned":true,"hidden":false,"mode":"ojs"},{"id":1182,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":1191,"value":"function styleBar(bar){\n bar.selectAll(\"rect\")\n .remove();\n \n const text = bar.select(\".tick:last-of-type\").text();\n\n const ticks = bar.selectAll(\".tick\");\n \n ticks.select(\"line\")\n .attr(\"y2\", text.includes(\"km\") ? -10 : 10)\n .style(\"display\", (d, i, e) => i === e.length - 1 ? \"block\" : \"none\")\n \n ticks.select(\"text\")\n .attr(\"dy\", text.includes(\"km\") ? -3 : 12)\n .style(\"display\", (d, i, e) => i === 0 ? \"block\" : \"none\")\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-size\", 14);\n \n bar.select(\".tick text\")\n .text(text);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":272,"value":"transitions = md`## Transitions\n\nLike [axes in D3.js](https://bl.ocks.org/HarryStevens/678935d06d4601c25cb141bacd4068ce), scale bars play nicely with [transitions](https://github.com/d3/d3-transition), so you can smoothly change the bar if your projection changes. In the map below, as the country changes, the scale bar [selects a default distance based on the projection](https://github.com/HarryStevens/d3-geo-scale-bar/blob/master/src/geoScaleBar.js#L42), but you can always set it manually with scaleBar.[distance](https://github.com/HarryStevens/d3-geo-scale-bar#scaleBar_distance).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":359,"value":"scaleBarTransition = d3.geoScaleBar()\n .top(.1)\n .left(.01)\n .tickFormat(d3.format(\",\"));","pinned":true,"hidden":false,"mode":"ojs"},{"id":330,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":274,"value":"spaceBars = md`## Space Bars\n\nNot all maps are of Earth! To measure distances on other planets, the scale bar must be configured so that it knows the radius of the planet upon which it will rest. To do this, use scaleBar.[radius](https://github.com/HarryStevens/d3-geo-scale-bar#scaleBar_radius). \n\nFor example, below is a map showing the locations of spacecraft landings on the near side of the Moon. To place a scale bar on the Moon, simply pass 1737.4, the radius of the Moon in kilometers, to scaleBar.radius. If you wish to indicate miles, set scaleBar.radius to 1079.4, the radius of the Moon in miles.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":492,"value":"scaleBarMoon = d3.geoScaleBar()\n .radius(1737.4) // The radius of the moon is 1,737.4 kilometers\n .top(.9)\n .left(.05);","pinned":true,"hidden":false,"mode":"ojs"},{"id":494,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":626,"value":"md`Note that scaleBar.radius will also come in handy if you want to plot units on Earth other than kilometers, miles, meters, or feet, all of which come with [preset units](https://github.com/HarryStevens/d3-geo-scale-bar/blob/master/README.md#scaleBar_units). For instance, when adding a scale bar to a map of a small area, you can set scaleBar.radius to 6967419.888, the mean radius of the Earth in yards.\n\nFor example, here is a map of buildings near the National Mall in Washington, D.C., using data from the great [Open Data DC](https://opendata.dc.gov/datasets/a657b34942564aa8b06f293cb0934cbd_1).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":728,"value":"scaleBarDc = d3.geoScaleBar()\n .top(.9)\n .left(.05)\n .radius(6967419.888)\n .label(\"Yards\")\n // .units({units: \"yards\", radius: 6967419.888}) // Will do the same as the previous two lines\n .distance(mapWidth <= 400 ? 1200 : 1000)\n .tickFormat(d3.format(\",\"));","pinned":true,"hidden":false,"mode":"ojs"},{"id":731,"value":"{\n const aspect = .76,\n height = mapWidth * aspect;\n \n const wrapper = d3.select(DOM.element(\"div\"))\n \n const svg = wrapper.append(\"svg\")\n .attr(\"width\", mapWidth)\n .attr(\"height\", height);\n \n const projection = d3.geoMercator()\n .fitSize([mapWidth, height], geoJsonDc);\n\n const roads = svg.selectAll(\".road\")\n .data(geoJsonDc.features)\n .enter().append(\"path\")\n .attr(\"class\", \"road\")\n .attr(\"d\", d3.geoPath(projection))\n .attr(\"fill\", \"#eee\")\n .attr(\"stroke\", \"#bbb\");\n \n scaleBarDc\n .projection(projection)\n .size([mapWidth, height]);\n \n svg.append(\"g\")\n .call(scaleBarDc);\n \n wrapper.append(\"div\")\n .style(\"font-family\", \"sans-serif\")\n .style(\"font-size\", \"13px\")\n .style(\"color\", \"#555\")\n .text(\"Click/tap the left margin to view the code for this map.\");\n \n return wrapper.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":918,"value":"md`Now you can put scale bars on your D3.js maps! To download d3-geo-scale-bar, read its source code, or contribute to the project, visit https://github.com/harrystevens/d3-geo-scale-bar.\n\nThanks to [Chris Henrick](https://observablehq.com/@clhenrick/), [Kevin James](https://twitter.com/kevinjcode), [Gerald Rich](https://twitter.com/newsroomdev), and [Philippe Rivière](https://observablehq.com/@fil) for their gracious feedback.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":480,"value":"md`### Dimensions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":74,"value":"mapWidth = Math.min(width, 640);","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"mapHeight = mapWidth * 0.63;","pinned":false,"hidden":false,"mode":"ojs"},{"id":482,"value":"md`### Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"geoJsonUsa = FileAttachment(\"usa.json\").json();","pinned":false,"hidden":false,"mode":"ojs"},{"id":410,"value":"geoJsonWorld = {\n const json = await FileAttachment(\"world-50m.json\").json();\n json.features = json.features.filter(d => d.geometry.type === \"Polygon\" && !d.properties.ADMIN.includes(\"Vatican\")).sort((a, b) => a.properties.ADMIN < b.properties.ADMIN ? -1 : a.properties.ADMIN < b.properties.ADMIN ? 1 : 0);\n return json;\n};","pinned":false,"hidden":false,"mode":"ojs"},{"id":725,"value":"geoJsonDc = FileAttachment(\"dc-central@1.json\").json();","pinned":false,"hidden":false,"mode":"ojs"},{"id":788,"value":"geoJsonIndia = FileAttachment(\"india.json\").json();","pinned":false,"hidden":false,"mode":"ojs"},{"id":476,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":518,"value":"hull = {\n const hull = geometric.polygonScale(geometric.polygonHull(landings.map(d => [d.lon, d.lat])).reverse(), 1.1),\n coordinates = [[...hull, hull[0]]];\n \n return {\n type: \"Polygon\",\n coordinates\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":486,"value":"md`### Imports & Utilities`","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"d3 = require(\"d3@7\", \"d3-geo-scale-bar@1.2\", \"d3-tile@1\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":332,"value":"flubber = require(\"flubber@0\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":528,"value":"geometric = require(\"geometric@2\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":496,"value":"import { geoRasterReproject } from \"@harrystevens/raster-reprojection\";","pinned":false,"hidden":false,"mode":"ojs"},{"id":499,"value":"function fitWidth(projection) {\n const [[x0, y0], [x1, y1]] = d3.geoPath(projection.fitWidth(width, {type: \"Sphere\"})).bounds({type: \"Sphere\"});\n const dy = Math.ceil(y1 - y0), l = Math.min(Math.ceil(x1 - x0), dy);\n projection.scale(projection.scale() * (l - 1) / l).precision(0.2);\n return dy;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":794,"value":"proj4 = require(\"proj4@2\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":792,"value":"function proj4d3(proj4string) {\n const degrees = 180 / Math.PI,\n radians = 1 / degrees,\n raw = proj4(proj4string),\n p = function(lambda, phi) {\n return raw.forward([lambda * degrees, phi * degrees]);\n };\n p.invert = function(x, y) {\n return raw.inverse([x, y]).map(function(d) {\n return d * radians;\n });\n };\n const projection = d3.geoProjection(p).scale(1);\n projection.raw = raw;\n return projection;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":489,"value":"md`### The Moon`","pinned":false,"hidden":false,"mode":"ojs"},{"id":473,"value":"moon = FileAttachment(\"2k_moon.jpg\").image();","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W39","stdlib":"1","titling":"auto"}