d3-geo-scale-bar - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

build/d3-geo-scale-bar.js

@@ -1,2 +0,2 @@
-// https://github.com/HarryStevens/d3-geo-scale-bar Version 1.0.1. Copyright 2020 Harry Stevens.
+// https://github.com/HarryStevens/d3-geo-scale-bar Version 1.0.2. Copyright 2020 Harry Stevens.
 (function (global, factory) {
@@ -234,14 +234,15 @@ typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
         top = 0,
+        orient = geoScaleBottom(),
+        radius = geoScaleKilometers.radius,
         units = geoScaleKilometers.units,
         distance,
-        radius = geoScaleKilometers.radius,
-        tickValues,
         tickFormat = function tickFormat(d) {
       return Math.round(d);
     },
+        tickPadding = 2,
         tickSize = 4,
+        tickValues,
         labelText,
         labelAnchor = "start",
-        zoomFactor = 1,
-        orient = geoScaleBottom();
+        zoomFactor = 1;
 
@@ -302,3 +303,3 @@ function scaleBar(context) {
       line = line.merge(tickEnter.append("line").attr("stroke", "currentColor").attr("y2", tickSize * orient));
-      text = text.merge(tickEnter.append("text").attr("fill", "currentColor").attr("y", tickSize * orient + 2).attr("font-size", 10).attr("text-anchor", "middle").attr("dy", "".concat(orient === 1 ? 0.71 : -0.35, "em")));
+      text = text.merge(tickEnter.append("text").attr("fill", "currentColor").attr("y", tickSize * orient + tickPadding * orient).attr("font-size", 10).attr("text-anchor", "middle").attr("dy", "".concat(orient === 1 ? 0.71 : 0, "em")));
       rect = rect.merge(tickEnter.append("rect").attr("fill", function (d, i) {
@@ -328,3 +329,3 @@ return i % 2 === 0 ? "currentColor" : "#fff";
       line.attr("y2", tickSize * orient);
-      text.attr("y", tickSize * orient + 2).text(tickFormat);
+      text.attr("y", tickSize * orient + tickPadding * orient).text(tickFormat);
       rect.attr("fill", function (d, i) {
@@ -389,2 +390,6 @@ return i % 2 === 0 ? "currentColor" : "#fff";
 
+    scaleBar.tickPadding = function (_) {
+      return arguments.length ? (tickPadding = +_, scaleBar) : tickPadding;
+    };
+
     scaleBar.tickSize = function (_) {
@@ -391,0 +396,0 @@ return arguments.length ? (tickSize = +_, scaleBar) : tickSize;

build/d3-geo-scale-bar.min.js

@@ -1,1 +0,1 @@
-!function(t,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports):"function"==typeof define&&define.amd?define(["exports"],n):n(t.d3=t.d3||{})}(this,function(t){"use strict";function n(){this.reset()}function e(t,n,e){var r=t.s=n+e,o=r-n,i=r-o;t.t=n-i+(e-o)}function r(t,n){t&&x.hasOwnProperty(t.type)&&x[t.type](t,n)}function o(t,n,e){var r,o=-1,i=t.length-e;for(n.lineStart();++o<i;)r=t[o],n.point(r[0],r[1],r[2]);n.lineEnd()}function i(t,n){var e=-1,r=t.length;for(n.polygonStart();++e<r;)o(t[e],n,1);n.polygonEnd()}function a(t,n){t&&S.hasOwnProperty(t.type)?S[t.type](t,n):r(t,n)}function c(){P.point=l,P.lineEnd=u}function u(){P.point=P.lineEnd=function(t){}}function l(t,n){t*=Math.PI/180,n*=Math.PI/180,m=t,y=Math.sin(n),v=Math.cos(n),P.point=s}function s(t,n){t*=Math.PI/180,n*=Math.PI/180;var e=Math.sin(n),r=Math.cos(n),o=Math.abs(t-m),i=Math.cos(o),a=Math.sin(o),c=r*a,u=v*e-y*r*i,l=y*e+v*r*i;k.add(Math.atan2(Math.sqrt(c*c+u*u),l)),m=t,y=e,v=r}function f(t){return k.reset(),a(t,P),+k}function h(t,n){return C[0]=t,C[1]=n,f(b)}function d(){return 1}function g(){function t(t){o=null===o?null:o||u.charAt(0).toUpperCase()+u.slice(1);var d=i[1][0]-i[0][0],y=i[1][1]-i[0][1],v=i[0][0]+d*a,M=i[0][1]+y*c,S=n.invert([v,M]),x=0,k=0;if(e)x=e,k=x/(h(S,n.invert([v+1,M]))*l);else for(var P=.01,C=0;k<60&&C<100&&(x=P,!((k=x/(h(S,n.invert([v+1,M]))*l))>=60));)x=4*P,k=x/(h(S,n.invert([v+1,M]))*l),P*=10,C++;var b=x/p,w=null===r?[]:r||[0,b/4,b/2,b],E=function(t){return t*k/(x/p)},L=t.selection?t.selection():t,z=L.selectAll(".label").data([o]),A=L.selectAll(".domain").data([null]),F=L.selectAll(".tick").data(w,E).order(),I=F.exit(),O=F.enter().append("g").attr("class","tick"),j=F.select("line"),B=F.select("text"),_=F.select("rect");L.attr("font-family","sans-serif").attr("transform","translate(".concat([v,M],")")),A=A.merge(A.enter().insert("path",".tick").attr("class","domain").attr("fill","none").attr("stroke","currentColor")),F=F.merge(O),j=j.merge(O.append("line").attr("stroke","currentColor").attr("y2",f*m)),B=B.merge(O.append("text").attr("fill","currentColor").attr("y",f*m+2).attr("font-size",10).attr("text-anchor","middle").attr("dy","".concat(1===m?.71:-.35,"em"))),_=_.merge(O.append("rect").attr("fill",function(t,n){return n%2==0?"currentColor":"#fff"}).attr("stroke","currentColor").attr("stroke-width",.5).attr("width",function(t,n,e){return n===e.length-1?0:E(w[n+1]-t)}).attr("y",1===m?0:-f).attr("height",f)),t!==L&&(F=F.transition(t),A=A.transition(t),_=_.transition(t),I=I.transition(t).attr("opacity",1e-6).attr("transform",function(t){return"translate(".concat(E(t),")")}),O.attr("opacity",1e-6).attr("transform",function(t){return"translate(".concat(E(t),")")})),I.remove(),A.attr("d","M".concat(E(0),",").concat(f*m," L").concat(E(0),",0 L").concat(E(b),",0 L").concat(E(b),",").concat(f*m)),F.attr("transform",function(t){return"translate(".concat(E(t),")")}).attr("opacity",1),j.attr("y2",f*m),B.attr("y",f*m+2).text(s),_.attr("fill",function(t,n){return n%2==0?"currentColor":"#fff"}).attr("width",function(t,n,e){return n===e.length-1?0:E(w[n+1]-t)}).attr("y",1===m?0:-f).attr("height",f),null===z?z.remove():z.enter().append("text").attr("class","label").attr("fill","currentColor").attr("font-size",12).attr("dy","-0.32em").merge(z).attr("x","start"===g?0:E("middle"===g?b/2:b)).attr("y",1===m?0:"1.3em").attr("text-anchor",g).text(function(t){return t})}var n,e,r,o,i=null,a=0,c=0,u=w.units,l=w.radius,s=function(t){return Math.round(t)},f=4,g="start",p=1,m=d();return t.distance=function(n){return arguments.length?(e=+n,t):e},t.extent=function(n){return arguments.length?(i=n,t):i},t.label=function(n){return arguments.length?(o=n,t):o},t.labelAnchor=function(n){return arguments.length?(g=n,t):g},t.left=function(n){return arguments.length?(a=+n>1?1:+n<0?0:+n,t):a},t.orient=function(n){return arguments.length?(m=n(),t):1===m?"bottom":"top"},t.projection=function(e){return arguments.length?(n=e,t):n},t.radius=function(n){return arguments.length?(l=+n,t):l},t.size=function(n){return arguments.length?(i=[[0,0],n],t):i[1]},t.top=function(n){return arguments.length?(c=+n>1?1:+n<0?0:+n,t):c},t.tickFormat=function(n){return arguments.length?(s=n,t):s},t.tickSize=function(n){return arguments.length?(f=+n,t):f},t.tickValues=function(n){return arguments.length?(r=n,t):r},t.units=function(n){var e;return arguments.length?(e=n,u=e.units,l=e.radius,t):u},t.zoomFactor=function(n){return arguments.length?(p=+n,t):p},t}function p(){return-1}n.prototype={constructor:n,reset:function(){this.s=this.t=0},add:function(t){e(M,t,this.t),e(this,M.s,this.s),this.s?this.t+=M.t:this.s=M.t},valueOf:function(){return this.s}};var m,y,v,M=new n,S={Feature:function(t,n){r(t.geometry,n)},FeatureCollection:function(t,n){for(var e=t.features,o=-1,i=e.length;++o<i;)r(e[o].geometry,n)}},x={Sphere:function(t,n){n.sphere()},Point:function(t,n){t=t.coordinates,n.point(t[0],t[1],t[2])},MultiPoint:function(t,n){for(var e=t.coordinates,r=-1,o=e.length;++r<o;)t=e[r],n.point(t[0],t[1],t[2])},LineString:function(t,n){o(t.coordinates,n,0)},MultiLineString:function(t,n){for(var e=t.coordinates,r=-1,i=e.length;++r<i;)o(e[r],n,0)},Polygon:function(t,n){i(t.coordinates,n)},MultiPolygon:function(t,n){for(var e=t.coordinates,r=-1,o=e.length;++r<o;)i(e[r],n)},GeometryCollection:function(t,n){for(var e=t.geometries,o=-1,i=e.length;++o<i;)r(e[o],n)}},k=function(){return new n}(),P={sphere:function(t){},point:function(t){},lineStart:c,lineEnd:function(t){},polygonStart:function(t){},polygonEnd:function(t){}},C=[null,null],b={type:"LineString",coordinates:C},w={units:"kilometers",radius:6371.0088},E={units:"feet",radius:20902259.664},L={units:"meters",radius:6371008.8},z={units:"miles",radius:3958.7613};t.geoScaleBar=g,t.geoScaleBottom=d,t.geoScaleTop=p,t.geoScaleFeet=E,t.geoScaleKilometers=w,t.geoScaleMeters=L,t.geoScaleMiles=z,Object.defineProperty(t,"__esModule",{value:!0})});
+!function(t,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports):"function"==typeof define&&define.amd?define(["exports"],n):n(t.d3=t.d3||{})}(this,function(t){"use strict";function n(){this.reset()}function e(t,n,e){var r=t.s=n+e,o=r-n,i=r-o;t.t=n-i+(e-o)}function r(t,n){t&&x.hasOwnProperty(t.type)&&x[t.type](t,n)}function o(t,n,e){var r,o=-1,i=t.length-e;for(n.lineStart();++o<i;)r=t[o],n.point(r[0],r[1],r[2]);n.lineEnd()}function i(t,n){var e=-1,r=t.length;for(n.polygonStart();++e<r;)o(t[e],n,1);n.polygonEnd()}function a(t,n){t&&S.hasOwnProperty(t.type)?S[t.type](t,n):r(t,n)}function c(){P.point=l,P.lineEnd=u}function u(){P.point=P.lineEnd=function(t){}}function l(t,n){t*=Math.PI/180,n*=Math.PI/180,m=t,y=Math.sin(n),v=Math.cos(n),P.point=s}function s(t,n){t*=Math.PI/180,n*=Math.PI/180;var e=Math.sin(n),r=Math.cos(n),o=Math.abs(t-m),i=Math.cos(o),a=Math.sin(o),c=r*a,u=v*e-y*r*i,l=y*e+v*r*i;k.add(Math.atan2(Math.sqrt(c*c+u*u),l)),m=t,y=e,v=r}function f(t){return k.reset(),a(t,P),+k}function h(t,n){return C[0]=t,C[1]=n,f(b)}function d(){return 1}function g(){function t(t){o=null===o?null:o||s.charAt(0).toUpperCase()+s.slice(1);var d=i[1][0]-i[0][0],v=i[1][1]-i[0][1],M=i[0][0]+d*a,S=i[0][1]+v*c,x=n.invert([M,S]),k=0,P=0;if(e)k=e,P=k/(h(x,n.invert([M+1,S]))*l);else for(var C=.01,b=0;P<60&&b<100&&(k=C,!((P=k/(h(x,n.invert([M+1,S]))*l))>=60));)k=4*C,P=k/(h(x,n.invert([M+1,S]))*l),C*=10,b++;var w=k/y,E=null===r?[]:r||[0,w/4,w/2,w],L=function(t){return t*P/(k/y)},z=t.selection?t.selection():t,A=z.selectAll(".label").data([o]),F=z.selectAll(".domain").data([null]),I=z.selectAll(".tick").data(E,L).order(),O=I.exit(),j=I.enter().append("g").attr("class","tick"),B=I.select("line"),_=I.select("text"),q=I.select("rect");z.attr("font-family","sans-serif").attr("transform","translate(".concat([M,S],")")),F=F.merge(F.enter().insert("path",".tick").attr("class","domain").attr("fill","none").attr("stroke","currentColor")),I=I.merge(j),B=B.merge(j.append("line").attr("stroke","currentColor").attr("y2",p*u)),_=_.merge(j.append("text").attr("fill","currentColor").attr("y",p*u+g*u).attr("font-size",10).attr("text-anchor","middle").attr("dy","".concat(1===u?.71:0,"em"))),q=q.merge(j.append("rect").attr("fill",function(t,n){return n%2==0?"currentColor":"#fff"}).attr("stroke","currentColor").attr("stroke-width",.5).attr("width",function(t,n,e){return n===e.length-1?0:L(E[n+1]-t)}).attr("y",1===u?0:-p).attr("height",p)),t!==z&&(I=I.transition(t),F=F.transition(t),q=q.transition(t),O=O.transition(t).attr("opacity",1e-6).attr("transform",function(t){return"translate(".concat(L(t),")")}),j.attr("opacity",1e-6).attr("transform",function(t){return"translate(".concat(L(t),")")})),O.remove(),F.attr("d","M".concat(L(0),",").concat(p*u," L").concat(L(0),",0 L").concat(L(w),",0 L").concat(L(w),",").concat(p*u)),I.attr("transform",function(t){return"translate(".concat(L(t),")")}).attr("opacity",1),B.attr("y2",p*u),_.attr("y",p*u+g*u).text(f),q.attr("fill",function(t,n){return n%2==0?"currentColor":"#fff"}).attr("width",function(t,n,e){return n===e.length-1?0:L(E[n+1]-t)}).attr("y",1===u?0:-p).attr("height",p),null===A?A.remove():A.enter().append("text").attr("class","label").attr("fill","currentColor").attr("font-size",12).attr("dy","-0.32em").merge(A).attr("x","start"===m?0:L("middle"===m?w/2:w)).attr("y",1===u?0:"1.3em").attr("text-anchor",m).text(function(t){return t})}var n,e,r,o,i=null,a=0,c=0,u=d(),l=w.radius,s=w.units,f=function(t){return Math.round(t)},g=2,p=4,m="start",y=1;return t.distance=function(n){return arguments.length?(e=+n,t):e},t.extent=function(n){return arguments.length?(i=n,t):i},t.label=function(n){return arguments.length?(o=n,t):o},t.labelAnchor=function(n){return arguments.length?(m=n,t):m},t.left=function(n){return arguments.length?(a=+n>1?1:+n<0?0:+n,t):a},t.orient=function(n){return arguments.length?(u=n(),t):1===u?"bottom":"top"},t.projection=function(e){return arguments.length?(n=e,t):n},t.radius=function(n){return arguments.length?(l=+n,t):l},t.size=function(n){return arguments.length?(i=[[0,0],n],t):i[1]},t.top=function(n){return arguments.length?(c=+n>1?1:+n<0?0:+n,t):c},t.tickFormat=function(n){return arguments.length?(f=n,t):f},t.tickPadding=function(n){return arguments.length?(g=+n,t):g},t.tickSize=function(n){return arguments.length?(p=+n,t):p},t.tickValues=function(n){return arguments.length?(r=n,t):r},t.units=function(n){var e;return arguments.length?(e=n,s=e.units,l=e.radius,t):s},t.zoomFactor=function(n){return arguments.length?(y=+n,t):y},t}function p(){return-1}n.prototype={constructor:n,reset:function(){this.s=this.t=0},add:function(t){e(M,t,this.t),e(this,M.s,this.s),this.s?this.t+=M.t:this.s=M.t},valueOf:function(){return this.s}};var m,y,v,M=new n,S={Feature:function(t,n){r(t.geometry,n)},FeatureCollection:function(t,n){for(var e=t.features,o=-1,i=e.length;++o<i;)r(e[o].geometry,n)}},x={Sphere:function(t,n){n.sphere()},Point:function(t,n){t=t.coordinates,n.point(t[0],t[1],t[2])},MultiPoint:function(t,n){for(var e=t.coordinates,r=-1,o=e.length;++r<o;)t=e[r],n.point(t[0],t[1],t[2])},LineString:function(t,n){o(t.coordinates,n,0)},MultiLineString:function(t,n){for(var e=t.coordinates,r=-1,i=e.length;++r<i;)o(e[r],n,0)},Polygon:function(t,n){i(t.coordinates,n)},MultiPolygon:function(t,n){for(var e=t.coordinates,r=-1,o=e.length;++r<o;)i(e[r],n)},GeometryCollection:function(t,n){for(var e=t.geometries,o=-1,i=e.length;++o<i;)r(e[o],n)}},k=function(){return new n}(),P={sphere:function(t){},point:function(t){},lineStart:c,lineEnd:function(t){},polygonStart:function(t){},polygonEnd:function(t){}},C=[null,null],b={type:"LineString",coordinates:C},w={units:"kilometers",radius:6371.0088},E={units:"feet",radius:20902259.664},L={units:"meters",radius:6371008.8},z={units:"miles",radius:3958.7613};t.geoScaleBar=g,t.geoScaleBottom=d,t.geoScaleTop=p,t.geoScaleFeet=E,t.geoScaleKilometers=w,t.geoScaleMeters=L,t.geoScaleMiles=z,Object.defineProperty(t,"__esModule",{value:!0})});

package.json

 {
   "name": "d3-geo-scale-bar",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Displays automatic scale bars for projected geospatial data.",
@@ -5,0 +5,0 @@ "keywords": [

README.md

@@ -10,3 +10,3 @@ # d3-geo-scale-bar
 ```html
-<script src="https://unpkg.com/d3-geo-scale-bar@1.0.1/build/d3-geo-scale-bar.min.js"></script>
+<script src="https://unpkg.com/d3-geo-scale-bar@1.0.2/build/d3-geo-scale-bar.min.js"></script>
 <script>
@@ -30,3 +30,3 @@
 
-[Try d3-geo-scale-bar in your browser](https://observablehq.com/d/e2a2c037f579d0c9).
+[Try d3-geo-scale-bar in your browser](https://observablehq.com/@harrystevens/introducing-d3-geo-scale-bar).
 
@@ -48,13 +48,13 @@ ## API Reference
 
-By tweaking the scale bar's configuration and CSS, you can produce [several different scale bar designs](https://observablehq.com/d/e2a2c037f579d0c9#styling).
+By tweaking the scale bar's configuration and CSS, you can produce [several different scale bar designs](https://observablehq.com/@harrystevens/introducing-d3-geo-scale-bar#styling).
 
 A scale bar consists of a [path element](https://www.w3.org/TR/SVG/paths.html#PathElement) of class "domain", followed by four [g elements](https://www.w3.org/TR/SVG/struct.html#Groups) of class "tick" representing each of the scale bar's ticks. Each tick has a [line element](https://www.w3.org/TR/SVG/shapes.html#LineElement) to draw the tick line, a [text element](https://www.w3.org/TR/SVG/text.html#TextElement) for the tick label, and a [rect element](https://www.w3.org/TR/SVG/shapes.html#RectElement) of alternating black and white fill. There is also another text element of class "label" sitting above the bar that denotes the units.
 
-<a name="geoScaleBar" href="#geoScaleBar">#</a> d3.<b>geoScaleBar</b>() · [Source](https://github.com/HarryStevens/d3-geo-scale-bar/blob/master/src/geoScaleBar.js#L5 "Source"), [Example](https://observablehq.com/d/e2a2c037f579d0c9)
+<a name="geoScaleBar" href="#geoScaleBar">#</a> d3.<b>geoScaleBar</b>() · [Source](https://github.com/HarryStevens/d3-geo-scale-bar/blob/master/src/geoScaleBar.js#L5 "Source"), [Example](https://observablehq.com/@harrystevens/introducing-d3-geo-scale-bar)
 
 Constructs a new scale bar generator with the default settings.
 
-<a name="_scaleBar" href="#_scaleBar">#</a> <i>scaleBar</i>(<i>context</i>) · [Source](https://github.com/HarryStevens/d3-geo-scale-bar/blob/master/src/geoScaleBar.js#L21 "Source"), [Example](https://observablehq.com/d/e2a2c037f579d0c9#basicUsage)
+<a name="_scaleBar" href="#_scaleBar">#</a> <i>scaleBar</i>(<i>context</i>) · [Source](https://github.com/HarryStevens/d3-geo-scale-bar/blob/master/src/geoScaleBar.js#L22 "Source"), [Example](https://observablehq.com/@harrystevens/introducing-d3-geo-scale-bar#basicUsage)
 
-Renders the scale bar to the given <i>context</i>, which may be either a [selection](https://github.com/d3/d3-selection) of an SVG [g element](https://www.w3.org/TR/SVG/struct.html#Groups) or a corresponding [transition](https://observablehq.com/d/e2a2c037f579d0c9#transitions). Configure the scale bar with [<i>scaleBar</i>.projection](#scaleBar_projection) and [<i>scaleBar</i>.extent](#scaleBar_fitSize) before rendering. Generally, you will use this with <i>selection</i>.[call](https://github.com/d3/d3-selection#selection_call):
+Renders the scale bar to the given <i>context</i>, which may be either a [selection](https://github.com/d3/d3-selection) of an SVG [g element](https://www.w3.org/TR/SVG/struct.html#Groups) or a corresponding [transition](https://observablehq.com/@harrystevens/introducing-d3-geo-scale-bar#transitions). Configure the scale bar with [<i>scaleBar</i>.projection](#scaleBar_projection) and [<i>scaleBar</i>.extent](#scaleBar_fitSize) before rendering. Generally, you will use this with <i>selection</i>.[call](https://github.com/d3/d3-selection#selection_call):
 
@@ -71,11 +71,11 @@ ```js
 
-<a name="scaleBar_extent" href="#scaleBar_extent">#</a> <i>scaleBar</i>.<b>extent</b>([<i>extent</i>]) · [Source](https://github.com/HarryStevens/d3-geo-scale-bar/blob/master/src/geoScaleBar.js#L156 "Source"), [Example](https://observablehq.com/d/e2a2c037f579d0c9#scaleBar)
+<a name="scaleBar_extent" href="#scaleBar_extent">#</a> <i>scaleBar</i>.<b>extent</b>([<i>extent</i>]) · [Source](https://github.com/HarryStevens/d3-geo-scale-bar/blob/master/src/geoScaleBar.js#L157 "Source"), [Example](https://observablehq.com/@harrystevens/introducing-d3-geo-scale-bar#scaleBar)
 
 If <i>extent</i> is specified, sets the extent of the scale bar generator to the specified bounds and returns the scale bar. The extent is specified as an array [[<i>x0</i>, <i>y0</i>], [<i>x1</i>, <i>y1</i>]], where <i>x0</i> is the left side of the extent, <i>y0</i> is the top, <i>x1</i> is the right, and <i>y1</i> is the bottom. If extent is not specified, returns the current extent which defaults to null. An extent is required to render a scale bar.
 
-<a name="scaleBar_projection" href="#scaleBar_projection">#</a> <i>scaleBar</i>.<b>projection</b>([<i>projection</i>]) · [Source](https://github.com/HarryStevens/d3-geo-scale-bar/blob/master/src/geoScaleBar.js#L176 "Source"), [Example](https://observablehq.com/d/e2a2c037f579d0c9#scaleBar)
+<a name="scaleBar_projection" href="#scaleBar_projection">#</a> <i>scaleBar</i>.<b>projection</b>([<i>projection</i>]) · [Source](https://github.com/HarryStevens/d3-geo-scale-bar/blob/master/src/geoScaleBar.js#L177 "Source"), [Example](https://observablehq.com/@harrystevens/introducing-d3-geo-scale-bar#scaleBar)
 
 If <i>projection</i> is specified, sets the [projection](https://github.com/d3/d3-geo#projections) and returns the scale bar. If <i>projection</i> is not specified, returns the current projection. A projection is required to render a scale bar.
 
-<a name="scaleBar_size" href="#scaleBar_size">#</a> <i>scaleBar</i>.<b>size</b>([<i>size</i>]) · [Source](https://github.com/HarryStevens/d3-geo-scale-bar/blob/master/src/geoScaleBar.js#L184 "Source"), [Example](https://observablehq.com/d/e2a2c037f579d0c9#scaleBar)
+<a name="scaleBar_size" href="#scaleBar_size">#</a> <i>scaleBar</i>.<b>size</b>([<i>size</i>]) · [Source](https://github.com/HarryStevens/d3-geo-scale-bar/blob/master/src/geoScaleBar.js#L185 "Source"), [Example](https://observablehq.com/@harrystevens/introducing-d3-geo-scale-bar#scaleBar)
 
@@ -90,7 +90,7 @@ An alias for [<i>scaleBar</i>.extent](#scaleBar_extent) where the minimum x and y of the extent are ⟨0,0⟩. Equivalent to:
 
-<a name="scaleBar_left" href="#scaleBar_left">#</a> <i>scaleBar</i>.<b>left</b>([<i>left</i>]) · [Source](https://github.com/HarryStevens/d3-geo-scale-bar/blob/master/src/geoScaleBar.js#L168 "Source"), [Example](https://observablehq.com/d/e2a2c037f579d0c9#scaleBarPositioned)
+<a name="scaleBar_left" href="#scaleBar_left">#</a> <i>scaleBar</i>.<b>left</b>([<i>left</i>]) · [Source](https://github.com/HarryStevens/d3-geo-scale-bar/blob/master/src/geoScaleBar.js#L169 "Source"), [Example](https://observablehq.com/@harrystevens/introducing-d3-geo-scale-bar#scaleBarPositioned)
 
 If <i>left</i> is specified, sets the left position to the specified value which must be in the range [0, 1], where 0 is the leftmost side of the scale bar's extent and 1 is the rightmost, and returns the scale bar. If <i>left</i> is not specified, returns the current left position which defaults to 0.
 
-<a name="scaleBar_top" href="#scaleBar_top">#</a> <i>scaleBar</i>.<b>top</b>([<i>top</i>]) · [Source](https://github.com/HarryStevens/d3-geo-scale-bar/blob/master/src/geoScaleBar.js#L188 "Source"), [Example](https://observablehq.com/d/e2a2c037f579d0c9#scaleBarPositioned)
+<a name="scaleBar_top" href="#scaleBar_top">#</a> <i>scaleBar</i>.<b>top</b>([<i>top</i>]) · [Source](https://github.com/HarryStevens/d3-geo-scale-bar/blob/master/src/geoScaleBar.js#L189 "Source"), [Example](https://observablehq.com/@harrystevens/introducing-d3-geo-scale-bar#scaleBarPositioned)
 
@@ -101,11 +101,11 @@ If <i>top</i> is specified, sets the top position to the specified value which must be in the range [0, 1], where 0 is the top-most side of the scale bar's extent and 1 is the bottom-most, and returns the scale bar. If <i>top</i> is not specified, returns the current top position which defaults to 0.
 
-<a name="scaleBar_distance" href="#scaleBar_distance">#</a> <i>scaleBar</i>.<b>distance</b>([<i>distance</i>]) · [Source](https://github.com/HarryStevens/d3-geo-scale-bar/blob/master/src/geoScaleBar.js#L152 "Source"), [Example](https://observablehq.com/d/e2a2c037f579d0c9#scaleBarWapo)
+<a name="scaleBar_distance" href="#scaleBar_distance">#</a> <i>scaleBar</i>.<b>distance</b>([<i>distance</i>]) · [Source](https://github.com/HarryStevens/d3-geo-scale-bar/blob/master/src/geoScaleBar.js#L153 "Source"), [Example](https://observablehq.com/@harrystevens/introducing-d3-geo-scale-bar#scaleBarWapo)
 
-If <i>distance</i> is specifed, sets the maximum distance of the scale bar and returns the scale bar. [Defaults](https://github.com/HarryStevens/d3-geo-scale-bar/blob/master/src/geoScaleBar.js#L42) to the smallest exponent of 10 or 10x4 that will render the bar at least 60 pixels wide. If <i>distance</i> is not specified, returns the current maximum distance of the scale bar.
+If <i>distance</i> is specifed, sets the maximum distance of the scale bar and returns the scale bar. [Defaults](https://github.com/HarryStevens/d3-geo-scale-bar/blob/master/src/geoScaleBar.js#L43) to the smallest exponent of 10 or 10x4 that will render the bar at least 60 pixels wide. If <i>distance</i> is not specified, returns the current maximum distance of the scale bar.
 
-<a name="scaleBar_radius" href="#scaleBar_radius">#</a> <i>scaleBar</i>.<b>radius</b>([<i>radius</i>]) · [Source](https://github.com/HarryStevens/d3-geo-scale-bar/blob/master/src/geoScaleBar.js#L180 "Source"), [Example](https://observablehq.com/d/e2a2c037f579d0c9#scaleBarMoon)
+<a name="scaleBar_radius" href="#scaleBar_radius">#</a> <i>scaleBar</i>.<b>radius</b>([<i>radius</i>]) · [Source](https://github.com/HarryStevens/d3-geo-scale-bar/blob/master/src/geoScaleBar.js#L181 "Source"), [Example](https://observablehq.com/@harrystevens/introducing-d3-geo-scale-bar#scaleBarMoon)
 
-If <i>radius</i> is specifed, sets the radius of the sphere on which the scale bar is placed and returns the scale bar. Defaults to 6371.0088, [the mean radius of Earth in kilometers](https://en.wikipedia.org/wiki/Earth_radius#Mean_radius). If you set [<i>units</i>](#scaleBar_units) to d3.[geoScaleMiles](#geoScaleMiles), the <i>radius</i> will also update to 3958.7613, [the mean radius of Earth in miles](https://en.wikipedia.org/wiki/Earth_radius#Mean_radius). You can set the *radius* to any number you like, useful for [mapping planets other than Earth](https://observablehq.com/d/e2a2c037f579d0c9#spaceBars). If <i>radius</i> is not specified, returns the current radius.
+If <i>radius</i> is specifed, sets the radius of the sphere on which the scale bar is placed and returns the scale bar. Defaults to 6371.0088, [the mean radius of Earth in kilometers](https://en.wikipedia.org/wiki/Earth_radius#Mean_radius). If you set [<i>units</i>](#scaleBar_units) to d3.[geoScaleMiles](#geoScaleMiles), the <i>radius</i> will also update to 3958.7613, [the mean radius of Earth in miles](https://en.wikipedia.org/wiki/Earth_radius#Mean_radius). You can set the *radius* to any number you like, useful for [mapping planets other than Earth](https://observablehq.com/@harrystevens/introducing-d3-geo-scale-bar#spaceBars). If <i>radius</i> is not specified, returns the current radius.
 
-<a name="scaleBar_units" href="#scaleBar_units">#</a> <i>scaleBar</i>.<b>units</b>([<i>units</i>]) · [Source](https://github.com/HarryStevens/d3-geo-scale-bar/blob/master/src/geoScaleBar.js#L204 "Source"), [Example](https://observablehq.com/d/e2a2c037f579d0c9#scaleBarWapo)
+<a name="scaleBar_units" href="#scaleBar_units">#</a> <i>scaleBar</i>.<b>units</b>([<i>units</i>]) · [Source](https://github.com/HarryStevens/d3-geo-scale-bar/blob/master/src/geoScaleBar.js#L209 "Source"), [Example](https://observablehq.com/@harrystevens/introducing-d3-geo-scale-bar#scaleBarWapo)
 
@@ -134,11 +134,11 @@ If <i>units</i> is specifed, sets the [radius](#scaleBar_radius) of the scale bar to the corresponding units and returns the scale bar. Defaults to [d3.geoScaleKilometers](https://github.com/HarryStevens/d3-geo-scale-bar#geoScaleKilometers), which sets the label to "Kilometers" and the radius to 6371.0088, [the mean radius of Earth in kilometers](https://en.wikipedia.org/wiki/Earth_radius#Mean_radius). Note that the Earth's radius varies depending upon latitude, so if extremely high precision matters, you can [perform your own calculation of the radius](https://web.archive.org/web/20200118181437/https://rechneronline.de/earth-radius/) and pass the output to <i>scaleBar</i>.[radius](#scaleBar_radius).
 
-<a name="scaleBar_label" href="#scaleBar_label">#</a> <i>scaleBar</i>.<b>label</b>([<i>label</i>]) · [Source](https://github.com/HarryStevens/d3-geo-scale-bar/blob/master/src/geoScaleBar.js#L160 "Source"), [Example](https://observablehq.com/d/e2a2c037f579d0c9#scaleBarWapo)
+<a name="scaleBar_label" href="#scaleBar_label">#</a> <i>scaleBar</i>.<b>label</b>([<i>label</i>]) · [Source](https://github.com/HarryStevens/d3-geo-scale-bar/blob/master/src/geoScaleBar.js#L161 "Source"), [Example](https://observablehq.com/@harrystevens/introducing-d3-geo-scale-bar#scaleBarWapo)
 
 If a <i>label</i> string is specified, sets the text in the scale bar's label to the specified string and returns the scale bar. Defaults to the capitalized unit, e.g. "Kilometers". If label is specified as null, removes the label. If <i>label</i> is not specified, returns the current label.
 
-<a name="scaleBar_labelAnchor" href="#scaleBar_labelAnchor">#</a> <i>scaleBar</i>.<b>labelAnchor</b>([<i>anchor</i>]) · [Source](https://github.com/HarryStevens/d3-geo-scale-bar/blob/master/src/geoScaleBar.js#L164 "Source"), [Example](https://observablehq.com/d/e2a2c037f579d0c9#scaleBarWapo)
+<a name="scaleBar_labelAnchor" href="#scaleBar_labelAnchor">#</a> <i>scaleBar</i>.<b>labelAnchor</b>([<i>anchor</i>]) · [Source](https://github.com/HarryStevens/d3-geo-scale-bar/blob/master/src/geoScaleBar.js#L165 "Source"), [Example](https://observablehq.com/@harrystevens/introducing-d3-geo-scale-bar#scaleBarWapo)
 
 If an <i>anchor</i> string is specified, aligns the scale bar's label such that it is either at the "start" of the scale bar, the "middle" of the scale bar, or the "end" of the scale bar, and returns the scale bar. Defaults to "start". If an <i>anchor</i> string is not specified, returns the current anchor.
 
-<a name="scaleBar_orient" href="#scaleBar_orient">#</a> <i>scaleBar</i>.<b>orient</b>([<i>orientation</i>]) · [Source](https://github.com/HarryStevens/d3-geo-scale-bar/blob/master/src/geoScaleBar.js#L172 "Source"), [Example](https://observablehq.com/d/e2a2c037f579d0c9#scaleBarTop)
+<a name="scaleBar_orient" href="#scaleBar_orient">#</a> <i>scaleBar</i>.<b>orient</b>([<i>orientation</i>]) · [Source](https://github.com/HarryStevens/d3-geo-scale-bar/blob/master/src/geoScaleBar.js#L173 "Source"), [Example](https://observablehq.com/@harrystevens/introducing-d3-geo-scale-bar#scaleBarTop)
 
@@ -163,11 +163,15 @@ If an <i>orientation</i> is specified, styles the bar according to the specified orientation and returns the scale bar. If an <i>orientation</i> is not specified, returns the current orientation as a string, either "top" or "bottom". Defaults to [d3.geoScaleBottom](#geoScaleBottom).
 
-<a name="scaleBar_tickFormat" href="#scaleBar_tickFormat">#</a> <i>scaleBar</i>.<b>tickFormat</b>([<i>formatter</i>]) · [Source](https://github.com/HarryStevens/d3-geo-scale-bar/blob/master/src/geoScaleBar.js#L192 "Source"), [Example](https://observablehq.com/d/e2a2c037f579d0c9#scaleBarPositioned)
+<a name="scaleBar_tickFormat" href="#scaleBar_tickFormat">#</a> <i>scaleBar</i>.<b>tickFormat</b>([<i>formatter</i>]) · [Source](https://github.com/HarryStevens/d3-geo-scale-bar/blob/master/src/geoScaleBar.js#L193 "Source"), [Example](https://observablehq.com/@harrystevens/introducing-d3-geo-scale-bar#scaleBarPositioned)
 
 If a <i>formatter</i> function is specified, each tick value is passed through the formatter before being displayed. Defaults to (d, i, e) => Math.round(d), where d is the tick number, i is the tick index, and e is an array of all tick data. If a <i>formatter</i> is not specified, returns the current formatter.
 
-<a name="scaleBar_tickSize" href="#scaleBar_tickSize">#</a> <i>scaleBar</i>.<b>tickSize</b>([<i>size</i>]) · [Source](https://github.com/HarryStevens/d3-geo-scale-bar/blob/master/src/geoScaleBar.js#L196 "Source"), [Example](https://observablehq.com/d/e2a2c037f579d0c9#scaleBarWapo)
+<a name="scaleBar_tickPadding" href="#scaleBar_tickPadding">#</a> <i>scaleBar</i>.<b>tickPadding</b>([<i>padding</i>]) · [Source](https://github.com/HarryStevens/d3-geo-scale-bar/blob/master/src/geoScaleBar.js#L197 "Source"), [Example](https://observablehq.com/@harrystevens/introducing-d3-geo-scale-bar#scaleBarTop)
 
+If <i>padding</i> is specified, sets the padding to the specified value in pixels and returns the scale bar. If <i>padding</i> is not specified, returns the current padding which defaults to 2 pixels.
+
+<a name="scaleBar_tickSize" href="#scaleBar_tickSize">#</a> <i>scaleBar</i>.<b>tickSize</b>([<i>size</i>]) · [Source](https://github.com/HarryStevens/d3-geo-scale-bar/blob/master/src/geoScaleBar.js#L201 "Source"), [Example](https://observablehq.com/@harrystevens/introducing-d3-geo-scale-bar#scaleBarWapo)
+
 If a <i>size</i> number is specified, sets the vertical tick size of the scale bar in pixels and returns the scale bar. Defaults to 4. If <i>size</i> is not specified, returns the current tick size of the scale bar.
 
-<a name="scaleBar_tickValues" href="#scaleBar_tickValues">#</a> <i>scaleBar</i>.<b>tickValues</b>([<i>values</i>]) · [Source](https://github.com/HarryStevens/d3-geo-scale-bar/blob/master/src/geoScaleBar.js#L200 "Source"), [Example](https://observablehq.com/d/e2a2c037f579d0c9#scaleBarBottom)
+<a name="scaleBar_tickValues" href="#scaleBar_tickValues">#</a> <i>scaleBar</i>.<b>tickValues</b>([<i>values</i>]) · [Source](https://github.com/HarryStevens/d3-geo-scale-bar/blob/master/src/geoScaleBar.js#L205 "Source"), [Example](https://observablehq.com/@harrystevens/introducing-d3-geo-scale-bar#scaleBarBottom)
 
@@ -178,5 +182,5 @@ If a <i>values</i> array is specified, sets the tick values to the specified values in the array rather than using the scale bar’s automatic tick generator, and returns the scale bar. Defaults to [0, kilometers / 4, kilometers / 2, kilometers]. Passing <i>null</i> removes the values and their associated ticks from the scale bar. If <i>values</i> is not specified, returns the current tick values.
 
-<a name="scaleBar_zoomFactor" href="#scaleBar_zoomFactor">#</a> <i>scaleBar</i>.<b>zoomFactor</b>([<i>k</i>]) · [Source](https://github.com/HarryStevens/d3-geo-scale-bar/blob/master/src/geoScaleBar.js#L208 "Source"), [Example](https://observablehq.com/d/e2a2c037f579d0c9#zooming)
+<a name="scaleBar_zoomFactor" href="#scaleBar_zoomFactor">#</a> <i>scaleBar</i>.<b>zoomFactor</b>([<i>k</i>]) · [Source](https://github.com/HarryStevens/d3-geo-scale-bar/blob/master/src/geoScaleBar.js#L213 "Source"), [Example](https://observablehq.com/@harrystevens/introducing-d3-geo-scale-bar#zooming)
 
-If <i>k</i> is specified, zooms the scale bar by the <i>k</i> [scale factor](https://github.com/d3/d3-zoom#zoomTransform) and returns the scale bar. This will commonly [be used](https://observablehq.com/d/e2a2c037f579d0c9#zooming) in conjunction with [d3-zoom](https://github.com/d3/d3-zoom):
+If <i>k</i> is specified, zooms the scale bar by the <i>k</i> [scale factor](https://github.com/d3/d3-zoom#zoomTransform) and returns the scale bar. This will commonly [be used](https://observablehq.com/@harrystevens/introducing-d3-geo-scale-bar#zooming) in conjunction with [d3-zoom](https://github.com/d3/d3-zoom):
 
@@ -183,0 +187,0 @@ ```js

src/geoScaleBar.js

@@ -10,12 +10,13 @@ import { default as geoDistance } from "./geo/distance";
       top = 0,
+      orient = geoScaleBottom(),
+      radius = geoScaleKilometers.radius,
       units = geoScaleKilometers.units,
       distance,
-      radius = geoScaleKilometers.radius,
-      tickValues,
       tickFormat = d => Math.round(d),
+      tickPadding = 2,
       tickSize = 4,
+      tickValues,
       labelText,
       labelAnchor = "start",
-      zoomFactor = 1,
-      orient = geoScaleBottom();
+      zoomFactor = 1;
 
@@ -85,6 +86,6 @@ function scaleBar(context){
         .attr("fill", "currentColor")
-        .attr("y", tickSize * orient + 2)
+        .attr("y", tickSize * orient + tickPadding * orient)
         .attr("font-size", 10)
         .attr("text-anchor", "middle")
-        .attr("dy", `${orient === 1 ? 0.71 : -0.35}em`));
+        .attr("dy", `${orient === 1 ? 0.71 : 0}em`));
     
@@ -126,3 +127,3 @@ rect = rect.merge(tickEnter.append("rect")
     text
-        .attr("y", tickSize * orient + 2)
+        .attr("y", tickSize * orient + tickPadding * orient)
         .text(tickFormat);
@@ -199,2 +200,6 @@
   
+  scaleBar.tickPadding = function(_) {
+    return arguments.length ? (tickPadding = +_, scaleBar) : tickPadding;
+  }
+  
   scaleBar.tickSize = function(_) {
@@ -201,0 +206,0 @@ return arguments.length ? (tickSize = +_, scaleBar) : tickSize;

No alert changes

Improved metrics

Lines of code

751

increased by1.08%

Number of lines in readme file

192

increased by2.13%

Worsened metrics

Total package byte prevSize

59128

decreased by-7.32%

Number of package files

21

decreased by-4.55%

No dependency changes